css3选择器整理 - 抹桥的博客

属性选择器#

E[att^="val"]：选择att属性值以val开头的 E 元素。
E[att$="val"]：选择att属性值以val结尾的 E 元素。
E[att*="val"]：选择att属性值包含val的 E 元素。

结构性伪类选择器#

:root: 根选择器，匹配元素所在文档的根元素。在HTML中，根元素始终为<html>。 : 否定选择器，选择某元素以外的所有元素。下面的代码，最终会为type=button的元素设置红色的背景。

<style>
	input:not([type="text"]){background-color: red};
</style>
<body>
	<input type='text'>
	<input type='text'>
	<input type='button'>
</body>

: 空选择器，选择内容为空的元素。空元素为里面什么都没有的元素，包括空格。 : 目标选择器，匹配文档的 url 的某个标志符的目标元素。下面的代码可以给每个 a 添加点击事件，当点击 a1 时，id=‘a1’元素的背景会变成红色，其他同理。

<style>
	#a1:target{background-color: red}
	#a2:target{background-color: blue}
	#a3:target{background-color: yellow}
</style>
<body>
	<a href="#a1">a1</a>
	<a href="#a2">a2</a>
	<a href="#a3">a3</a>
	<div id="a1">a1</div>
	<div id="a2">a2</div>
	<div id="a3">a3</div>
</body>

: 选择父元素的第一个子元素,ul li:first-child，选择 ul 下的第一个 li 元素。 : 与上一个选择相反，选择最后一个子元素。 nth-child(n): 选择父元素下的一个或多个指定的子元素。其实 n 是一个参数，可以是一个数字，也可以是一个表达式。选择 ul 下序号为偶数（即第二个和第四个，n 从零算起）的 li，并将其字体设置为黄色。

li:nth-child(2n){color:yellow;}
<ul>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
</ul>

nth-last-child(n): 和上一个选择器相反，从父元素的最后一个子元素开始算起，来选择指定的元素。 first-of-type: 选择父元素下第一个指定 tpye 的元素，div p:first-of-type,选择一个 div 里的第一个 p 元素。 nth-of-type(n): 与nth-child(n)类似，选择父元素中指定 type 的指定位置的元素。div p:nth-of-type(3),选择 div 下第 3 个 p 元素。 last-of-type: 与first-of-type类似，不过选择是父元素下最后指定 type 的元素。 nth-last-of-type(n): 与nth-of-type(n)类似，不同的是从父元素的后面开始选择。 only-child: div p:only-child当有多个 div 时，选择仅有一个元素的 div 下的 p 元素。仅第一个 ul 下的 li 的颜色会变成橘色，其他 li 的不变。

li:only-child{color: orange}
<ul>
	<li>你好</li>
</ul>
<ul>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
</ul>

only-of-type: 与上一个类似，不同之处为选择父级下只有一个指定 type 的元素的子元素。

其他选择器#

: 表单中，有可用（“”）和不可用（“”）两种状态。此选择其选择可用状态的元素。 : 与上一个选择器类似，选择不可用状态的元素。 checked: 单选按钮和复选按钮都具有选中和未选中状态。此选择器选择选中状态下的按钮。 selection: 伪元素是用来匹配突出显示的文本(即用鼠标选则文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“蓝色背景，白色字体”显示。::selection{color:black;},将选中的文本夜色变为黑色。 read-only: 选择只读状态的元素。即设置了”readonly=‘readonly’”,(在 html5 中为直接设置 readonly 的元素)。 read-write: 与 read-only 相反，选择处于可读写状态的元素。 before: 用来给元素前面插入内容。 after: 给元素后面插入内容。