关于css:CSS中的五大选择器

1、元素选择器

最常见的 css 选择器当属元素选择器了，在 HTML 文档中该选择器通常是指某种 HTML 元素，例如：p,h2,span,a,div 乃至 html。

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

以上 css 代码会对整个文档增加彩色背景；将所有 p 元素字体大小设置为 30 像素同时增加灰色背景；对文档中所有 h2 元素增加红色背景。

通过下面的例子也能够看出 css 的根本规定构造：由选择器和申明块组成。每个申明块中蕴含一个或多个申明。每个申明的格局为：属性名：属性值。

每条申明以分号”;”结尾。如果在一个申明中应用了不正确的属性值，或者不正确的属性，则该条申明会被疏忽掉。另外请留神不要遗记每条申明前面的分号。

咱们也能够同时对多个 html 元素进行申明：

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}

这样会将文档中所有的 h1~h6 以及 p 元素字体设置为”黑体”。如果咱们心愿一锅粥地选取所有的元素，能够应用通配符 "*"：* {font-size: 20px;}

这样所有的元素都将被选中，尽管 font-size 属性对于某些元素是有效的，那么它将被疏忽。

2、类选择器

(1) 单类选择器

单纯的元素选择器仿佛还过于毛糙了，比方咱们心愿在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于咱们不能确定稿件的截至日期将会呈现在哪种元素中，或者它可能呈现在多种不同的元素中。这个时候，咱们能够思考应用类选择器 (class selector)。

要应用类选择器咱们须要首先对文件元素增加一个 class 属性，比方截至日期可能会呈现在以下元素中:

<p class="deadline">...</p>

<h2 class="deadline">...</h2>

这样咱们就能够用以下形式应用类选择器了：

p.deadline {color: red;}

h2.deadline {color: red;}

点号”.”加上类名就组成了一个类选择器。以上 2 个选择器会抉择所有蕴含”deadline”类的 p 元素和 h2 元素。而其余蕴含该属性的元素则不会被选中。

如果咱们省略.deadline 后面的元素名，那么所有蕴含该类的元素都将被选中：

.deadline {color: red;}

通常状况下，咱们会组合应用以上 2 者失去更加乏味的款式：

.deadline {color: red;}

span.deadline {font-style: italic;}

以上代码首先会对所有的蕴含 deadline 的元素字体设置为红色，同时会对 span 元素中的文本增加额定的斜体成果。这样，如果你心愿某处文本领有额定的斜体成果将它们放在 <span></span> 中就能够了。

(2) 多类选择器

在实际的做法中，元素的 calss 属性可能不止蕴含一个单词，而是一串单词，各个单词之间用空格隔开。

比方某些元素蕴含一个”warning”类，某些元素蕴含一个”important”类，某些元素同时蕴含”warning important”类。属性名呈现的程序没有关系：

class = "warning important"

class = "important warning"

以上 2 者是等价的。咱们心愿蕴含 warning 类的元素有一个醒目的红色字体，蕴含 important 属性的元素有一个加粗的字体显示，而同时蕴含以上 2 中属性的元素另外领有一个蓝色背景 (不论还能不能看清文字了)，咱们能够应用以下的 css 代码：

.warning {color: red;}

.important {font-weight: bold;}

.warning.important {background: blue;}

当然，第三条你也能够写成：.important.warning {background: blue;} 和词序没有关系。阐明一下，.warning 会匹配所有蕴含 warning 属性的元素，不论该元素还蕴含多少其余的属性。.important 同理。而.important.warning 会匹配所有同时蕴含以上 2 种属性的元素，不论该元素还蕴含多少其余的类，也不论他们在类列表中呈现的程序，只有其中含有这 2 个属性，则会被抉择进来！

同样地，多于多类选择器，在后面加上元素名，则会匹配蕴含指定类名的指定元素，例如：p.warning.important {}

