css选择符(selector)实例详解

发布时间:2019-12-12编辑:脚本学堂
本文介绍了,css选择符的详细内容,css选择符(selector)是一种模式,类似于正则表达式。有需要的朋友,可以参考学习下。

css选择符(selector)是一种模式,类似于正则表达式,是用来匹配html或者xml文档中各种元素的css规则的一部分,紧跟在选择符后{}括号内的声明代码将会应用到所有能匹配这个模式的元素,除非它被cascade的规则覆盖了。

css选择符可以分为以下几种。

全局选择符(universal selector)

格式如下:
 

* {
declaration block
}

全局选择符可以匹配任何的html元素,不过它有一个规则就是:不匹配零个或者同时多个元素,举个例子,以下的全局选择符
div * em

对以下的html代码进行匹配
 

复制代码 代码示例:
<body>
<div>
<h1>The <em>Universal</em> Selector</h1>
 <p>We must <em>emphasize</em> the following:</p>
<ul>
<li>It's <em>not</em> a wildcard.</li>
<li>It matches elements regardless of <em>type</em>.</li>
</ul>
This is an <em>immediate</em> child of the division.
</div>
</body>

将会是以下的结果:
 

“Universal” in the h1 元素 (* 匹配 the <h1>)
“emphasize” in the p 元素 (* 匹配 the <p>)
“not” in the first li 元素 (* 匹配 the <ul> 或者 the <li>)
“type” in the second li 元素 (* 匹配 the <ul> 或者 the <li>
 

为什么结果没有”<em>immediate</em>”呢?,因为在<div>和<em>之间没有元素被*匹配。

元素类型选择符(Element Type Selector)

格式如下:
 

E {
declaration block
}

相对于全局选择符能匹配所有元素,元素类型选择符只能匹配哪些与选择符名称一样的元素,元素选择符是不区分大小写的,无论是html还是xml。

例子:
 

ul {
declarations
}

可以匹配html或者xml中的所有<ul>。而包含在<ul></ul>里面的内容则应用紧跟在选择符后{}括号内的声明代码。

类选择符(Class Selector)

格式如下:
 

.className {
declaration block
}

根据类名来选择元素是css最常用的一种技术,例如:
 

p.intro {
declarations
}

将会匹配所有带有类名值为”intro”的p元素,也就是
 

<p class="intro">类选择符测试</p>

ID选择符(ID Selector)

格式如:
 

#ID {
declaration block
}

ID选择符匹配那些带有一个指定的id值的元素,而且该id的值必须是唯一的,ID选择符不能同时匹配一个文档的两个以上的元素。

例如:
 

#navigation {
declarations
}

将会匹配id属性值为navigation的元素,如下:
 

<div id="navigation">ID选择符</div>
 

 
属性选择符(Attribute Selector)

格式如:
 

[ { attribute | attribute { = | |= | ~= } attribute value } ] {
declaration block
}

一个属性选择符将根据属性或属性值进行匹配元素。

例如:
 

input[type="submit"] {
declarations
}

将会匹配所有带有type属性,而且属性值为submit的input元素。

伪类(Pseudo-classes)

伪类格式开始于冒号(:),而且冒号前后都不可以有空格,而最有代表性的例子莫过于链接标签了,如下面的代码:
 

复制代码 代码示例:
a:link {
declarations
}
a:visited {
declarations
}
a:focus {
 declarations
}
a:hover {
 declarations
}
a:active {
 declarations
}

伪元素(Pseudo-elements)

伪元素可以匹配那些在文档树结构中没有明确定义的虚拟元素。伪元素可以是动态的,因为它们所代表的虚拟元素可以改变,例如,当浏览器窗口的宽度改变的时候,它们同样可以展现的由css规则生成的内容。

在css1和css2中,伪元素开始于冒号(:),前后不可以有空格,这个和伪类是一样的,但在css3,伪元素开始于两个冒号(::),为的就是要与伪类区分开来。

css1为我们带来的是:first-letter和:first-line伪元素,而css2为我们带来的是:before和:after伪元素,css3则增加了::selection伪元素。

它们的格式如下:
 

:first-letter {
declaration block
}
:first-line {
declaration block
}
:before {
declaration block
}
:after {
declaration block
}
::selection {
declaration block
}