强烈推荐：非常不错的样式表CSS教程(2)

元素的属性(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等价于 E [ id = " value "]

上面这些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	Pseudo-elements, 伪元素，可作用于元素E的内容之前/之后嵌入的内容
E:link E:visited	Link pseudo-classes,链接伪类，应用于不同状态的超链接 (未访问:link、已访问:visited)
E:active E:hover E:focus	Dynamic pseudo-classes, 动态伪类，应用于超链接或表单元素相应用户响应时的样式(激活:active、鼠标悬停:hover、 输入焦点:focus)

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有