CSS的选择符

最新推荐文章于 2025-06-05 09:26:06 发布

原创最新推荐文章于 2025-06-05 09:26:06 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #input #div #firefox #button

WEB 专栏收录该内容

9 篇文章

订阅专栏

1.通配选择符(Universal Selector)

通配选择符(以*表示)起通配符的作用,意思是将选择其辖域内的所有元素

示例:

改变整个文档的字体大小和颜色

* {font-size:12px;color:blue;}

改变table下所有元素的颜色及对齐方式

table * {color:red;text-align:center}

2.类型选择符(Type Selectors)

以文档语言对象(Element)类型作为选择符

示例:

设置td背景色与字体颜色

td {background:sliver;color:red}

设置a标签无下划线等装饰效果

a {text-decoration:none}

3.属性选择符(Attribute Selectors)

这个属性用的不是很多，原因是在IE6下都还不能支持，不过在FireFox下可以支持。

它有4种表达形式:

1.Element[att] {sRules} 　选择具有att属性的Element元素

示例:

用input插入的任何元素，只要指定了name值，其值为红色

2.Element[att=value] {sRules} 　选择具有att属性,且属性值等于value的元素

示例:

3.Element[att~=value] {sRules} 　选择具有att属性，且属性值为用空格分割的字词列表，其中一个等于value的元素

示例:

下面的例子，只有第一个用空格分开的"关羽",才能被匹配到

4.Element[att|=value] {sRules} 　选择具有att属性且属性值为一用连字符分隔的字词列表,由value开始的元素

示例:

下面的例子，只有第一个有连字符"-"的"赵云",才能被匹配到

4.包含选择符(Descendant Selectors)

选择所有被Element1包含的子元素

Element1 Element2 {sRules}

示例:

设置table下所有td的颜色与对齐方式

table td {color:red;text-align:center}

设置p元素内的strong元素的颜色

p strong {color:blue}

5.子对象选择符(Child Selectors)

这个属性在IE6下也支持不了，它和包含选择符非常相似，但区别在于：在多层包含关系中，它只能包含一级；而包含选择符能包含多级。

Element1>Element2 {sRules}

示例:

假如有这样一个结构的包含关系:

<div>

<p>

<strong>生子当如孙仲谋</strong>

</p>

</div>

那么再看下面的定义，我们设定如果文字颜色变为红色为匹配生效:

div p {color:red}　

div strong {color:red}　

div>strong {color:red}　

p>strong {color:red}

6.ID选择符(ID Selectors)

以文档目录树(DOM)中作为对象的唯一标示符ID作为选择符

#ID {sRules}

示例:

7.类选择符(Class Selectors)

以类名作为选择符，其效果等同于属性选择符的Element[class~="className"] {sRules}

Element.className {sRules}

示例:

8.分组选择符(Grouping)

将同样的定义应用于多个选择符,可以将选择符以逗号分割的方式并为组

Element1,Element2,Element3 {sRules}

示例:

9.伪类及伪对象选择符(Pseudo Selectors)

伪类主要是争对a的几个状态:

a:link、a:visited、a:hover、a:active

其实也有诸如span:hover{color:red}这样的用法，但IE下不支持非a元素的伪类

伪对象一共有4个:

:first-letter、:first-line、:before、:after

示例:

运行示例，在IE和FireFox下都能显示出效果

示例:

运行示例，IE不能显示出效果，在FireFox下可以。