CSS 选择器

概览

在 CSS 中，选择器用于选择须要添加样式的元素。

CSS 选择器很是丰富，现将 CSS 1 - 3 目前全部的选择器列举以下。

选择器	例子	例子描述	CSS版本
.class	.intro	选择 class="intro" 的全部元素。	1
#id	#firstname	选择 id="firstname" 的元素。	1
*	*	选择全部元素。	2
element	p	选择全部 <p> 元素。	1
selector,selector	div,p	选择全部 <div> 元素和全部 <p> 元素。	1
selector selector	div p	选择 <div> 元素内部的全部 <p> 元素。	1
selector>selector	div>p	选择父元素为 <div> 元素的全部 <p> 元素。	2
selector+selector	div+p	选择紧接在 <div> 元素以后的全部 <p> 元素。	2
[attribute]	[target]	选择带有 target 属性全部元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的全部元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的全部元素。	2
[attribute|=value]	[lang|=en]	选择 lang 属性值以 "en" 开头的全部元素。	2
:link	a:link	选择全部未被访问的连接。	1
:visited	a:visited	选择全部已被访问的连接。	1
:active	a:active	选择活动连接。	1
:hover	a:hover	选择鼠标指针位于其上的连接。	1
:focus	input:focus	选择得到焦点的 input 元素。	2
:first-letter	p:first-letter	选择每一个 <p> 元素的首字母。	1
:first-line	p:first-line	选择每一个 <p> 元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每一个 <p> 元素。	2
:before	p:before	在每一个 <p> 元素的内容以前插入内容。	2
:after	p:after	在每一个 <p> 元素的内容以后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每一个 <p> 元素。	2
selector~selector	p~ul	选择前面有 <p> 元素的每一个 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每一个 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的全部 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每一个 <a> 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素只有惟一的 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素只有惟一的子元素 <p>.	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素 <p>.	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，可是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素 <p>.	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每一个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每一个启用的 <input> 元素。	3
:disabled	input:disabled	选择每一个禁用的 <input> 元素	3
:checked	input:checked	选择每一个被选中的 <input> 元素。	3
:not(selector)	:not(p)	选择非 <p> 元素的每一个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3
:out-of-range	input:out-of-range	匹配值在指定区间以外的 <input> 元素。	3
:in-range	input:in-range	匹配值在指定区间以内的 <input> 元素。	3
:read-write	input:read-write	匹配可读可写的 <input> 元素。	3
:optional	input:optional	匹配可选输入的 <input> 元素。	3
:required	input:required	匹配必须输入的 <input> 元素。	3
:valid	input:valid	匹配输入有效的 <input> 元素。	3
:invalid	input:invalid	匹配输入无效的 <input> 元素。	3

CSS 选择器这么多，都须要掌握吗？多吗，分组去记忆仍是很好掌握的，掌握的越多你就越能为所欲为的操纵HTML文档。

上面的选择器只是基础，掌握了上面的内容，只能说明你识字了，至于能不能组成句子，甚至优美的句子还有很大的距离。

记住并使用选择器

如何记住这么多选择器呢？我我的记忆方式是，一是分组，二是使用，在此分享给你们。

基础选择器

类选择器.class，ID选择器#id，通配符选择器*，元素选择器element是四个最基本的选择器，相信你早就记住了。

* {
    color: black;
}
a {
    color: blue;
}
.msg {
    color: red;
}
#top {
    background-color: #ff0000;
}

选择器组合

经过使用特定的符号来链接选择器能够实现更加丰富的选择功能。

selector, selector

逗号链接两个或多个选择器实现多选的功能。

h1, h2, .title {
    color: black;
}

h1, h2 标签和 class="title" 的元素的字体颜色都设置为黑色。

selector selector

空格直接相连的两个或多个选择器能够实现精肯定位的功能。

#header h3 {
    color: #fff;
}

ID为header的元素下面的h3元素字体颜色设置为白色。

selector > selector

大于号链接的两个选择器实现父子选择的功能。

HTML文档片断

<div class="info">
    <p>hello,job1...</p>
    <p>hello,job2...</p>
    <div>
        <p>hi,job3...</p>
    </div>
</div>
<p>hi,job4...</p>

CSS样式

.info > p {
    background-color: yellow;
}

.info下的全部直接子元素 p(带有hello的段落)背景被设置为黄色，其他的(带有hi的段落，不是子元素或不是直接子元素)不受影响。

selector + selector

加号相连的两个选择器实现同级紧邻的元素选择的功能。

HTML部分文档

<h1>欢迎来到我到的主页</h1>

<div>
<p>我是唐老鸭。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

<p>个人样式会改变。</p>

CSS样式

div + p + p {
    background-color: yellow;
}

div 紧挨的第一个同级元素 p 是“我最好的朋友是米老鼠。”，而后又一个 + 连着 p 最终选中最后一个 p.

selector ~ selector

波浪线链接的两个选择器实现同级并在其下面全部选择器指定元素的选择功能（好绕，看例子吧）。

HTML文档

<div>A div element.</div>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>The first paragraph.</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2>Another list</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS样式

p ~ ul{
    background:#ff0000;
}

p 元素同级的 ul 而且 ul 元素是在 p 的下面。

注意：这个是CSS3新增的选择器。

选择器结合

结合的意思嘛，就是连着写在一块儿呗。

div#user {
    color: black;
}

<div id="user">我是黑色字体</div>

经常使用的就是 element#id,element.class.

也有一种多类选择器，也算选择器结合

HTML文档

<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>

CSS样式

