一起聊聊css選擇器（範例詳解）

這篇文章為大家帶來了css中選擇器的知識詳解，其中包括元素選擇器、類別選擇器、ID選擇器還有屬性選擇器等等，希望對大家有幫助。

1、元素選擇器 最常見的css選擇器當屬元素選擇器了，在HTML文件中該選擇器通常是指某種HTML元素，例如：p,h2,span,a,p甚至html。

用法十分簡單，例如：

html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 以上css程式碼會為整個文件加上黑色背景；將所有p元素字體大小設定為30像素同時新增灰色背景；文件中所有h2元素添加紅色背景。

透過上面的範例也可以看出css的基本規則結構：由 選擇器 和 宣告區塊 組成。每個聲明區塊中包含一個或多個聲明。每個宣告的格式為： 屬性名稱 ： 屬性值 。如下圖所示：

每個聲明以分號」;」結尾。 如果在一個宣告中使用了不正確的屬性值，或不正確的屬性，則該條宣告會被忽略掉。 另外請注意不要忘記每個聲明後面的分號。

我們舉個不正確的例子：

p { background-color: red font-family: 黑体; wordsize: 20px; float: left; } 上面的例子第一條宣告漏掉了分號，以上宣告區塊會被解析為：

p { background-color: red font-family: 黑体; wordsize: 20px; float: left; } red font-family: 黑體 整個會被解析為background-color的屬性值，這當然不是一個合法的屬性值，該條宣告將會被忽略掉。另外第二條聲明使用了不正確的屬性名稱wordsize，該條聲明也會忽略掉，結果只會正確處理第三條聲明，等價於：

p {float: left;} 此外，我們也可以同時對多個html元素進行宣告：

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;} 這樣會將文件中所有的h1~h6以及p元素字體設定為」黑體」。

如果我們希望一鍋粥地選取所有的元素，可以使用通配符」*」：

* { font-size: 20px;} 這樣所有的元素都會被選中，雖然font-size屬性對於某些元素是無效的，那麼它將被忽略。

2、類別選擇器 (1)單類別選擇器 單純的元素選擇器似乎還過於粗糙了，例如我們希望在文件中突出加粗顯示某種重要的內容，例如稿件的截至日期。問題在於我們無法確定稿件的截至日期將會出現在哪種元素中，或者它可能出現在多種不同的元素中。這時候，我們可以考慮使用類別選擇器(class selector)。

要使用類別選擇器我們需要先對檔案元素新增一個class屬性，例如截至日期可能會出現在以下元素中:

...

... 這樣我們就可以用以下方式使用類別選擇器了：

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元素中的文字添加額外的斜體效果。這樣，如果你希望某處文字擁有額外的斜體效果將它們放在 中就可以了。

(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属性，例如：

...

使用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="warning"][title="para"] { ...} 将匹配到类为warning(仅有warning)，title属性为para的p元素。

(3)部分属性值选择器 根据属性值来匹配元素无疑比简单的属性匹配更加精细化了，但是似乎有些精细化过头了，字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中出现了某个关键字的元素，不妨再次以class属性为例，我们希望选择所有包含了warning类的p元素，属性值匹配将无法做到，好在还是有办法的，我们可以使用以下的部分值匹配选择器：

p[class~="warning"] { ...} 该选择器在等号”=”前面添加了一个波浪号~，含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。为了更加清楚地说明问题，它和以下的选择器是等价的：

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

再比如说，我们的文档中包含一系列人物介绍的p元素：

...

我们可以使用以下的方式选择所有人物简介p：

p[title~="intro"] { ...} 不过遗憾的是 也将会被选择进来，这是需要我们特别注意的地方。

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

...

对于这种情况，我们可以使用 子串匹配属性选择器 。规则如下：

p[title^="intro"] {...} //title以intro开头的p元素 p[title$="intro"] {...} //title以intro结尾的p元素 p[title*="intro"] {...} //title中包含"intro"子串的p元素 举例来说：

a[href*="google."] {...} 将包含所有链接中包含”google.”的a元素。

p[title$="y"] {...} 将包含以下所有p元素：

...

可以看出部分值属性选择器的功能是十分强大的。

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

(1)后代选择器(descendant selector) 如上图，如果想要选择body元素的所有li子元素，方法如下：

body li { ...} 这里会选择所有的li后代，也就是图中的body下的所有li， 不论他们之间相隔的代数有多少 。

同理，如果想要选择h1元素下的span，可以使用以下代码：

h1 span { ...} 如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：

.warning li { ...} 当然，如果希望只选择拥有warning类的p元素的li后代，可以写作：

p.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元素的相邻兄弟元素。

（学习视频分享： css视频教程 ）

一起聊聊css選擇器（範例詳解）

相關文章