目录

可以从多个维度描述 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>

效果

  1. one
  2. two
  3. three
  4. four
  5. 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>

效果

以下两个链接仅为展示效果，无须点击

here.html

here.htm

返回顶部

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 引入了伪类选择器的概念。

伪类选择器以 : 开头。

未访问选择器是针对具有 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将追究其相关法律责任。

交流合作

如需交流咨询或商务合作请扫描下图微信二维码联系。