[TOC]
css1和css2就开始有的选择器
css3新增选择器
兄弟选择器
E ~ F
通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F
选择器将选择中所有E元素后面的F元素。比如下面的代码:
通用兄弟选择器和相邻兄弟选择器极其相似,只不过,相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素(选中的仅一个元素);而通用兄弟元素选择器,选中的是元素相邻的后面兄弟元素,这样说起来可能会有迷糊,大家可以仔细看看其相邻兄弟的效果图。
属性选择器
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
索引选择器
其它选择器
:epmty
含义:
匹配没有子元素(包括文本节点)的每个元素。
注意:
- 需要特别注意的是,要满足
:empty
选择器必须元素内部什么都没有,包括空格! - 虽然,上面说什么都不能有,但是,其实注释还是允许存在的,也就是说
:empty
会忽略注释内容; - 可以配合:after或者:before来给空元素增加类似“暂无内容”的提示;
<style>
p:empty {
width:100px;
height:20px;
background:#ff0000;
}
p:empty:after {
content: '暂无内容';
}
</style>
<p>第一个段落。</p>
<p></p>
<p>第三个段落。</p>
<p><!-- :empty选择器允许存在注释 --></p>
<p> </p>
<p>第五个段落。</p>
::selection
含义:匹配被用户选中的元素部分
<style type="text/css">
div::selection
{
background: #eb7350;
color: #fff;
}
</style>
<div>使用鼠标选中我背景色将会是红色哦!</div>
<p>使用鼠标选中我背景色将会是默认的蓝色!</p>