种子搜索网站开发,网站怎么添加后台,做学徒哪个网站好,建设局网站招聘一、属性选择器与伪类选择器
属性选择器#xff1a;匹配那些具有特定属性或属性值的元素
style/* */input[typepassword] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */inpu…一、属性选择器与伪类选择器
属性选择器匹配那些具有特定属性或属性值的元素
style/* */input[typepassword] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */input[type*e] {background-color: blueviolet;}/* 属性值以什么开头 */input[type^p] {background-color: brown;}/* 属性值以什么结尾 */input[type$t] {background-color: red;}/* 表示的是下一个标签 */.box1p {background-color: blue;}/style
伪类选择器添加到选择器的关键字用于指定所选元素的特殊状态。
style/* 访问前 */a:link {color: red;}/* 访问后 */a:visited {color: chartreuse;}/* 鼠标悬停时 */a:hover {color: pink;}/* 鼠标点击时 */a:active {color: darkblue;}/* 需要按照lvha的顺序书写 *//style
其他伪类 styleul li:nth-child(8) {background-color: pink;}li:nth-child(2n1) {background-color: blue;}li:last-child {background-color: aqua;}ul li:first-child {background-color: aquamarine;}li:nth-of-type(3) {background-color: aqua;}/style
/headbodyulli我是一个li1/lili我是一个li2/lip我是一段文字/pli我是一个li3/lili我是一个li4/lili我是一个li5/lili我是一个li6/lili我是一个li7/lili我是一个li8/lili我是一个li9/lili我是一个li10/lili我是一个li11/lip我是一个段落/p/ul/body
伪元素选择器伪元素是一个附加至选择器末的关键词允许你对被选择元素的特定部分修改样式。
styleul li::before {content: 66666;width: 10px;height: 10px;background-color: pink;}ul li::after {content: ----------------zhangsan;}/* 文字被选中时 */ul li::selection {background-color: pink;}/style
二、文本修饰
font font-size: 12px;/* */font-weight: 700;text-align: center;font-style: italic;/* 字体族 */font-family: Lucida Sans, Lucida Sans Regular, Lucida Grande, Lucida Sans Unicode, Geneva, Verdana, sans-serif;/* 让行高等于容器的高度来实现单行文本的垂直居中 */line-height: 300px;/* 默认400是正常粗细700是加粗字体 bold*//* font-weight: 400; normal*/font-weight: bold;/* line-height: 40px; *//* fontstyle weight size/line-height family */font: italic 700 30px/40px 微雅软黑;
文本缩进text-indent: 2em;
文本装饰 /* 主要用于去除a链接的默认样式 */ text-decoration: none;
颜色 /* background-color: aqua; *//* 关键字 */color: rgb(131, 13, 33);/* rgb函数红、绿、蓝三原色 *//* rgba函数红、绿、蓝、透明度 */color: rgba(131, 13, 33, 0.3);/* 十六进制表示 */color: #00FFFF;
三、练习五彩导航
本次选择用伪类选择器方法进行试验则鼠标悬在上方时变色
html:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title五彩导航/titlelink relstylesheet hrefcss1.css
/headbodydiv classfivea href# classfive1五彩导航/aa href# classfive2五彩导航/aa href# classfive3五彩导航/aa href# classfive4五彩导航/a/div/body/html
css:
.five a {display:inline-block;width: 120px;height: 58px;background-color:pink;text-align: center;line-height: 50px;color:aqua;
}
.five .five1:hover {background-color: yellow;
}
.five .five2:hover {background-color: purple;
}
.five .five3:hover {background-color:red;
}
.five .five4:hover {background-color: blue;
}
