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

常用的CSS选择器(二)

CSS选择器(二)

4. 属性名、属性值选择符

所用示例代码：

<img src="" title="yellow flower" alt="yellow flower" />
<img src="" title="blue flower" alt="blue flower" />

1 . 属性名选择符
用法：标签[属性名] { 声明 }
例如：

img[title] {border:3px solid yellow;}

2 . 属性值选择符
用法： 标签[属性名=”属性值”] {声明}
例如：

img[title="red flower"] {border:3px solid blue;}

---

5. 伪类

伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。

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

(一) UI伪类

1. 链接伪类

• :link 链接的默认状态
• :visited 用户点击过链接后的状态
• :hover 用户鼠标悬停在链接上的状态
• :active 链接正在被点击（鼠标还未释放）

如果不按上述顺序使用(不用四个全部使用)，浏览器可能不会显示预期的效果。
hover可以用于任何元素

2. : focus 伪类

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。

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

上面的例子会在光标位于 input 字段中时，为该字段添加一个红色边框。

3. : target 伪类

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

例如

<a href="#more_info">More Information</a> 
<h2 id="more_info">This is the information you are looking for.</h2>

使用 : target之后

#more_info:target{background:#eee;}

则用户点击链接后，h2的背景颜色将会变灰。

（二）结构化伪类

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

• : first-child 代表一组同胞元素中的第一个元素
• : last-child 代表一组同胞元素中的最后一个元素
• : nth-child(n) n 表示一个数值(可用odd或even)，假如:nth-child(3)，表示选中一组同胞元素中的第三个元素

例如：

<style type="text/css">
		.results li:first-child{color: blue}
		.results li:last-child{color: red}
		.results li:nth-child(2){color: yellow}
</style>
<ol class="results">
		<li>My Fast Pony</li>     
		<li>Steady Trotter</li>     
		<li>Slow Ol' Nag</li> 
</ol>

tips：

• 一个冒号（:）表示伪类，两个冒号（::）表示 CSS3新增的伪元素。
• 要习惯用双冒号代替单冒号，因为这些单冒号的伪元素终可能都会被淘汰掉。

（三）伪元素

常用伪元素

• :: first-letter

  可以选中段落首字符，可以用来创建首字符放大效果如：
  p::first-letter{font-size:300%}
  

• ::first-line

  可以选中段落首行如：
  p::first-line{font-variant:small-caps}
  

• ::before和::after

  可以在特定元素前面或后面添加特殊内容，例如：
  

  <style type="text/css">
  		p.age::before{content: "Age"}
  		p.age::after{content: "years."}
  </style>
  <p class="age">25</p>

---

6. 继承

在CSS中，祖先元素会向后代元素传递其CSS属性的值，这叫做CSS的继承。

比如我们为body写一条规则：

body { font-family:helvetica, arial, sans-serif;}

那么文档中的所有元素，无论层次结构多么靠下，都将继承body的样式。

继承的给我们带来的效率是显而易见的。假如我们需要把网站的主字体或某个区域的主字体设置为微软雅黑，那么我们只需要在某个上层元素上指定font-family，而无须在每一个标签上都指定一次。
不过继承需要注意的几点：

• CSS很多属性（如文本颜色、字体、字号等）是可以继承的，也有很多属性是不能继承的，如涉及元素盒子的定位和显示方式，比如边框，内边距等，因为继承这些属性没有意义。

• 在使用相对字体单位时要小心，加入某个标签字体大小被设置为 80% ，他的后代字体大小也设置为 80% ，那么该后代的字体大小将会变成 64% ，即 80% 的 80% 。

---

7. 层叠

层叠，就是层叠样式表中的层叠， 是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性 值的多个来源，确定终使用哪个值。

样式来源

一个网页的样式有多出来源，总的来说分为三种

• 浏览器的默认样式表
  浏览器自带的一些样式，比如h1的粗体，em的斜体，列表的项目符号和编号

• 用户样式表
  用户(浏览网页的人)可以提供样式表，并不多见

• 网页设计师（自己）的样式表
  即自己写的样式表，应用方式有 链接样式、嵌入样式、行内样式。

有这么多种样式来源，浏览器如何选择按照那种样式表渲染网页呢？答案是，浏览器会按照下述顺序依次检查每个来源的样式。

• 浏览器默认样式表
• 用户样式表
• 链接式样式表
• 嵌入式样式
• 行内式样式

举例个例子，假如链接样式表将 p 的字体设定为 Helvetica ，而页面中有一条嵌入样式将 p 的字体设定为微软雅黑，那么 p 最终会以微软雅黑字体显示。

可以理解为样式来源的优先级为 行内 > 嵌入 > 链接 > 用户 > 浏览器

层叠规则

层叠规则一：按照顺序和权重排序

浏览器一次检查 5 个样式来源，并设定匹配属性，如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。
声明也可以有权重。

p {color:green !important; font-size:12pt; }

!important; 用于加重声明的权重，不过比较一般少用，甚至不用。
上述代码的意思是，最终的颜色值还是绿色，其他来源一概不考虑，相当于一种特权。

层叠规则二：按特指度排序

什么是特指度?
特指度的意思是表示一条规则有多明确，例如：

p { font-size: 12px; } 
p.largetext { font-size:16px; }
<p class="largetext">A bit of text</p>

结果 p 将会应用第二条规则，即显示 16px 的文本。因为第二条规则的选择符既有标签名又有类名，所以更加明确（特指度更高），因此第二条规则会覆盖第一条规则中的同名属性。

如何计算特指度？

采用 I - C- E (I指ID，C指class，E指Element) 计算规则。

1. 选择符中有一个 ID，就在 I的位置上加 1
2. 选择符中有一个类，就在 C的位置上加 1
3. 选择符中有一个元素（标签）名，就在 E的位置上加 1
4. 得到一个三位数

例如：

p			0-0-1 特指度=1
p.largetext 		0-1-1 特指度=11     
p#largetext 		1-0-1 特指度=101
body p#largetext 		1-0-2 特指度=102
body p#largetext ul.mylist 	1-1-3 特指度=113
body p#largetext ul.mylist li 	1-1-4 特指度=114

层叠规则三：顺序决定权重。

如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置靠下（或后声明）的规则胜出

简单版

---

8. 规则声明

(待整理)

---