类选择器，属性选择器，伪类选择器权重为10
伪元素选择器，标签选择器权重为1
1.属性选择器
<style>
/*匹配input标签，并且有value属性*/
input[value] {
color: pink;
}
/*匹配input标签，必须有type属性,并且值等于password*/
/*权重为1 + 10 = 11*/
input[type=password] {
color: blue;
}
</style>
<body>
<input type="text" value="请输入用户名" />
<input type="text" />
<input type="password" />
</body>
2.结构伪类选择器
<style>
/*匹配父元素中的第一个子元素*/
ul:first-child {
color: pink;
}
/*匹配父元素中的第一个li子元素*/
ul li:first-child {
color: pink;
}
/*匹配父元素中的最后一个li子元素*/
ul li:last-child {
color: red;
}
/*匹配父元素中的第n个li子元素，n从1开始计算*/
ul li:nth-child(5) {
color: blue;
}
/*匹配父元素中的偶数li子元素，公式的n从0开始计算*/
ul li:nth-child(even or 2n) {
color: blue;
}
/*匹配父元素中的奇数li子元素，公式的n从0开始计算*/
ul li:nth-child(odd or 2n+1) {
color: blue;
}
/*匹配父元素中的所有li子元素，公式的n从0开始计算*/
ul li:nth-child(n) {
color: blue;
}
</style>
<body>
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<li>第6个孩子</li>
<li>第7个孩子</li>
<li>第8个孩子</li>
</ul>
</body>
在无序列表用nth-of-type匹配效果会更好
<style>
/*first-child会首先找section的第一个子元素，发现是光头强，接着再看它是不是div，发现不是，就不会匹配*/
section div:first-child {
color: pink;
}
/*first-of-type会先看section的div，并且对其进行排序，符合条件的第一个子元素为熊大，可以匹配成功*/
section div:first-of-type {
color: pink;
}
section div:last-of-type {
color: red;
}
/*n的参数使用同上*/
section div:nth-of-type(2) {
color: blue;
}
</style>
<body>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
<div>佩奇</div>
</section>
</body>
1.伪元素选择器
// 在DOM树中找不到这个新创建的元素
// 语法：element::before element::after
// 必须有content属性
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
/*box创建一个元素*/
.box::before {
content: "我";
}
.box::after {
content: "小猪佩奇";
}
</style>
<body>
<div class="box">是</div>
</body>
网友评论