概览
在 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;
}
鼠标拉选中的部分字体设置为红色,背景设置为蓝色。
后续会再跟进和补充一些东西,先发这些吧。