CSS选择器详解【有待完善】
本文由 小茗同学 发表于 2016-07-13 浏览(525)
最后修改 2017-07-06 标签:css3 css 选择器 selector
[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

含义
匹配没有子元素(包括文本节点)的每个元素。

注意

  1. 需要特别注意的是,要满足:empty选择器必须元素内部什么都没有,包括空格!
  2. 虽然,上面说什么都不能有,但是,其实注释还是允许存在的,也就是说:empty会忽略注释内容;
  3. 可以配合: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>

参考

http://www.w3school.com.cn/cssref/css_selectors.asp