将会匹配同时蕴含 warning 和 important 属性的 p 元素，其余同样蕴含以上 2 类的元素则不会被选中。

3、ID 选择器

ID 选择器和类选择器有些相似，然而差异又非常显著。首先一个元素不能像类属性一样领有多个类，一个元素只能领有一个惟一的 ID 属性。其次一个 ID 值在一个 HTML 文档中只能呈现一次，也就是一个 ID 只能惟一标识一个元素 (不是一类元素，而是一个元素)。相似类属性，在应用 ID 选择器前首先要在元素中增加 ID 属性，例如：

<p id="top-para">...</p>

<p id="foot-para">...</p>

应用 ID 选择器的办法为井号”#”前面跟 id 值。当初咱们应用 id 选择器抉择以上 2 个 p 元素如：

#top-para {} #foot-para {}；

这样咱们就能够对以上 2 个段落进行须要的操作了。正因为 ID 选择器的唯一性，也使其用法变得绝对简略。

4、属性选择器

属性选择器在 css2 中引入，使咱们能够依据元素的属性及属性值来抉择元素。上面别离来阐明：

(1) 简略属性选择器

简略的属性选择器能够使咱们依据一个元素是否蕴含某个属性来做出抉择。应用办法为: 元素名 [属性名] 或 *[属性名]。比方咱们心愿抉择带有 alt 属性的所有 img 元素：img[alt] {…}

抉择带有 title 属性的所有元素：*[title] {…}。同类选择器相似，咱们也能够依据多个属性信息进行抉择，例如同时领有 href 和 title 的 a 元素：

a[href][title] {...}

组合应用类选择器使咱们的抉择更加富于灵活性。

(2) 具体属性值选择器

如果咱们心愿更加准确地依据属性值来抉择元素，咱们能够在简略的属性选择器中指定属性的值。最简略的咱们心愿找到 href 属性值为 http://www.baidu.com 的锚元素：

a[href="http://www.baidu.com"] {font-weight: bold;}

要特地留神的是，这里的具体值匹配本质上是一个字符串匹配，所以在这里对于 class 属性而言，词条的程序是有关系的。

p[class="warning important"] {...}

将不会匹配到 <p class=”important warning”></p>，也不会匹配到 <p class=”warning important mini-type”>，这里就是一个僵硬的字符串匹配。

另外，想要同时匹配多个属性的值也是能够的：

p[class="warning"][title="para"] {...}

将匹配到类为 warning(仅有 warning)，title 属性为 para 的 p 元素。

(3) 局部属性值选择器

依据属性值来匹配元素无疑比简略的属性匹配更加精细化了，然而仿佛有些精细化过头了，字符串的齐全匹配显得过于僵硬。比方咱们心愿抉择在一串属性值中呈现了某个关键字的元素，无妨再次以 class 属性为例，咱们心愿抉择所有蕴含了 warning 类的 p 元素，属性值匹配将无奈做到，好在还是有方法的，咱们能够应用以下的局部值匹配选择器：

p[class~="warning"] {...}

该选择器在等号”=”后面增加了一个波浪号~，含意为蕴含前面的字串的匹配。以上代码将会抉择所有 class 属性中蕴含”warning”的 p 元素。为了更加分明地阐明问题，它和以下的选择器是等价的：

p.warning {...}

当然~= 不仅仅只是用在 class 属性上，这只是一个示例。

再比如说，咱们的文档中蕴含一系列人物介绍的 div 元素：

<div title="intro 1">...</div>

<div title="intro 2">...</div>

<div title="intro 3">...</div>

咱们能够应用以下的形式抉择所有人物简介 div：div[title~=”intro”] {…}

不过遗憾的是 <div title=”animal intro”> 也将会被抉择进来，这是须要咱们特地留神的中央。

对于局部值选择器也有其局限性，它匹配的是由空格分隔的单词，如果咱们将下面的 div 写成上面的样子就会匹配失败：

<div title="intro-1">...</div>

