伪类 == 被动 |
---|
1. :not(选择元素)
:not(selector) 选择器匹配非指定元素/选择器的每个元素。 |
---|
小案例(最后的下边框去除):
<style>
ul{
width:300px;
border:1px solid #999;
}
li{
height:50px;
margin: 0 5px;
}
li:not(:last-of-type){ /*选中除了最后一个的所有元素*/
border-bottom: 1px solid;
}
</style>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
样式效果如下图:
2. :root 根节点选择器
- 作用跟html节点一样
- xml页面也可以使用
3. :target 目标伪类选择器
- :target 会匹配 url 链接 #后面的所有元素,包括 # 号。
小案例(三个点击按钮跳转显示元素)示例如下:
<style>
:root,
body{ /*使用:root根节点选择器,使高度能够作用于下级*/
margin:0;
height:100%;
}
div:not(.buttonWrapper){
width:100%;
height:100%;
}
#bgred{
background-color: red;
}
#bggreen{
background-color: green;
}
#bggray{
background-color: gray;
}
.buttonWrapper{
position: absolute;
width:600px;
top:400px;
}
.buttonWrapper a{
text-decoration: none;
color: #fff;
background-color: #fcc;
border-radius: 30px;
margin:0 10px;
}
div[id]:not(:target){
display: none;
}
</style>
<body>
<div class="buttonWrapper">
<a href="#bgred" class="red">123</a>
<a href="#bggreen" class="green">456</a>
<a href="#bggray" class="gray">789</a>
</div>
<div id="bgred"></div>
<div id="bggreen"></div>
<div id="bggray"></div>
</body>
4. :first-child 选中的元素在其父元素中的第一个子元素
代码示例:
p:first-child{
background-color: red;
}
<body>
<p>4</p> <!--这行也显示红色,因为它也是在其父元素的第一个子元素-->
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
效果图如下:
阅读下面的代码,防止掉坑:
p:first-child{
background-color: red;
}
<body>
<p>4</p> <!--显示红色-->
<div>
<span></span>
<p>1</p> <!--不能显示红色-->
<p>2</p>
<p>3</p>
</div>
</body>
5. :nth-child(n) n是自然数从 1 开始
- :nth-child(2n+1) 顺序奇数选择
- :nth-child(2n) 顺序偶数选择