简单选择器
- 1. 类型选择器
- 2. 通用类型选择器
- 3. 类选择器
- 4. 属性选择器
- 5. ID 选择器 (#)
- 6. 伪类选择器
- 6.1 未访问选择器 (:link)
- 6.2 已访问选择器 (:visited)
- 6.3 悬浮选择器 (:hover)
- 6.4 激活选择器 (:active)
- 6.5 焦点选择器 (:focus)
- 6.6 使能状态选择器 (:enabled)
- 6.7 禁用状态选择器 (:disabled)
- 6.8 只读选择器 (:read-only)
- 6.9 可读可写选择器 (:read-write)
- 6.10 提示信息选择器 (:placeholder-shown)
- 6.11 长子选择器 (:first-child)
- 6.12 幺子选择器 (:last-child)
- 6.13 独子选择器 (:only-child)
- 7. 伪元素选择器
可以从多个维度描述 HTML 元素,比如元素类型、元素ID、元素使用的类、元素属性、元素状态、元素行为等。简单选择器是从单一的维度来描述要选择的 HTML 元素,这就是它简单的真正含义。简单选择器包含:
简单选择器是级联选择器和组合选择器的基础,需要好好理解和掌握。
本文在介绍简单选择器时也会给出它们的级联用法,以便和实际应用结合的更加紧密。
1. 类型选择器
类型选择器 (Type Selector) 根据元素的类型来选择元素。对于 HTML 文档来说,元素类型的名称和元素标签的名称是一样的,所以也有人称之为标签选择器。看到这里您一定猜出来类型是什么了,没错,p
、div
、span
都是 HTML 元素类型。
语法
E
说明
类型选择器的选择目标是这样的 HTML 元素:这些元素的类型是 E
。
比如 p{color:red}
规则,选择器 p
将选择所有的 p
元素或 <p>
标签。
再比如 span{color:red}
规则,选择器 span
将选择所有的 span
元素或 <span>
标签。
示例
将所有 span
元素的文字颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title>Type Selector Demo</title> <style type="text/css"> span {color:red;} </style> </head> <body> <p>The quick brown <span>fox</span></p> <p>jumps over the lazy <span>dog</span>.</p> </body> </html> |
效果
The quick brown fox
jumps over the lazy dog.
2. 通用类型选择器
通用类型选择器 (Universal Selector) 用于选择所有类型的元素。和类型选择器相比,通用类型选择器可以一次选择多个类型的元素。
语法
*
说明
通用类型选择器的选择目标是这样的 HTML 元素:所有类型的 HTML 元素。
比如 *{color:red}
规则,选择器 *
将选择所有类型的 HTML 元素。
通用类型选择器可以和其它简单选择器级联,形成级联选择器。
比如 *.warning{color:red}
规则,选择器 *.warning
是 *
(通用类型选择器)和 .warning
(类选择器)的级联,它将选择使用了 warning
类的 HTML 元素。一般 *
可以省略,因此 *.warning{color:red}
和 .warning{color:red}
是等价的。
示例
将所有 HTML 元素的文字颜色设为蓝色,并将使用了 fswaring
类的 HTML 元素的文字颜色设为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <style type="text/css"> *{color:blue;} *.fswaring{color:red;} </style> <body> <div> <p>The quick brown fox jumps over the lazy dog.</p> <p class="fswaring"> The quick brown fox jumps over the lazy dog.</p> </div> <p> The quick brown <span class="fswarning">fox</span> jumps over the lazy dog.</p> </body> </html> |
效果
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
3. 类选择器
类选择器 (Class Selector) 用于选择使用了某种 CSS 类的 HTML 元素。类选择器以 .
开始,后面紧跟类的名字。
语法
.class-name
说明
类选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 class-name
的 CSS 类。
比如 p.warning{color:red}
规则,选择器 p.warning
将选择使用了 warning
类的 p
元素。
比如 div.message.warning{color:red}
规则,选择器 div.message.warning
将选择同时使用了 message
类和 warning
类的 div
元素。
示例
将使用了 fshighlight
类的 HTML 元素的文字颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <title>Type Selector Demo</title> <style type="text/css"> .fshighlight {color:red;} </style> </head> <body> <ol> <li>one</li> <li class="fshighlight">two</li> <li>three</li> <li>four</li> <li class="fshighlight">five</li> </ol> <p>Monday</p> <p class="fshighlight">Thesday</p> </body> </html> |
效果
- one
- two
- three
- four
- five
Monday
Thesday
4. 属性选择器
属性选择器 (Attribute Selector) 通过 HTML 元素的属性名和属性值来选择元素。属性选择器可细分为以下几类:
选择器 | 语法 |
---|---|
属性名选择器 | [att] |
属性值相等选择器 | [att=val] |
属性值包含选择器 | [att~=val] |
属性值包含字符串选择器 | [att*=val] |
属性值语言选择器 | [att |
属性值前缀选择器 | [att^=val] |
属性值后缀选择器 | [att$=val] |
4.1 属性名选择器 ([att])
属性名选择器根据 HTML 元素是否使用了某种名称的属性来选择 HTML 元素。
语法
[att]
说明
属性名选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 att
的属性。
比如 p[align] {color:red}
规则,选择器 p[align]
将选择使用了 align
属性的 p
元素。
示例
将使用了 id
属性的 span
元素的文字颜色设为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> span[id] {color:red;} </style> </head> <body> <p> <span>松下问童子,</span><br> <span id="a1">言师采药去。</span><br> <span>只在此山中,</span><br> <span id="a2">云深不知处。</span> </p> <p> <span>君问归期未有期,</span><br> <span id="b1">巴山夜雨涨秋池。</span><br> <span>何当共剪西窗烛,</span><br> <span>却话巴山夜雨时。</span> </p> </body> </html> |
效果
松下问童子,
言师采药去。
只在此山中,
云深不知处。
君问归期未有期,
巴山夜雨涨秋池。
何当共剪西窗烛,
却话巴山夜雨时。
4.2 属性值相等选择器 ([att=val])
属性值相等选择器通过判断元素的属性值是否与指定值相等来选择元素。
语法
[att=val]
说明
属性值相等选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 att
的属性,并且 att
的属性值与 val
完全相等。
比如 div[class=”book”]{color:red}
规则,选择器 div[class=”book”]
将选择使用了 class
属性,并且 class
属性的值等于 book
的 div
元素。
比如 *[class=”book”]{color:red}
规则,选择器 *[class=”book”]
将选择使用了 class
属性,并且 class
属性的值等于 book
的所有类型的 HTML 元素。选择器 *[class=”book”]
可简写为 [class=”book”]
。
示例
将使用了 class
属性,并且它的属性值等于 here
的 span
元素的文字颜色设为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> span[class="here"] {color:red;} </style> </head> <body> <p> <span class="here">松下问童子,</span><br> <span>言师采药去。</span><br> <span>只在此山中,</span><br> <span class="break here">云深不知处。</span> </p> </body> </html> |
效果
松下问童子,
言师采药去。
只在此山中,
云深不知处。
4.3 属性值包含选择器 ([att~=val])
属性值包含选择器通过判断元素的属性值是否包含了指定的内容来选择元素。
因为元素的属性值可能有多个,比如 <p class=”note warning”>
,因此可以使用属性值包含选择器 [class~=”note”]
或 [class~=”waring”]
来选择这个 p
元素。
语法
[att~=val]
说明
属性值包含选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 att
的属性,并且 att
的属性值中至少有一个与 val
完全一样。
比如 p[class~=”book”].note{color:red}
规则,选择器 p[class~=”book”].note
将选择使用了 note
类,而且使用了 class
属性,并且 class
的属性值中至少有一个是 book
的 p
元素。
示例
将使用了 class
属性,并且 class
的属性值中至少有一个等于 here
的 span
元素挑选出来,并将这些 span
元素的文字颜色设为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> span[class~="here"] {color:red;} </style> </head> <body> <p> <span class="here">松下问童子,</span><br> <span>言师采药去。</span><br> <span>只在此山中,</span><br> <span class="break here">云深不知处。</span> </p> </body> </html> |
效果
松下问童子,
言师采药去。
只在此山中,
云深不知处。
4.4 属性值包含字符串选择器 ([att*=val])
属性值包含字符串选择器通过判断元素的属性值是否包含指定字符串来选择元素。
语法
[att*=val]
说明
属性值包含字符串选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 att
的属性,并且 att
的属性值包含了 val
字符串。
比如 p[class*=”dock”]{color:red}
规则,选择器 p[class*=”dock”]
将选择使用了 class
属性,并且 class
的属性值中包含了 dock
字符串的 p
元素。这个规则将选中 <p class=”top book msdock”>
元素,因为这个 元素使用了 class
属性,并且它的第三个属性值 msdock
包含了 dock
这个字符串。
示例
将使用了 class
属性,并且 class
的属性值中含有 here
字符串的 span
元素挑选出来,并将这些 span
元素的文字颜色设为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> span[class*="here"] {color:red;} </style> </head> <body> <p> <span class="here">松下问童子,</span><br> <span class="here-click">言师采药去。</span><br> <span class="there">只在此山中,</span><br> <span class="break">云深不知处。</span> </p> </body> </html> |
效果
松下问童子,
言师采药去。
只在此山中,
云深不知处。
4.5 属性值语言选择器 ([att|=val])
属性值语言选择器根据元素的属性值来选择元素。这种选择模式主要是为选择语言代码设计的,因此本文称之为语言选择器。
语法
[att|=val]
说明
属性值语言选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 att
的属性,并且 att
的属性值等于 val
或以 val-
前缀开始。
比如 [lang|=”de”]{color:red}
规则,选择器 [lang|=”de”]
将选择 <p lang=”de”>
、<div lang=”de-DE”>
、<p lang=”de-CH-1901”>
等元素。
示例
将英文段落的文字显示为蓝色,中文段落的文字显示为红色,法文段落的文字显示为绿色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p[lang|="en"] {color:blue;} p[lang|="zh"] {color:red;} p[lang|="fr"] {color:darkgreen;} </style> </head> <body> <p> <p lang="zh">中文:今天是个好天气</p> <p lang="en">英文:the weather is nice today.</p> <p lang="fr-Brai">法文:Aujourd'hui est une bonne journée.</p> </p> </body> </html> |
效果
中文:今天是个好天气
英文:the weather is nice today.
法文:Aujourd'hui est une bonne journée.
4.6 属性值前缀选择器 ([att^=val])
属性值前缀选择器通过判断元素的属性值是否以指定的字符串开始来选择元素。
语法
[att^=val]
说明
属性值前缀选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 att
的属性,并且 att
的属性值以 val
开始。
比如 div[class^=”mo”]{color:red}
规则,选择器 div[class^=”mo”]
将选择使用了 class
属性,并且它的属性值以 mo
开始的 div
元素。根据这个规则,<div class=”mo-book”>
、<div class=”moarticle”>
元素都会被选中。
示例
将 id
值以 ms
开始的 span
元素挑选出来,并将这些 span
元素的文字颜色设为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> span[id^="ms"] {color:red;} </style> </head> <body> <p> <span>松下问童子,</span><br> <span id="h001">言师采药去。</span><br> <span id="ms-301">只在此山中,</span><br> <span id="ms001">云深不知处。</span> </p> </body> </html> |
效果
松下问童子,
言师采药去。
只在此山中,
云深不知处。
4.7 属性值后缀选择器 ([att$=val])
属性值后缀选择器通过判断元素的属性值是否以指定的字符串结束来选择元素。这个选择器适合查找属性中含有文件名的元素。
语法
[att$=val]
说明
属性值后缀选择器的选择目标是这样的 HTML 元素:这些元素使用了名为 att
的属性,并且 att
的属性值以 val
结束。
比如 a[href$=”.jpg”]{color:red}
规则,选择器 a[class$=”.jpg”]
将选择使用了 href
属性,并且属性值以 .jpg
结尾的 a
元素。根据这个规则,<a href=”rh.jpg”>
元素会被选中。
示例
将链接地址以 .html
结尾的 a
元素以黄色背景色显示。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> a[href$="html"] {background:yellow;} </style> </head> <body> <p><a href="here.html">here.html</a></p> <p><a href="here.htm">here.htm</a></p> </body> </html> |
效果
以下两个链接仅为展示效果,无须点击
5. ID 选择器 (#)
HTML 元素如果设置了 ID ,那么这个 ID 的值就必须是唯一的。 HTML 元素的 ID 是元素的一个重要特征,对于选择元素非常有帮助。
语法
#val
说明
ID 选择器的选择目标是这样的 HTML 元素:该元素设置了 id
属性,并且 id
的属性值与 val
相同。
ID选择器以 #
开始,随后紧跟ID值。
比如 p#note1{color:red}
规则,选择器 p#note1
将选择 id
值为 note1
的 p
元素。
示例
将 id
值为 note1
的 span
元素的文本颜色设置为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> span#note1 {color:red;} </style> </head> <body> <p> <span>松下问童子,</span><br> <span id="no">言师采药去。</span><br> <span id="note1">只在此山中,</span><br> <span id="note2">云深不知处。</span> </p> </body> </html> |
效果
言师采药去。
只在此山中,
云深不知处。
6. 伪类选择器
在上面的章节我们介绍了5种简单选择器:类型选择器、通用类型选择器、类选择器、属性选择器、ID选择器。这5种选择器通过不同的特征来选择 HTML 元素,这些特征都可以在 HTML 文档中找到。还有一些特征也可以帮助我们选择 HTML 元素,比如链接是否访问过、鼠标是否在元素上方,但这些特征并不存在于HTML文档中,因此 CSS 引入了伪类选择器的概念。
伪类选择器以 :
开头。
6.1 未访问选择器 (:link)
未访问选择器是针对具有 href
属性的超链接元素的。在 HTML 中,超链接元素有两种状态:未访问、访问过。未访问选择器用于选择未访问过的超链接元素。
语法
:link
说明
未访问选择器的选择目标是未访问过的超链接元素。
比如 a:link{color:blue}
规则,选择器 a:link
将选择所有未访问过的 a
元素。
比如 a.far:link{…}
规则,选择器 a.far:link
将选择所有使用了 far
类,并且未访问过的 a
元素。
示例
下例中唐诗三百首在被点击之前将显示为红色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> a:link{color:red;} </style> </head> <body> <p> <a href="#not-move-1">唐诗三百首</a> </p> <p id="book">here</p> </body> </html> |
效果
here
6.2 已访问选择器 (:visited)
和未访问选择器不同,已访问选择器用于选择已访问过的超链接元素。
语法
:visited
说明
已访问选择器的选择目标是已经访问过的超链接元素。
比如 a:visited{color:red}
规则,选择器 a:visited
将选择所有的已访问过的 a
元素
示例
下面的代码将已经访问过的 a
链接的颜色设为绿色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> a:visited{color:green;} </style> </head> <body> <p> <i>点击下面的链接,它将变成绿色...</i> </p> <p> <a href="#not-move-2">唐诗三百首</a> </p> <p id="book2">here</p> </body> </html> |
效果
点击下面的链接,它将变成绿色
here
6.3 悬浮选择器 (:hover)
用户使用鼠标浏览网页的时候,鼠标可能会位于某个元素之上,这种情况叫做鼠标的悬浮。 CSS 可以利用这个特征来选择元素。
语法
:hover
说明
悬浮选择器的选择目标是这样的 HTML 元素:鼠标位于这个元素之上,但用户还没有点击鼠标左键来激活元素。
比如 a:hover.note{color:red}
规则,选择器 a:hover.note
将选择使用了 note
类,并且鼠标悬浮于其上的 a
元素。
示例
下面的代码实现这样的效果:鼠标悬浮于松下问童子和言师采药去时,显示不同的背景色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p.first:hover{background:lime} p.second:hover{background:yellow;} </style> </head> <body> <p class="first">松下问童子</p> <p class="second">言师采药去</p> </body> </html> |
效果
鼠标移动到下方的文字会显示不同的背景色
松下问童子
言师采药去
6.4 激活选择器 (:active)
用户可在某个元素上按下鼠标左键,在用户松开鼠标左键之前元素的状态称为激活状态, CSS 可以利用这个特征来选择元素。
语法
:active
说明
激活选择器的选择目标是这样的 HTML 元素:用户在这个元素上按下了鼠标左键,但未松开。
比如 p.warning:active{color:red}
规则,选择器 p.warning:active
将选择使用了 warning
类,并且鼠标左键按下但未松开时鼠标所在的 p
元素。
示例
下面的代码实现这样的效果:鼠标悬浮于松下问童子和言师采药去时,显示黄色背景;在它们之上按下鼠标左键显示红色背景。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p:hover{background:yellow} p:active{background:red} </style> </head> <body> <p>松下问童子</p> <p>言师采药去</p> </body> </html> |
效果
鼠标移动到下方的文字会显示黄色背景,按下鼠标左键显示红色背景,松开鼠标左键又恢复黄色背景。
松下问童子
言师采药去
6.5 焦点选择器 (:focus)
<input>
、<textarea>
等编辑元素只有在获得焦点时才能响应用户按键。 CSS 可以利用元素是否获得焦点这个特征来选择元素。
语法
:focus
说明
焦点选择器的选择目标是这样的 HTML 元素:获得了焦点的元素。
比如 input.info:focus{color:red}
规则,选择器 input.info:focus
将选择有焦点的,并且使用了 info
类的 input
元素。
示例
下面的代码实现这样的效果:鼠标切换点击两个文本框显示不同的背景色。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> input.fs1:focus{background:yellow} input.fs2:focus{background:lime} </style> </head> <body> <p><input class="fs1" value="点我" type="text"/></p> <p><input class="fs2" value="点我吧" type="text"/></p> </body> </html> |
效果
请切换点击下方两个文本框
6.6 使能状态选择器 (:enabled)
能够和用户交互的界面元素,如按钮、文本框等,一般有两种状态:使能状态、禁用状态。处于使能状态的界面元素能够与用户交互。处于禁用状态的界面元素无法与用户交互。 CSS 可以利用界面元素是否处于使能状态这个特征来选择元素。
语法
:enabled
说明
使能状态选择器的选择目标是这样的 HTML 元素:这些元素处于可以和用户交互的可用状态。
比如 input:enabled{color:red}
规则,选择器 input:enabled
将选择处于使能状态的 input
元素。
示例
下面的代码实现这样的效果:使能状态的文本框显示黄色底纹,禁用状态的文本框显示虚线边框。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> input:enabled{background:yellow} input:disabled{border:dotted} </style> </head> <body> <p><input type="text" value="我是正常的" /></p> <p><input type="text" value="我被禁用了" disabled /></p> </body> </html> |
效果
6.7 禁用状态选择器 (:disabled)
与使能状态选择器相反,禁用状态选择器是用于选择处于禁用状态的元素。
语法
:disabled
说明
禁用状态选择器的选择目标是这样的 HTML 元素:这些元素处于无法和用户交互的禁用状态。
比如 input:disabled{color:red}
规则,选择器 input:disabled
将选择处于禁用状态的 input
元素。
示例
请参见使能状态选择器示例。
6.8 只读选择器 (:read-only)
input
、textarea
等编辑元素可以控制用户对文本的编辑权限。如果是只读权限,用户能看见文本,但无法编辑。如果是可读可写权限,则用户既能看见文本也能编辑文本。 CSS 可以利用元素的读写状态特征来选择元素。
语法
:read-only
说明
只读选择器的选择目标是这样的 HTML 元素:这些元素处于只读状态。
比如 input:read-only{color:red}
规则,选择器 input:read-only
将选择处于只读状态的 input
元素。
示例
下面的代码实现这样的效果:只读的文本框显示翠绿色底纹,可读可写的文本框显示蓝色文字。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> input:read-only{background:lime} input:read-write{color:blue} </style> </head> <body> <p><input type="text" value="我是只读的" readonly /></p> <p><input type="text" value="我是可读可写的" /></p> </body> </html> |
6.9 可读可写选择器 (:read-write)
与只读选择器相反,可读可写选择器用于选择处于可读可写状态的元素。
语法
:read-write
说明
可读可写选择器的选择目标是这样的 HTML 元素:这些元素处于可读可写状态。
比如 input.info:read-write{color:red}
规则,选择器 input.info:read-write
将选择使用了 info
类,并且处于可读可写状态的 input
元素。
示例
请参见只读选择器示例。
6.10 提示信息选择器 (:placeholder-shown)
input
元素有时会显示提示信息。 CSS 可以利用这个特征来选择 input
元素。
语法
:placeholder-shown
说明
提示信息选择器的选择目标是这样的 HTML 元素:这些元素的类型是 input
,同时这些元素设置了 placeholder
属性。
示例
下面的代码实现这样的效果:将设置了 placeholder
属性的 input
输入框的边框设置为虚线。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> input:placeholder-shown {border: dotted;} </style> </head> <body> <p><input type="text" placeholder="我是提示信息" /></p> <p><input type="text" value="我是默认值" /></p> </body> </html> |
效果
在两个文本框中输入内容,体验文本输入框提示信息和默认值的差异
6.11 长子选择器 (:first-child)
长子选择器可以帮助我们选择一个元素的第一个孩子元素。
语法
:first-child
说明
长子选择器的选择目标是这样的 HTML 元素:该元素有一个父亲元素,并且它是这个父亲元素的第一个孩子。
比如 li:first-child{color:red}
规则,选择器 li:first-child
将选择处于长子位置的 li
元素。
示例
下例中 one
将显示为红色,因为它是 div
元素的第一个孩子。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p:first-child{color: red} </style> </head> <body> <div> <p>one</p> <p>two</p> <p>three</p> </div> </body> </html> |
效果
one
two
three
6.12 幺子选择器 (:last-child)
幺子选择器可以帮助我们选择一个元素的最后一个孩子元素。
语法
:last-child
说明
幺子选择器的选择目标是这样的 HTML 元素:该元素有一个父亲元素,并且它是这个父亲元素的最后一个孩子。
比如 li:last-child{color:red}
规则,选择器 li:last-child
将选择处于幺子位置的所有 li
元素。
示例
下例中 three
将显示为红色,因为它是 div
元素的最后一个孩子。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p:last-child{color: red} </style> </head> <body> <div> <p>one</p> <p>two</p> <p>three</p> </div> </body> </html> |
效果
one
two
three
6.13 独子选择器 (:only-child)
独子选择器可以帮助我们选择有父亲元素但没有兄弟元素的 HTML 元素。
语法
:only-child
说明
独子选择器的选择目标是这样的 HTML 元素:该元素有父亲元素但没有兄弟元素。
比如 li:only-child{color:red}
规则,选择器 li:only-child
将选择没有兄弟元素的 li
元素。
示例
下例中 four
将显示为红色,因为它所在的 p
元素没有兄弟。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p:only-child{color: red} </style> </head> <body> <div> <p>one</p> <p>two</p> <p>three</p> </div> <div> <p>four</p> </div> </body> </html> |
效果
one
two
three
four
7. 伪元素选择器
我们打开网页时,有些元素是 HTML 文档中有的,有些元素是逻辑上存在但没有对应的 HTML 元素,比如文本的首行、文本的首字母等。为表达这些元素,并对它们进行选择, CSS 引入了伪元素 (pseudo-element) 的概念,并由此产生了伪元素选择器。
伪元素选择器以 ::
开始。
7.1 首行选择器 (::first-line)
一段文字在屏幕上显示的时候,首行不是固定不变的。当字体变化时、显示区域大小变化时(如缩放浏览器)、屏幕大小变化时(如电脑屏幕和手机屏幕),第一行显示的内容都会不一样。怎么描述这个第一行呢? CSS 将这个逻辑上的首行称为首行伪元素,并由此有了首行选择器。
语法
::first-line
说明
选择一段文字在屏幕上显示的第一行。
比如 p::firsr-line{color:red}
规则,选择器 p::first-line
选择 p
元素在屏幕上的第一行。
示例
给首行文字加上黄色底纹。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p::first-line{background: yellow;} </style> </head> <body> <p>船尾一个女子持桨荡舟,长发披肩,全身白衣,头发上束了条金色细带,白雪映照下灿然生光。郭靖见这少女一身装束犹如仙女一般,不禁看得呆了。那船慢慢荡近,只见那女子方当韶龄,不过十五六岁年纪,肌肤胜雪,娇美无比,笑面迎人,容色绝丽。</p> </body> </html> |
效果
缩放浏览器观察首行的变化
船尾一个女子持桨荡舟,长发披肩,全身白衣,头发上束了条金色细带,白雪映照下灿然生光。郭靖见这少女一身装束犹如仙女一般,不禁看得呆了。那船慢慢荡近,只见那女子方当韶龄,不过十五六岁年纪,肌肤胜雪,娇美无比,笑面迎人,容色绝丽。
7.2 首字母选择器 (::first-letter)
在文字排版时经常会用到下坠大写字母 (drop caps) 和首字大写字母 (initial caps) 排版方式,这都是针对文本的第一个字母进行操作的。首字母选择器用于选择首字母。
语法
::first-letter
说明
选择一段文字的第一个字母。
比如 p::firsr-letter{color:red}
规则,选择器 p::first-letter
选择 <p>
元素文本的第一个字母。
示例
将文本的第一个字母以下坠大写字母方式显示。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p::first-letter{color:#e91e63;float:left;font-size:70px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px} </style> </head> <body> <p>船尾一个女子持桨荡舟,长发披肩,全身白衣,头发上束了条金色细带,白雪映照下灿然生光。郭靖见这少女一身装束犹如仙女一般,不禁看得呆了。那船慢慢荡近,只见那女子方当韶龄,不过十五六岁年纪,肌肤胜雪,娇美无比,笑面迎人,容色绝丽。郭靖只觉耀眼生花,不敢再看,转开了头,缓缓退开几步。 </p> </body> </html> |
效果
船尾一个女子持桨荡舟,长发披肩,全身白衣,头发上束了条金色细带,白雪映照下灿然生光。郭靖见这少女一身装束犹如仙女一般,不禁看得呆了。那船慢慢荡近,只见那女子方当韶龄,不过十五六岁年纪,肌肤胜雪,娇美无比,笑面迎人,容色绝丽。郭靖只觉耀眼生花,不敢再看,转开了头,缓缓退开几步。
7.3 内容之前选择器 (::before)
有时我们需要在元素的内容之前插入附加内容,因此需要一种方式来选择内容之前这个伪元素。
语法
::before
说明
用于选择一个元素的内容之前,要插入的内容放在元素的 content
属性中。
比如 p::before{content: “注意:”}
规则,选择器 p::before
将在 p
元素文本之前插入 注意:
。
示例
在文本前插入红色的唐僧:
。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p::before{content:"唐僧:";color:red} </style> </head> <body> <p>小心了,打雷啰,下雨收衣服了。</p> </body> </html> |
效果
小心了,打雷啰,下雨收衣服了。
7.4 内容之后选择器 (::after)
有时我们需要在元素的内容之后插入附加内容,因此需要一种方式来选择内容之后这个伪元素。
语法
::after
说明
选择一个元素的内容之后,要插入的内容放在元素的 content
属性中。
如在 p::after{content: “great”}
规则中,选择器 p::after
将在 p
元素文本之后插入 great
。
示例
在文本后插入红色的《射雕英雄传》
。
HTML + CSS
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset="utf-8"/> <style type="text/css"> p::after{content:"《射雕英雄传》";color:red} </style> </head> <body> <p>那船慢慢荡近,只见那女子方当韶龄…</p> </body> </html> |
效果
那船慢慢荡近,只见那女子方当韶龄…
💯本站文章同步发表在官方公众号 ReadingHere,关注公众号您将在第一时间了解本站最新文章和资讯。
❤️欢迎您关注本站官方公众号 ReadingHere。
本文由 ReadingHere 原创,未经 ReadingHere 授权不得转载、摘编。已经授权使用的,应在授权范围内使用,并注明来源: www.readinghere.com。违反上述声明者,ReadingHere 将追究其相关法律责任。