1、:root
根选择器,等同于<html>元素
:root{
background:orange;
}
html{
background:orange;
}
/*代码效果相同*/
2、:not
否定选择器,可以选择除某个元素之外的所有元素
input:not([type="submit"]){
border:1px solid red;
}
3、:empty
用来选择没有任何内容的元素,没有任何内容表示什么都没有,甚至空格都没有
div:empty{
min-height:30px;
border:1px solid green;
/*给没有内容的div添加一个1px的绿色边框*/
}
4、:target
目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素
html:
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">content for Brand</div>
css:
.menuSection{
display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
display:block;
}
效果为最初不显示div内容,点击Brand标签后显示div中的内容
多个url(多个target)处理
<a href="#jack">跳转jack</a>
<div id="jack">jack</div>
<a href="#sparrow">sparrow</a>
<div id="sparrow">sparrow</div>
#jack:target{
color: red;
}
#sparrow:target{
color:blue;
}
5、:first-child
选择父元素的第一个子元素
<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>
<li>9</li>
<li>10</li>
</ul>
ul>li:first-child{
color:red;
}
6、:last-child
选择父元素的最后一个子元素
ul>li:last-child{
color:blue;
border-bottom:none;/*删除最后一个子元素的底边框*/
}
7、:nth-child(n)
选择父元素的一个或多个特定的子元素
“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
ul>li:nth-child(2n-1){
background-color: orange;
}
ul>li:nth-child(even){
background-color: blue;
}
8、:nth-last-child(n)
从某父元素的最后一个子元素开始计算,来选择特定的元素
ul > li:nth-last-child(5){
background: orange;
/*倒数第五个背景色为橘色*/
}
9、:first-of-type 用法同:first-child
选择父元素下的某个类型的第一个子元素
<div class="wrapper">
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<div>我是第一个Div元素</div>
<div>我是第二个Div元素</div>
<p>我是第三个段落</p>
<p>我是第四个段落</p>
<div>我是第三个Div元素</div>
<div>我是第四个Div元素</div>
</div>
.wrapper>p:first-of-type{
color:purple;
}
10、:last-of-type 用法同:last-child
.wrapper > p:last-of-type{
background: orange;
}
11、:nth-of-type(n) 用法同:nth-child(n)
.wrapper>p:nth-of-type(odd){
color:purple;
}
12、:nth-last-of-type(n) 用法同:nth-last-child(n)
.wrapper > p:nth-last-of-type(3){
background: orange;
}
13、:only-child
选择父元素中有且仅有的子元素
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>
.post p:only-child {
background: orange;
}
14、:only-of-type
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
<div class="wrapper">
<div>我是一个Div</div>
<ul>
<li>我是一个列表项</li>
</ul>
<p>我是一个段落</p>
</div>
.wrapper > div:only-of-type {
background: orange;
}