今天继续学习了css3部分的一些知识,关于选择器部分做个小结。
1.css属性选择器。
可以让我们根据标签中具有的属性进行选择
button[disabled] {
cursor: default //选中具有disabled的button标签
}
span[class^=black] {
color: lightgreen; //选中以black类名开头的span标签
}
span[class$=black] {
color: lightsalmon; //选中以black类名结尾的span标签
}
span[class*=black] {
color: lightseagreen; //选中包含black类名的span标签
}
2.结构伪类选择器
可以让我们更好的在一个匹配集合里进行选择元素。
ul li:first-child {
background-color: lightseagreen; //选择第一个li元素
}
ul li:last-child {
background-color: lightcoral;//选择最后一个li元素
}
ul li:nth-child(3) {
background-color: aqua;//选择第三个li元素
}
注意:在nth-child
里面
*第 0 个元素或者超出了元素的个数会被忽略。
*n 可以是数字、关键字、公式。
*常见的关键字有 even
偶数、odd
奇数。
3.伪元素选择器
可以让我们直接插入内容。
div {
width: 100px;
height: 100px;
border: 1px solid lightcoral;
}
div::after,
div::before {
width: 20px;
height: 50px;
text-align: center;
display: inline-block;
}
div::after {
content: '德';
background-color: lightskyblue;
}
div::before {
content: '道';
background-color: mediumaquamarine;
}
注意:
before
和after
必须有content
属性before
在内容前面,after 在内容后面before
和after
创建的是一个元素,但是属于行内元素- 创建出来的元素在
Dom
中查找不到,所以称为伪元素 - 伪元素和标签选择器一样,权重为 1