剧烈引荐：十分不错的样式表CSS教程(2)
日期：2013-09-10 浏览次数：21229 次
元素的属性(Attribute)也可以用于selector。下面的列表中例举了几种模式：
| Attribute Selector Patterns | |||||
|---|---|---|---|---|---|
模式 | 说明 | ||||
| E[attr] | Attribute selector属性选择器、婚配任何含有该属性的E元素，不必考虑它的值的大小 | ||||
| E[attr="value"] | Attribute selector,属性选择器、婚配任何具有该属性的元素E，条件是属性的值必须与设定的值相等。 | ||||
| E[attr~="value"] | Attribute selector属性选择器、有些元素属性当中可能包含若干个值(通过空格分隔开)。这种模式婚配任何具备属性attr，同时包含特定值(值可能是列表方式)的元素E | ||||
| E.value | Class selector, “类”选择器、仅对HTML无效。婚配任何设置了CLASS类属性的元素E,与 E[ class ~ = " value "]等效. | ||||
| E#value | ID selectorID选择器、相配任何设置了ID属性的元素E.对于HTML等价于 | ||||
上面这些selector设置模式可以灵活地使用到标记的款式规则当中，例如：
*.highlight { background-color: #ffff00 }*#mainTitle { font-size: 150%; font-weight: bold; }*.highlight婚配设置 class ="highlight" 的“任何”元素。第二个规则婚配了 id ="mainTitle"的任何元素。多数情况下星号“*”可以被省略，就象下面这样。
.highlight { background-color: #ffff00 }#mainTitle { font-size: 150%; font-weight: bold; }类"CLASS"和"ID"哪种方式愈加实用好用呢？通过上面的两个例子，我们来探讨一个非常风趣的问题：“CLASS VS ID” 类和ID的对决
●Class vs ID
HTML标记的ID属性为标记设定了独一的标识符，而类属性是允许用户为HTML元素设置款式的一种方式。
严厉来讲、在同一个文档（网页）内，没有两个元素具有相反的ID。无论何时，只需为标记设置ID，就必须保证ID的值不能和其它元素的ID冲突，哪怕他们拥有不同的标记名称也不行。所以，如果用ID设置款式，每一个ID只能使用于页面当中的一个元素。(一对一关系)
为什么不使用内联款式(inline style)代替ID selector呢？在实际使用当中，你会发现：将所有款式定义在一同要比那些遍及于文档当中的内联款式要方便的多。如果是外联款式表，它还可以被其它文档共享使用。
类(class)选择器可以婚配页面当中的若干元素(一对多关系)，即便元素使用不同的标记名称也可以。同一标记可以使用若干个“类”(class)来定义款式（指定一列使用空格分隔的类class的名称)。例如:
h3.warning { color: red }.highlight { background-color: yellow }...<h3 class="warning highlight">Danger</h3><h4 class="warning highlight">Proceed with Caution</h4>H3标记的内容显示红色，背景色为黄色。H4标记的背景色为黄色,但是内容不会显示为红色，。
●Pseudo-classes 和 Pseudo-elements 伪类和伪元素
最后一种selectors模式为“伪类别”和“伪元素”，它能够设置特殊条件下某些元素或者某些元素所包含内容的款式
| Pseudo-class and Pseudo-element Selectors | |||
|---|---|---|---|
| 模式 | 说明 | ||
| E:first-child | Pseudo-class, 伪类，婚配元素E，条件是E是第一个其父标识的子标识。与* > E类似，但是仅仅婚配一元素的第一个子标记。 | ||
| E:first-letter E:first-line | Pseudo-elements, 伪元素，作用与E元素包含的内容中第一个字符或首行(留意不是全部内容) | ||
| E:before E:after | |||
