CSS3新增的选择符其实就是在CSS2选择符的基础上增加了一些,大的种类没变。具体新增如下
- 关系选择符新增:
E + F
E ~ F
- 属性选择符新增:
E[attr ~="val"]
E[attr |="val"]
E[attr ^="val"]
E[attr $="val"]
E[attr *="val"]
- 伪元素选择符新增
E::placeholder
E::selection
- 伪类选择器新增
E:not(s)
:root
E:target
E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-of-last-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:read-only
E:read-write
以上就是CSS3新增的选择符,可以看到就是在关系选择符、属性选择符、伪类和伪元素中增加了一些,想想也是,在大类不新增的情况下,确实只能在这几个地方新增,它不可能在id选择器、标签选择器、通配符选择器、类选择器等上新增吧。
下面一个一个详细讲讲:
E + F 表示下一个满足条件的兄弟元素节点
<head>
<style>
div + span{
color: #f00;
}
</style>
</head>
<body>
<div>div</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>

注意:选择的是紧挨着的元素,如果上述例子div下面放一个p元素,则会无法选择到span。
E ~ F 表示满足条件的下一些兄弟元素节点
<head>
<style>
div ~ span {
color: #f00;
}
</style>
</head>
<body>
<span>span</span>
<div>div</div>
<span>span0</span>
<p>p</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>

注意:只会选中其后面的兄弟元素节点,即只能选中弟弟们,哥哥们是选不到的。
E[attr ~="val"] 表示属性名为attr,属性值包含一个独立的val的元素
<style>
span[class~='a'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="b">span1</span>
<span class="a b">span2</span>
<span class="aaa bbb">span3</span>
</body>

注意:表示的属性值必须是独立的,如果上例中class="ab"是选中不了。
E[attr |="val"] 表示属性名为attr,属性值以val开头或者以val-开头的元素
<head>
<style>
span[class|='a'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>

注意:以什么开头或者以什么加-开头都行
E[attr ^="val"] 表示属性名为attr ,属性值以val开头的元素
<head>
<style>
span[class^='a'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>

E[attr $="val"] 表示属性名为attr,属性值以val结尾的元素
<head>
<style>
span[class$='test'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>

E[attr *="val"] 表示attr属性的属性值中包含val的元素
<head>
<style>
span[class*='t'] {
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>

注意:整个属性值中,只要在任意一个地方包含即可。
再往下是伪类和伪元素新增的了
这里简单简单说一下伪元素和伪类,好多人比较容易搞混:
伪类表示的是被选择元素的某种状态
伪元素表示的是被选择元素的某个部分
8. 伪元素:E::placeholder 表示被选择元素的占位符
<head>
<style>
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder {
/* IE10+ */
color: #999;
}
input:-moz-placeholder {
/*Firefox4-18 */
color: #999;
}
input::-moz-placeholder {
/* Firefox19+ */
color: #999;
}
</style>
</head>
<body>
<input type="text" placeholder="占位符" />
</body>
一般::placeholde选中的是input元素中的占位符部分,设置占位符的样式
9. E::selection 表示元素被选择的部分,设置该部分的样式
<head>
<style>
span::selection{
color: #f00;
background-color: antiquewhite;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="a-test">span1</span>
<span class="b-test">span2</span>
<span class="ab-test">span3</span>
</body>

下面是C3新增的伪类
E:not(s) 表示选择的元素中不包含某些元素的元素,剔除一些不满足条件的元素
<head>
<style>
span:not([class="a"]){
color: #f00;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="b">span1</span>
<span class="c">span2</span>
<span class="d">span3</span>
</body>

:root 表示根标签,在html文档中表示html标签,在xml标签xml的根标签
<head>
<style>
:root,body{
background-color: #f00;
height: 100%;
}
</style>
</head>
<body>
<span class="a">span0</span>
<span class="b">span1</span>
<span class="c">span2</span>
<span class="d">span3</span>
</body>

设置根标签的高度100%,会把文档的视口高度继承下来
E:target 表示选择元素中,被a标签锚点标记的元素
<head>
<style>
div:target{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<a href="#test">点我</a>
<div id="test"></div>
</body>

E:first-child表示是别人的第一个孩子
<head>
<style>
span:first-child{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<p>p</p>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>

注意:选中的元素必须是别人的大儿子,会受到其他类型元素的影响。如上例中,第二个div下的大儿子是p,所以用span:first-child选不到,因为这里是二儿子了。
E:last-child 表示选中元素是别人的最后一个孩子
<head>
<style>
span:last-child{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<p>p</p>
</div>
</body>

:last-child必须也是别人的最后一个孩子,会受到其他元素类型的影响,如果其后面还有别的类型的元素,那也不能选到。
E:only-child 表示被选中元素是别人的独生子,有别类型的元素也不行
<head>
<style>
span:only-child{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<i>i tag</i>
</div>
<div>
<span>1</span>
</div>
</body>

E:nth-child(n) 表示选中元素是别人的第几个孩子,n从1开始算,但是作为表达式是从0开始算,也会受到其他类型的兄弟元素的影响
<head>
<style>
p:nth-child(2n+1){
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div>
<span>span</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>

E:nth-last-child(n) 跟:nth-child(n)类似,这里表示的是被选中元素是别人的倒数第几个孩子
<head>
<style>
span:nth-last-child(1){
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<span>span</span>
</div>
</body>

如果倒数第几个不是该类型的元素则无法选中。
上面5个方法E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
会受到其他类型的元素的影响。这不太好,下面对应有5个方法,不受其他类型元素的影响的伪类,会更加好用点。
E:first-of-type 表示选中元素中是别人的第一个该类型的大儿子,即匹配父元素下第一个类型为E的子元素
<head>
<style>
p:first-of-type{
color: #f40;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<span>span</span>
<p>pppp</p>
</div>
</body>

不受其他类型元素的影响,相当于在这个类型元素下找第几个。下面几个类似
E:last-of-type 表示选中父元素下的所有E子元素中的倒数第一个。
E:only-of-type 表示选中父元素的所有子元素中唯一的那个子元素E。
E:nth-of-type(n) 表示选中父元素的所有E子元素中的第几个E元素
E:nth-of-last-type(n) 表示选中父元素的所有E子元素中的倒数第几个E元素
E:empty 表示选中的元素里面的内容为空,或者内容只有comment节点的元素;注意这里不管是否有属性节点
<head>
<style>
p:empty{
width:100px;
height: 14px;
background-color: cadetblue;
}
</style>
</head>
<body>
<p></p>
<p><!-- 这里有comment节点 --></p>
<p>有内容的p</p>
<p class="have-attr-p"></p>
</body>

E:checked 表示被选中状态的E元素,例如单选框和复选框
E:enabled 表示选中元素中可以正常使用的元素
E:disabled 表示选中元素中被禁用的元素
E:read-only 表示选中元素中设置了readonly="readonly"的元素
E:read-write 表示选中的E元素中,可读可写的元素
网友评论