1.属性选择器
input {
display: block;
margin-top: 10px;
}
input[name] {
background-color: aqua;
}
input[name='name111'] {
background-color: black;
}
input[name^='2name'] {
background-color: blue;
}
input[name$='4'] {
background-color: blueviolet;
}
input[name*='15'] {
background-color: cadetblue;
}
<input type="text" name="name111" />
<input type="text" name="2name112" />
<input type="text" name="2name113" />
<input type="text" name="name114" />
<input type="text" name="name115" />
<input type="text" name="name117" />
<input type="text" name="name118" />
<input type="text" name="name119" />
效果:
2.结构伪类选择器
- nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
demo:
.ul1 li:nth-child(2n) {
color: blue;
}
.ul1 li:first-child {
color: aquamarine;
}
.ul1 li:last-child {
color: red;
}
.ul2 li:nth-of-type(2n) {
color: blue;
}
.ul2 li:first-of-type {
color: aquamarine;
}
.ul2 li:last-of-type {
color: red;
}
<ul class="ul1">
<li class="li01">001</li>
<li class="li02">002</li>
<li class="li03">003</li>
<li class="li04">004</li>
<li class="li05">005</li>
<li class="li06">005</li>
<li class="li07">006</li>
<li class="li08">007</li>
<li class="li09">008</li>
<li class="li10">009</li>
<span>11111</span>
</ul>
<hr>
<ul class="ul2">
<li class="li01">001</li>
<li class="li02">002</li>
<li class="li03">003</li>
<li class="li04">004</li>
<li class="li05">005</li>
<li class="li06">005</li>
<li class="li07">006</li>
<li class="li08">007</li>
<li class="li09">008</li>
<li class="li10">009</li>
<span>11111</span>
</ul>
效果:
总结:
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
- 关于 nth-child(n) 我们要知道 n 是从 0 开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用 nth-child 更多
- 类选择器、属性选择器、伪类选择器,权重为 10。
3.伪元素选择器
- before 和 after 创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法: element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为 1
- input输入框不支持伪元素选择器
div {
position: relative;
border: 1px solid;
height: 20px;
width: 200px;
}
div::after {
content: 'v';
position: absolute;
right: 8px;
bottom: 1px;
}
<div></div>
效果:
4.双伪元素清除浮动
demo:
.box {
float: left;
height: 50px;
width: 50px;
background-color: red;
}
.clearfix::before,
.clearfix::after {
content: '';
display: block;
clear: both;
}
<div class="clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<p>1111111</p>
效果:
5.文章参考链接
a. https://www.boxuegu.com/
b. https://blog.csdn.net/qq_41359066/article/details/100601426
c. https://blog.csdn.net/hecr_mingong/article/details/112575254