|
元素的属性(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)
first-letter和first-line selectors之所以称之为伪类是因为它们不是作用于整个元素内容而只是内容的一部分
链接伪类应该是比较熟悉的，它们与以前用于BODY标记的 LINK ="color" 和 VLINK ="color" 属性类似，同样地、动态伪类 :active 相当于以前BODY标记的 ALINK = "color"。这样使用的目的是使用户在视觉上能够区分链接不同状态下的颜色，已经被CSS所采用。
为链接定义任何 :hover 规则时需要注意 :hover 的位置要写在 :visited 规则之后，目的是使链接被访问之后鼠标悬停在超链接上面时产生效果(如果顺序掉过来，先写 :hover 后写 :visited ,就不会有悬停效果了)，原因是样式排列有优先顺序关系。
另一个动态伪类 :focus 可以应用于用户使用表单输入时的样式效果
●Language Selectors
Language选择器
不能不介绍的还有Language Selectors，E[lang|="cc"] 和 E:lang(cc) 对于显示外国文字和标点符号是很有用的，可以查阅有关的资料。
●Chaining Selectors
联合Selectors
实际应用当中，有些CSS样式规则的Selectors可能是由多种基本模式组合而成，这样的规则使用时更加精确，例如： div p a.definition { color: green }div p a.definition:hover { color: red }
此规则应用于超链接，条件是该链接的类class为" definition "，同时超链接包含于P标记内，而P标记又包含于DIV标记内，用户未访问时超链接为绿色，鼠标悬停时为红色。
 |
频道声明：本频道的文章除部分特别声明禁止转载的专稿外，可以自由转载.但请务必注明出出处和原始作者 文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。
| 原始作者:佚名 |
录入时间:2007-6-20 17:11:48 |
| 信息来源:不详 |
投稿信箱:itqoo@126.com |
|
|
 |
|
用户登录 
新用户注册 
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！） 