.important {font-weight: bold;}
.warning {font-style: italic;}
.important.warning {background: silver;}

注意：在 IE7 以前的版本中，不能正确地处理多类选择器。

属性选择器

HTML标签能够定义若干属性，咱们能够经过属性选择器进行元素的选取。

注意区分CSS3新增的属性选择器。

[attribute]

选取包含某属性的元素。

a[href]

选取包含href属性的a标签。

[attribute=value]

选择某个属性attribute而且属性值为value的元素。

.info[ref='good']

[attribute~=value]

选择某个属性attribute而且属性值中有value这个单词的元素。

这里是指单词，属性值若是是 boy man 则有两个单词。

p[class~='man']

[attribute|=value]

属性起始值为value的元素。

p[class|='cls']

以上是CSS2开始提供的属性选择器，下面的将是CSS3提供的选择器，注意区别使用。

[attribute^=value]

属性值以value开始的元素。

[attribute$=value]

属性值以value结尾的元素。

[attribute*=value]

属性值包含value的元素，不必定是单词哟。

伪类选择器

所谓的伪类，你能够简单的理解为带 : 的选择器。伪类很好理解，通常从名称上就能够知道其做用了。

能够从如下几个方面去记。下面的归类只用来方便记忆，这些选择器并不局限于我所列举的场景。

跟 a 紧密关联的

a:link

全部未被访问的连接。

a:hover

鼠标移动到连接上面。

a:active

鼠标点按在连接上不松开。

a:visited

连接已经点击过。

注意: 为了产生预期的效果，在CSS定义中，尽可能采用上面四个的顺序去定义。

:target

是CSS3中新增的选择器，用于标示当前处于活动的锚标记。

HTML文档

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

CSS样式

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

当点击锚定位a标签时，相应的锚元素会设置为指定样式。

跟 input 紧密关联的

:focus

选择具备焦点的元素，通常都是输入元素。

除了 :focus 是CSS2开始有的，下面的都是CSS3新增的伪类。

:enabled

可用的输入元素。

:disabled

不可用的输入元素。

input[type="text"]:disabled {
    background:#dddddd;
}

<input type="text" disabled="disabled" value="Disneyland" />

:valid

匹配输入合法的元素，例如：email,number等等。

:invalid

不合法的。

input:invalid {
    border:2px solid red;
}

<input type="email" value="supportEmail" />

:optional

匹配可选输入元素。

:required

匹配设置了“required”的元素。

input:required {
    background-color: yellow;
}

<input type="text" required />

:read-write

匹配可读可写的元素。

:read-only

匹配设置了“readonly”的元素。

input:read-only {
    background-color: yellow;
}

<input type="text" readonly value="hello" />

readonly 和 disabled 能够实现一样的功能，禁止用户输入和更改。

:out-of-range

匹配设置范围且值范围超出范围的元素。

input:out-of-range {
    border:2px solid red;
}

<input type="number" min="5" max="10" value="17" />

:in-range

匹配在设置值范围内的元素。

:checked

匹配被选中的元素。

父子及排序关系相关

先说一下经常使用于 p 的：

:first-letter

第一个字母，通常用于实现首字母大写。

:first-line

选取第一行。

比较通用的

:before

在元素以前插入内容。

:after

在元素以后插入内容。

示例

p:before {
    content:"Read this -";
}

以前以后是指元素内部的前面和后面。

<p>
::before
xxxx
::after
</p>

上面几个是CSS1或2开始支持的，下面的除了:first-child 是CSS2开始的，其他的都是CSS3伪类。

:root

选择文档的根元素，基本就是 <html> 标签。

:empty

没有任何子级（包括文本内容）的元素。

父子关系伪类有两种，一种是*-type 的，做用于父元素，另外一种是*-child的，做用于子元素，仍是看例子好理解。

:first-of-type

选取一个元素的父元素的第一个这个元素。

HTML文档

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

CSS样式

p:first-of-type {
    background:#ff0000;
}

第一个 p 标签将被设置背景色。p 的父元素是body,body的第一个p元素被选中。

:last-of-type

这个元素的父元素的最后一个这个元素被选中。

:only-of-type

这个元素的父元素只有一个这个元素，能够有其余元素不影响，惟一的这个元素被选中。

:nth-of-type(n)

这个元素的父元素的第n个元素被选中。

n 能够是一个数字，一个关键字，或者一个公式。

• 数字：从1开始，表明第一个元素

• 关键字：奇数 odd 偶数 even

• 表达式：公式（an+b） a 表明一个循环的大小，n是计数器（从0开始），b是偏移量。

示例

tr:nth-of-type(2n+1) {
    background:#ff0000;
}

奇数行（1,3,5,7...）设置背景。

:nth-last-of-type(n)

从后往前计算。

说完 type 该说 child 了。

:first-child

这个是CSS2开始有的伪类选择器，选取这个元素的第一个子元素。

示例

ul:first-child {
    color: blue;
}

让ul的第一个li的字体为蓝色。

:last-child

最后一个子元素。

:nth-child(n)

第几个子元素，n配置同上。

:nth-last-child(n)

从后开始找子元素。

还剩下几个，单独列出来吧。

其余

:lang(language)

选取lang属性的起始值为language的元素。

:not(selector)

选择器的取反，这个很好理解。

示例

:not(a) {
    color: black;
}

全部的非a标签。

::selection

匹配元素中被用户选中或处于高亮状态的部分。

示例

::selection {
    color:#ff0000;
    background-color:blue;
}

鼠标拉选中的部分字体设置为红色，背景设置为蓝色。

后续会再跟进和补充一些东西，先发这些吧。