css选择器详解

‣ 下面有关css选择器的说法错误的是？（C）
A. .intro 选择 class=”intro” 的所有元素。
B. #firstname 选择 id=”firstname” 的所有元素。
C. div>p 选择所有 < div > 元素和所有 < p> 元素
D. p 选择所有 < p> 元素

• css类型选择器

下面的规则匹配文档树中所有 h1 元素：

h1 {font-family: sans-serif;}

• 选择器分组
  假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

• 通配符选择器
  例如，下面的规则可以使文档中的每个元素都为红色：

 * {color:red;}

• 类选择器

.important {color:red;}

class为important的元素涂红色。

• 多类选择器

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

这里如果一个元素的class既包含important又包含warning则文字背景颜色为银色。

• id选择器

#intro {font-weight:bold;}

id为intro的元素文字加粗。

• 属性选择器
  如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
  如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

拥有title属性的元素文字颜色是red，不表明title属性的元素不满足条件。

• 后代选择器
  举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

- 子元素选择器**
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

子元素选择器与后代选择器的区别是子元素选择器只对儿子起作用，不对孙子及以后代起作用。即只对往后一级有用。

• 相邻兄弟选择器
  如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
  例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

• 伪类选择器

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

• first-child伪类选择器

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

给定一段css代码：

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

1.意义是p元素作为第一个元素的那个p元素加粗。
看上段html代码，第二行p元素作为div元素里的第一个元素，所以p元素加粗。
第五行strong（也算p元素）作为li元素里面的第一个元素，所以也加粗。
2.意义是li元素作为第一个元素的那个li元素文字全部变成大写。
第四行的li元素是ul元素下的第一个元素，因此显示上全部加粗。