<div title="intro-2">...</div>

<div title="intro-3">...</div>

对于这种状况，咱们能够应用子串匹配属性选择器。规定如下：

l div[title^="intro"] {...} //title 以 intro 结尾的 div 元素

l div[title$="intro"] {...} //title 以 intro 结尾的 div 元素

l div[title*="intro"] {...} //title 中蕴含 "intro" 子串的 div 元素

举例来说：

a[href*=”google.”] {…}

将蕴含所有链接中蕴含”google.”的 a 元素。

div[title$=”y”] {…}

将蕴含以下所有 div 元素：

<div title=”cloudy”>…</div>

<div title=”snowy”>…</div>

<div title=”rainy”>…</div>

能够看出局部值属性选择器的性能是非常弱小的。

5、派生选择器

派生选择器，乍一看名字不知所云，它又名上下文选择器，它是应用文档 DOM 构造来进行 css 抉择的。DOM 构造在此不再赘述了，但为了更加分明地阐明问题，咱们这里给出一个 DOM 树作为参考：

(1) 后辈选择器 (descendant selector)

如上图，如果想要抉择 body 元素的所有 li 子元素，办法如下：

body li {...}

这里会抉择所有的 li 后辈，也就是图中的 body 下的所有 li，不管他们之间相隔的代数有多少。同理，如果想要抉择 h1 元素下的 span，能够应用以下代码：

h1 span {...}

如果咱们要抉择领有 warning 类的元素的 li 后辈，能够应用上面的办法：

.warning li {...}

当然，如果心愿只抉择领有 warning 类的 div 元素的 li 后辈，能够写作：

div.warning li {...}

由下面的例子不难看出，后辈选择器的规定就是用空格连贯 2 个或多个选择器。空格的含意为：…的后辈。多个选择器的状况如下：ul li li {…}

这样，就会抉择所有 ul 下蕴含在 li 元素下的所有 li 元素了，听起来非常拗口，参考咱们的 DOM 树，会抉择到文档树种最初一排 li 元素。

(2) 子元素选择器 (child selector)

子元素选择器和后辈选择器不同，它只能抉择某元素的间接后辈，不能跨代选取，用法如下：ul > li {…}

两个子元素两头用一个大于号 > 连贯。下面的代码会抉择到所有 ul 元素的间接 li 子元素。对应到 DOM 树中，所有的 li 元素都会被选中，起因是图中所有的 li 元素都是 ul 的子元素。

然而，以下代码将不会选中任何元素：

h1 > span {...}

因为 span 是 h1 的”孙子元素”，h1 没有间接的 span 子元素，因此下面的代码将不会选到任何后果。其余方面和后辈元素相似，须要特地留神的就是子元素选择器不能隔代选取。

(3) 相邻兄弟选择器 (Adjacent sibling selector)

相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，留神它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在前面的兄弟元素。

相邻兄弟选择器在实践中有比拟不错的利用，例如，你想在一个 h2 题目前面的段落利用某种独到的款式或者心愿在某类 p 段落后的 table 上增加一个额定的边距等等。它的用法如下：

li + li {...}

以上代码会抉择所有作为 li 相邻元素的 li 元素，听起来又有点拗口，参考 DOM 树，它会抉择除了排在第一个 li 元素的其余 4 个 li 元素，因为 2 个排在第 1 的 li 元素没有更靠前的兄弟元素来抉择它。

再比方：h1 + p {…} 会抉择所有紧跟 h1 前面的 p 兄弟元素。h1.warning + p {…} 会抉择所有有用 warning 类的 h1 元素前面紧跟的 p 兄弟元素。

(4) 几种派生选择器的联合应用

实际上，以上介绍的几种派生选择器能够联合应用，看上面的例子：

html > body li.warning + li {...}

下面的选择器含意为：html 元素的 body 子元素中，所有领有 warning 类的 li 元素的相邻兄弟元素。