CSS设计指南：CSS选择器(一)

常用的css选择器(一)

CSS选择器(一)

1.1、上下文选择器

上下文选择器的声明格式如下：

标签1 标签2 { 声明 }

一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。

例如：

article p { font-weight:bold; }

表示只有 article后代的所有p元素 才会应用此样式

又如：

article h1 p { color:green; }

表示选中的p必须有一个祖先是h1，h1还要有个祖先是article

---

1.2、特殊的上下文选择器

所用示例代码：

<section>
	<h2>An H2 Heading</h2>
	<p>This is paragraph 1</p>
	<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
	<a href="#">Link</a>
</section>

上述代码的显示效果如下：

子选择符 >

用法：标签1 > 标签2 { 声明 }

下面我们给示例代码用子选择符添加样式

section > h2 { font-style:italic; }

标签2必须是标签1的子元素，与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

紧邻同胞选择符 +

用法：标签1 + 标签2 { 声明 }
例如：

h2 + p {font-weight:bold;}

标签2必须紧邻标签1，否则不会被选择到，比如，如果将p元素换成a元素，由于a元素没有紧邻p元素，所以a元素不会被选择到。

一般同胞选择符 ~

用法：标签1 ~ 标签2 { 声明 }

例如：

h2 ~ a {font-weight:italic;}

可以看到h2的同胞元素a被选中，而p元素中的a元素却没有被选择到，也就是说一般同胞选择符只能选择到同胞元素，并且是在标签1之后的元素，两个元素之间不一定要紧邻，这也是和紧邻同胞选择符的一个区别之一

通用选择符 *

用法：

* {color:green}

这样会导致所有元素的文字和边框颜色变成绿色，一般在使用时都会同时使用另一个选择符

比如:

p * {color:green}

这样就会把p包含的所有元素的文本(不包括p本身的文本！)成绿色。
还可以用它来构成非子选择符
例如:

section * a {font-weight:bold;}

可以看到并没有选中section的子元素a，而是选中了section的孙子元素a。也就是说，任何section的孙子元素，而非子元素a都会被选中，与a的父元素没有关系。

---

2.1、类选择器

所用示例代码：可以看到已经为h1和p标签添加了specialtext类

<h1 class="specialtext">This is a heading with the <span>same class</span>as the second paragraph.</h1>
<p>This tag has no class.</p>
<p class="specialtext"> When a tag has a class attribute, you can target it <span>regardless</span> of its position in the hierarchy.</p>

效果如下：

2.2、类选择符

用法：.类名 {声明}

例如:

.specialtext { font-style:italic; }

可以看到包含有specialtext类的标签全部被选中，且span元素由于我们没有为其添加样式，所以就继承了父元素的样式

2.3、标签带类选择符

假如只想让带有specialtext的p元素被选中，可以使用p.specialtext
例如:

p.sepcialtext { font-style:italic; }

可以看到带有specialtext的p标签被选中

2.4、多类选择符

• 可以给一个元素添加多个类，比如

<p class="specialtext featured"></p>

• 要选择同时存在这两个类名的元素，可以这样写

.specialtext.featured {font-size:120%;}

注意：两个类名之间是没有空格的，若加了空格则变成了“祖先 后代”的上下文选择符

---

3.1、ID选择器

如果有一个段落像下面这样设定了 ID属性

<p id="specialtext">This is the special text.</p>

那么，相应的 ID选择符就是这样的：

#specialtext {CSS 样式声明}

或者这样的：

p#specialtext {CSS 样式声明}

除此之外，ID与类的用法都一样，而且我们前面的关于类选择符的（几乎）一切，都适应于 ID选择符。

3.2、类选择器与ID选择器的区别

• ID选择器可用于页面导航

<a href="#bio">Biography</a>
<h3 id="bio">Biography</h3>

单击链接时，页面会向下滚动到 id 值为 bio 的 h3 元素的位置，如果链接的 href 属性里只有一个#，那么点击该链接会返回页面顶部。
若暂时不知道 href 应该放什么 URL，可以用 # 作为占位符，但不能留空。因为 href 属性值为空的链接的行为跟正常链接不一样。这样团队中的其他人将来可 以用中间层（比如 PHP）变量替换 # ，以便动态接收来自数据库的 URL 。

• 什么时候用ID？

ID 是唯一的，同一个页面中每个 ID 只能用一次。
一般给页面中的每个顶级区域都添加一个 ID，这样就能得到非常明确的上下文。

• 什么时候用类？

类的目的是为了标识一组具有相同特征的元素。

在下面这个孩子名字的列表中，我想把男孩的名字变成蓝色，把女孩的名字变成粉 红色。首先，我用类在标记中标识出了性别

<nav>     
	<ul>         
		<li class="boy"><a href="#">Alan</a></li>         
		<li class="boy"><a href="#">Andrew</a></li>
		<li class="girl"><a href="#">Angela</a></li>
		<li class="boy"><a href="#">Angus</a></li>
		<li class="girl"><a href="#">Anne</a></li> 
		<li class="girl"><a href="#">Annette</a></li>     
	</ul> 
</nav>

然后，再用 CSS为链接应用颜色：

.boy a {color:#6CF;}/*蓝色*/ 
.girl a {color:#F9C;}/*粉红色*/

• 不要乱用类

不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则，这样你可能会给每个标签都重复写同样的样式。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的 CSS 量。

---