伪类选择器操作的是被选中的对象
1.E:not(s)
选中的是div中 类名不是.test的元素 操作的对象是div
div:not(.test) {
background-color: red;
}
<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3</div>
image.png
如何使最后一个li的border-bottom不显示
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 300px;
border: 1px solid #999;
}
li{
height: 50px;
margin: 0 5px;
}
li:not(:last-of-type) {
border-bottom: 1px solid black;
} 选中li中 不是 最后一个元素 的元素
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
image.png
2.root根标签选择器
root和html不相同 root是根标签选择器 包含html
:root{
background-color:red ;
}
html{
background-color: green;
}
image.png
3.target
改变另一个不相干结构的状态 点击a标签改变对应div的状态
div:target{
border: 1px solid red;
}
<a href="#box1">box1</a>
<a href="#box2">box2</a>
<div id="box1">
1
</div>
<div id="box2">
2
</div>
点击herf="#box1"的a标签，对应的box1出现红色边框
image.png
4.1 E:first-child 操作的是E 非E的父级 操作的是p并不是div
p:first-child{ 操作的是P并不是div
background-color: red;
}
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
若div:first-child{} 则不会出现结果，伪类选择器是针对被选中元素操作它的状态，此时被选中的元素是一堆p元素 first-child是指只有第一个子元素才满足条件，则操作的是作为div下第一个子元素p的状态
image.png
4.2 E:last-child
操作的是作为 E的父级中 的最后一个的 E元素
操作的是作为 div中 的最后一个 p元素
p:last-child{
background-color: red;
}
image.png
p:last-child{
background-color: red;
}
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<p>4</p>
此时选中的是div下的一堆子元素p和body下的一个子元素p,last-child,只有作为div下最后一个子元素p或作为body下最后一个子元素p才满足条件
image.png
4.3 E:only-child
span:only-child{ span是否作为父级div下唯一的子元素
background-color: red;
}
div:only-child{ div是否作为父级body下唯一的子元素
background-color: green;
}
<div>
<span>0</span>
<p>1</p>
</div>
span不是div下唯一的子元素，不显示，div是body下唯一的子元素，显示
image.png
4.4 E:nth-child()
p:nth-child(2n+1){ n从0开始，css从1开始 odd奇数 even偶数
background-color: red;
}
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
(2n+1)表示的是奇数
伪类选择器操作的是一堆p元素，并且这些p元素是作为div下的奇数项
则1、3、5被选中
image.png
4.5 E:nth-last-child()
p:nth-last-child(1){ 选中一堆p元素中作为div的倒数第一个的元素p
background-color: red;
}
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div
image.png
4.6 E:nth-child(odd) 参考E的父级
p:nth-child(odd){ 选中的p元素满足 在div中处于奇数位的条件
background-color: red;
}
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
作为div中奇数位的是0，2，4三个元素，选中的一堆p元素中满足条件的只有2与4
image.png
总结：
E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
这5个伪类选择器都要考虑同级的其他子元素，所以这5种写法不常用
5.1 E:first-of-type 选中的是一堆E元素中的第一个元素E
p:first-of-type{
background-color: red;
}
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
1作为一堆p元素中的第一个元素
image.png
5.2 E:last-of-type 选中的是E元素中的最后一个元素E
p:last-of-type{
background-color: red;
}
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
5作为一堆p元素中的最后一个元素p，不考虑span对它的影响
image.png
5.3 E:last-of-type 选中每个结构下E元素中的最后一个E元素
和5.2做比较
p:last-of-type{
background-color: red;
}
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<p>6</p>
image.png
5.4 E:only-of-type 选中每个结构下的E元素，并且这些E元素在相应的结构下都是单个的
p:only-of-type{
background-color: red;
}
<div>
<span>0</span>
<p>1</p>
</div>
<p>6</p>
1作为div下的单个p元素
6作为body下的单个p元素
image.png
5.5 E:nth-of-type(n)选中的是一堆E元素中的第n个元素
p类型下的第一个元素
p:nth-of-type(1){
background-color: red;
}
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<p>6</p>
image.png
5.5 E:nth-last-of-type(n)选中的是一堆E元素中的倒数第n个元素
和5.4做对比
p:nth-last-of-type(1){
background-color: red;
}
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<p>6</p>
image.png
6. E:empty 选中的是一堆E元素，且满足内容是空的E元素
div:empty{
border: 1px solid #000;
width: 100px;
height: 100px;
background-color: red;
}
<div><span>123</span></div>
<div></div>
<div>234</div>
<div><!-- 12345t--></div> 注释也算作空内容
image.png
我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com
网友评论