首頁 > 文章 > web前端 > 關於CSS選擇器種類及使用介紹

關於CSS選擇器種類及使用介紹

不言原創: 2018-06-21 17:09:332063瀏覽

常用的有標籤選擇器、類別選擇器、ID選擇器等等，其實還有很多，在接下來的文章中為大家詳細介紹下這些選擇器的種類及其使用

首先說主要都有哪些先擇器
1.標籤選擇器（如：body,p,p,ul,li）
2.類別選擇器（如：class="head",class=" head_logo"）
3.ID選擇器（如：id="name",id="name_txt"）
4.全域選擇器（如：*號）
5.組合選擇器（如：.head .head_logo,注意兩選擇器用空白鍵分開）
6.繼承選擇器（如：p p,注意兩選擇器用空白鍵分開）
7.偽類選擇器（如：就是連結樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）
8. 字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
在標籤內寫入style=" "的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。
我們分別來看下這些選擇器：
1：標籤名稱選擇器
一個XHTML文件中有許多標籤，例如p標籤，h1標籤等。若要讓文件中的所有p標籤都使用同一個CSS樣式，就應使用標籤選擇器。

p {color:red;border:1px blue solid;} 
p {color:#000;}

2：類別選擇器
使用標籤選擇器可以為整個XHTML文件中的同一個標籤指定相同的CSS樣式。但在實際運用中，XHTML文件中的同一個標籤會被重複使用。若要為相同的標籤賦予不同的CSS樣式就應使用類別選擇器。

<p class="test">测试代码</p> 
.test {color:red;border:1px blue solid;}

在html文檔裡，我們在要控制樣式的標籤的開標籤（非成對標籤如input直接放在標籤裡）裡加入class="xxx",在頁面對應的css文件裡，用.xxx就可以指向這個標籤，從而對這個標籤進行控制，我們稱這種透過定義類別（class）來找到標籤的方式為：類別選擇器。

這種定義class 的方式是前端開發最常用的選擇器，有幾個突出的特點：可以給不同的標籤設置同一個類，從而用一條CSS命令控制幾個標籤，減少大量程式碼，是頁面修改簡單，易維護，易改版；其次，後台工作人員機會不會用到有關class的相關設置，不需要跟後台人員之間進行交互；再者，可以透過js等動態改變標籤的Classname，從而改變整個標籤的樣式，讓前端動態效果實現起來更為容易。
3：ID選擇器
ID選擇器和類別選擇器相似，不同的是，ID選擇器不能重複使用。在一個XHTML文件中，一個ID選擇器只能把其CSS樣式指定給一個標籤。

<p id="test">测试代码</p> 
#test {color:red;border:1px blue solid;}

有 ID 的 HTML元素可以被JavaScript來操縱.再就是ID也是後台開發人員會常用的，所以前端開發人員應該盡量少的使用。
4.全域選擇器
全域選擇器是一個星號。它能作用於XHTML文檔中的所有元素。

*{margin:0; padding:0;}

5.組合選擇器
標籤選擇器、類別選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標籤選擇器和類別選擇器組合，標籤選擇器和ID選擇器組合。由於這兩種組合方式的原理和效果一樣，所以只介紹標籤選擇器和類別選擇器的組合。組合選擇器只是一種組合形式，並不算是一種真正的選擇器，但在實際中經常使用。
例如 .orderlist li {xxxx} 或 .tableset td {}
我們使用的時候一般用在重複出現並且樣式相同的一些標籤裡，例如 li td dd等。
例如

H1.red {color: red}
群組選擇器

.test1,span,test2 {border:1px blue solid;} 
p,span,img {border:1px blue solid;}

群組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了許多程式碼。
6.繼承選擇器
學習使用繼承選擇器就必須先了解文檔樹和CSS的繼承。每個XHTML都可以被視為一個文檔樹，文檔樹的根部就是html標籤，而head和body標籤就是其子元素。在head和body裡的其他標籤就是html標籤的孫子元素。整個XHTML呈現一種祖先和子孫的樹狀關係。 CSS的繼承是指子孫元素繼承祖先元素的某些屬性。以下透過實例來詳細解說這兩個重要的CSS概念。
文檔樹 CSS的繼承繼承選擇器

<p class="test"> 
<span><img src="xxx" alt="示例图片"/></span> 
</p> 
.test span img {border:1px blue solid;} 
p span img {border:1px blue solid;}

后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。
7.伪类选择器
伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:visited、:hover和:active。
a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上
8.字符串匹配的属性选择符--主要有三种
语法：E[att^="val"] ： {attribute}
说明：匹配具有att属性、且值以val开头的E元素。

<span style="font-size:18px;"><style type="text/css"> 
p[title^="val"] {color:#FF0000;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="value">匹配具有att属性、且值以val开头的E元素</p> 
</p></span>

语法:E[att$="val"] ： {attribute}
说明：匹配具有att属性、且值以val结尾的E元素

<style type="text/css"> 
p[title$="val"] {font-weight:bold;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p> 
</p> 
</body>

语法:E[att*="val"] ： {attribute}
说明：匹配具有att属性、且值中包含val的E元素。

<style type="text/css"> 
p[title*="val"] {text-decoration:underline;} 
</style> 
<title>子串匹配的属性选择符 E[att*="val"]</title> 
</head> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p> 
</p> 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

關於CSS選擇器種類及使用介紹

相關文章