CSS选择符

本文为《CSS 设计指南（第 3 版）》阅读笔记

同时选中多个

a,
p {
  color: red;
}

1 2	<a> I am red. </a> <p> I am red too. </p>

后代组合式选择符(Descendant combinator selector)

tag1 tag2 中, tag2 可以是 tag1 的任意后代,不需要是直接第二代.

1
2
3

article p {
  font-weight: bold;
}

<body>
    <article>
        <a> Hello </p>
        <div>
            <p> Foo Bar </p>
        </div>
    </article>
</body>

子选择符 >

tag1 > tag2 中, tag1 必须是 tag2 的父元素,不能说祖父元素或更高的.

1
2
3

section > h2 {
  font-style: italic;
}

紧邻同胞选择符 +

tag1 + tag2 tag2 必须紧跟在 tag1 后面

1
2
3

h2 + p {
  font-variant: small-caps;
}

<!-- 只有第一个p样式改变 -->
<h2>Hello</h2>
<p>World</p>
<p>Tom</p>

一般同胞选择符 ~

tag1 ~ tag2 中,tag2 必须跟(不一定紧跟)在 tag1 后面;

1
2
3

h2 ~ a {
  color: red;
}

<!-- Both a will be red -->
<h2>Hello</h2>
<a>World</a>
<a>Tom</a>

通用选择符 *

匹配任何元素

// 将会导致所有元素的文本和边框都变成绿色
* {
  color: green;
}

用来匹配 tag 底下的所有元素:

// 将p包含的所有元素的文本变成红色
p * {
  color: red;
}

用来构成 非子选择符 :

1
2
3

section * a {
  font-size: 1.3em;
}

<section>
    <a>I am not change.</a>
    <div>
        <a>I was changed.</a>
    </div>
</section>

ID 和类选择符

id 和 class 不能以数字或特殊符号开头 .

.text-one {
  color: red;
}

// 标签带类选择符
p.text-two {
  color: green;
}

<a class='text-one'>
    I'm red.
</a>
<p>
    <a class="text-two"> I'm green. </a>
</p>
<a class="text-two"> I'm not green. </a>

多类选择符

1
2
3

.text-a.text-b {
  font-size: 120%;
}

1	<p class="text-a text-b">Hello</p>

ID 属性

#text-a,
p#text-a {
  color: red;
}

1 2	<a id="text-a"> I am red. </a> <p id="text-a"> I am red too. </p>

属性选择符

属性名选择符

1
2
3

img[title] {
  border: 2px solid blue;
}

1 2	<!-- Note: alt will show when image not load. title will tips when hover --> <img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />

属性值选择符

1
2
3

img[title="red flower"] {
  border: 4px solid green;
}

伪类

UI 伪类
- 会在 HTML 元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用 CSS 样式。
结构化伪类
- 会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用 CSS 样式。

UI 伪类

链接伪类

状态:

Link - 此时，链接就在那儿等着用户点击。
Visited - 用户此前点击过这个链接。
Hover - 鼠标指针正悬停在链接上。
Active - 链接正在被点击（鼠标在元素上按下，还没有释放）。伪类选择符:
a:link { color:black; }
a:visited { color: gray; }
a:hover { text-decoration:none }
a:active { color:red };

:focus 伪类

e:focus => e 表示任何元素,比如 p, h1, section 等

1
2
3

input:focus {
  border: 1px solid blue;
}

会在光标位于 input 字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

:target 伪类

e:target
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target 伪类选中它。对于下面这个链接

1	<a href="#more_info">More Information</a>

位于页面其他地方、ID 为 more_info 的那个元素就是目标。该元素可能是这样的:

1	<h2 id="more_info">This is the information you are looking for.</h2>

那么，如下 CSS 规则

1
2
3

#more_info:target {
  background: #eee;
}

会在用户单击链接转向 ID 为 more_info 的元素时，为该元素添加浅灰色背景。

维基百科的例子:

图片.png | left | 656x331

结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。

:first-child 和 :last-child

e:first-child 代表一组同胞元素中的第一个元素，而 :last-child 则代表最后一个。比如，把下面的规则:

1
2
3

ol.results li:first-child {
  color: blue;
}

应用给以下标记:

<ol class="results">
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
</ol>

文本 “My Fast Pony” 就会变成蓝色。如果选择符改成这样：

1
2
3

ol.results li:last-child {
  color: red;
}

那变成红色的文本就是 “Slow Ol' Nag” 了。

:nth-child

e 表示元素名，n 表示一个数值（也可以使用 odd 或 even）。

1	li: nth-child(3);

会选择一组列表项中的每个第三项。(第一个子元素的下标是 1)

伪元素

::first-letter 伪元素

1
2
3

p::first-letter {
  font-size: 300%;
}

1
2
3

<p>
    Hello World!
</p>

如果不用伪元素创建这个首字符放大效果，必须手工给该字母加上 <span> 标签，然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。

::first-line 伪元素

1
2
3

p::first-line {
  color: red;
}

<p>
    Hello! I should be red.
    <br/>Hello World!
</p>

::before 和::after 伪元素

p.age::before {
  content: "Age: ";
}

p.age::after {
  content: "years";
}

图片.png | center | 222x69

Note: 搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。

::selection 伪元素

::selection {
  color: red;
  background: yellow;
}

图片.png | center | 237x221