CSS的四種基本選擇器和四種高級(jí)選擇器

天使之翼 ` 2019-07-01

展開全文

CSS選擇器：就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱就是選擇器。意為：選擇哪個(gè)容器。

CSS的選擇器分為兩大類：基本選擇題和擴(kuò)展選擇器。

基本選擇器：

標(biāo)簽選擇器：針對一類標(biāo)簽
ID選擇器：針對某一個(gè)特定的標(biāo)簽使用
類選擇器：針對你想要的所有標(biāo)簽使用
通用選擇器（通配符）：針對所有的標(biāo)簽都適用（不建議使用）

下面來分別講一講。

1、標(biāo)簽選擇器：選擇器的名字代表html頁面上的標(biāo)簽

標(biāo)簽選擇器，選擇的是頁面上所有這種類型的標(biāo)簽，所以經(jīng)常描述“共性”，無法描述某一個(gè)元素的“個(gè)性”。

舉例：

<style type="text/css">
p{
    font-size:14px;
}</style>
<body>
<p>css</p>
</body>

再比如說，我想讓“學(xué)完了安卓，繼續(xù)學(xué)前端喲”這句話中的“前端”兩個(gè)變?yōu)榧t色字體，那么我可以用<span>標(biāo)簽把“前端”這兩個(gè)字圍起來，然后給<span>標(biāo)簽加一個(gè)標(biāo)簽選擇器。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>學(xué)完了安卓，繼續(xù)學(xué)<span>前端</span>喲</p>
</body>
</html>

【總結(jié)】需要注意的是：

（1）所有的標(biāo)簽，都可以是選擇器。比如ul、li、label、dt、dl、input、div等。

（2）無論這個(gè)標(biāo)簽藏的多深，一定能夠被選擇上。

（3）選擇的所有，而不是一個(gè)。

2、ID選擇器：規(guī)定用`#`來定義（名字自定義）

針對某一個(gè)特定的標(biāo)簽來使用，只能使用一次。css中的ID選擇器以”#”來定義。

舉例：

<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
    border:3px dashed green;
}
</style>
</head>

然后我們在別處使用id來引用它：

<body>
<h2 id="mytitle">你好</h2>
</body>

id選擇器的選擇符是“#”。

任何的HTML標(biāo)簽都可以有id屬性。表示這個(gè)標(biāo)簽的名字。這個(gè)標(biāo)簽的名字，可以任取，但是：

（1）只能有字母、數(shù)字、下劃線。
（2）必須以字母開頭。
（3）不能和標(biāo)簽同名。比如id不能叫做body、img、a。
（4）大小寫嚴(yán)格區(qū)分，也就是說aa,和AA是兩個(gè)不同的ID

另外，特別強(qiáng)調(diào)的是：HTML頁面，不能出現(xiàn)相同的id，哪怕他們不是一個(gè)類型。比如頁面上有一個(gè)id為pp的p，一個(gè)id為pp的div，是非法的！

一個(gè)標(biāo)簽可以被多個(gè)css選擇器選擇：

比如，我們可以同時(shí)讓標(biāo)簽選擇器和id選擇器作用于同一個(gè)標(biāo)簽。（用到了層疊）如下：

然后我們通過網(wǎng)頁的審查元素看一下效果：

現(xiàn)在，假設(shè)選擇器沖突了，比如id選擇器說這個(gè)文字是紅色的，標(biāo)簽選擇器說這個(gè)文字是綠色的。那么聽誰的？
實(shí)際上，css有著非常嚴(yán)格的計(jì)算公式，能夠處理沖突.

一個(gè)標(biāo)簽可以被多個(gè)css選擇器選擇，共同作用，這就是“層疊式”的第一層含義

3、類選擇器：規(guī)定用圓點(diǎn)`.`來定義

、針對你想要的所有標(biāo)簽使用。優(yōu)點(diǎn)：靈活。

css中用.來表示類。舉例如下：

<style type="text/css">
.oneclass/*定義類選擇器*/{
    width:800px;
}
</style>
</head>

然后我們在別處使用class來引用它：

<body>
<h2 class="oneclass">你好</h2>
</body>

和id非常相似，任何的標(biāo)簽都可以攜帶id屬性和class屬性。但是id屬性只能被某一特定標(biāo)簽引用一次

class屬性的特點(diǎn)：

特性1：類選擇器可以被多種標(biāo)簽使用。
特性2：同一個(gè)標(biāo)簽可以使用多個(gè)類選擇器。用空格隔開。舉例如下

<h3 class="classone  classtwo">我是一個(gè)h3啊</h3>

而不能寫成：

<h3 class="teshu" class="zhongyao">我是一個(gè)h3啊</h3>

類選擇器使用的舉例：

類選擇器的使用，能夠決定一個(gè)人的css水平。

應(yīng)該注意：

（1）不要去試圖用一個(gè)類名，把某個(gè)標(biāo)簽的所有樣式寫完。這個(gè)標(biāo)簽要多攜帶幾個(gè)類，共同完成這個(gè)標(biāo)簽的樣式。

（2）每一個(gè)類要盡可能小，有“公共”的概念，能夠讓更多的標(biāo)簽使用。

如：

<style type="text/css">
        .lv{
            color: green;
        }
        .da{
            font-size: 30px;
        }
        .underline{
            text-decoration: underline;
        }
    </style>

然后讓每個(gè)標(biāo)簽去選取自己想要用的類選擇器：

  <p class="lv da">段落1</p>
    <p class="lv xian">段落2</p>
    <p class="da xian">段落3</p>

問題：到底用id還是用class？

答案：盡可能的用class，除非極特殊的情況可以用id。

原因：id是js用的。也就是說，js要通過id屬性得到標(biāo)簽，所以css層面盡量不用id，要不然js就很別扭。另一層面，我們會(huì)認(rèn)為一個(gè)有id的元素，有動(dòng)態(tài)效果。

舉例如下：

上圖所示，css和js都在用同一個(gè)id，會(huì)出現(xiàn)不好溝通的情況。

我們記住這句話：類上樣式，id上行為。意思是說，`class`屬性交給css使用，`id`屬性交給js使用。

上面這三種選擇器的區(qū)別：

標(biāo)簽選擇器針對的是頁面上的一類標(biāo)簽。
ID選擇器是只針對特定的標(biāo)簽(一個(gè))，ID是此標(biāo)簽在此頁面上的唯一標(biāo)識(shí)。
類選擇器可以被多種標(biāo)簽使用。

4、通配符``：匹配任何標(biāo)簽（引出屬性選擇器[title（="..."）]{...}，匹配所有帶有title標(biāo)簽的，a[href

（="..."）][title（="..."）]{color:red}將同時(shí)有 href（="..."）和 title（="..."）屬性的 HTML 超鏈接的文本設(shè)置為紅色等）

通用選擇器，將匹配任何標(biāo)簽。不建議使用，IE有些版本不支持，大網(wǎng)站增加客戶端負(fù)擔(dān)。

效率不高，如果頁面上的標(biāo)簽越多，效率越低，所以頁面上不能出現(xiàn)這個(gè)選擇器。

舉例：

<style type="text/css">
*/*定義通用選擇器*，希望所有標(biāo)簽的上邊距和左邊距都為0*/{
    margin-left:0px;
    margin-top:0px;
}
</style>

后面就不需要進(jìn)行引用了以上就可以起到”通配“的效果了。

下面來講CSS中幾種擴(kuò)展（高級(jí)）選擇器：

高級(jí)選擇器：

后代選擇器：用空格隔開
交集選擇器：用.隔開
并集選擇器（分組選擇器）：用逗號(hào)隔開
偽類選擇器

1、后代選擇器: 定義的時(shí)候用空格隔開

對于E F這種格式，表示所有屬于E元素后代的F元素，有這個(gè)樣式?？崭窬捅硎竞蟠?/p>

后代選擇器，就是一種平衡：共性、特性的平衡。當(dāng)要把某一個(gè)部分的所有的什么，進(jìn)行樣式改變，就要想到后代選擇器。

后代選擇器，描述的是祖先結(jié)構(gòu)。

看定義可能有點(diǎn)難理解，我們來看例子吧。

舉例1：

  <style type="text/css">
        .div1 p{
            color:red;
        }
    </style>

空格就表示后代。.div1 p 表示.div1的后代所有的p。

這里強(qiáng)調(diào)一下：這兩個(gè)標(biāo)簽不一定是連續(xù)緊挨著的，只要保持一個(gè)后代的關(guān)聯(lián)即可。也就是說，選擇的是后代，不一定是兒子。

舉例：

 <style type="text/css">
        h3 b i{
            color:red ; 
        }
    </style

上方代碼的意思是說：定義了<h3>標(biāo)簽中的<b>標(biāo)簽中的<i>標(biāo)簽的樣式。
同理：h3和b和i標(biāo)簽不一定是連續(xù)緊挨著的，只要保持一個(gè)后代的關(guān)聯(lián)即可。

效果：

或者還有下面這種寫法：

上面的這種寫法，<h3>標(biāo)簽和<i>標(biāo)簽并不是緊挨著的，但他們保持著一種后代關(guān)系。

還有下面這種寫法：（含類選擇器、id選擇器都是可以的）

我們在開頭說了：后代選擇器，描述的是一種祖先結(jié)構(gòu)。我們舉個(gè)例子來說明這句話：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div div p{
            color: red;
        }
        .div2{...}
        .div3{...}
        .div4{...}
    </style>
</head>
<body>
    <div>
        <div class="div2">
            <div class="div3">
                <div class="div4">
                    <p>我是什么顏色？</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

上面css中的div div p，也能使文字的顏色變紅。通過瀏覽器的審查元素，我們可以看到 p元素的祖先列表：

講到這里，我們再提一個(gè)sublime的快捷鍵。

在sublime中輸入p#haha，按tab鍵后，會(huì)生成<p id="haha"></p>。

在sublime中輸入p.haha，按tab鍵后，會(huì)生成<p class="haha"></p>。

2、交集選擇器

來看下面這張圖就明白了：

<style type="text/css">
h3.special{
    color:red;
}
</style>

選擇的元素要求同時(shí)滿足兩個(gè)條件：必須是h3標(biāo)簽，然后必須是special標(biāo)簽。

只能在h3標(biāo)簽中使用它：

<h3 class="special">css</h3>

注意，交集選擇器沒有空格。所以，沒有空格的div.red（交集選擇器）和有空格的div .red（后代選擇器）不是一個(gè)意思。

交集選擇器可以連續(xù)交：（一般不要這么寫）

h3.special.zhongyao{
    color:red;
}

上面這種寫法，是 IE7 開始兼容的，IE6 不兼容。

交集選擇器，我們一般都是以標(biāo)簽名開頭，比如div.haha 比如p.special。

3、并集選擇器：定義的時(shí)候用逗號(hào)隔開

三種基本選擇器都可以放進(jìn)來。

舉例：

p,h1,#mytitle,.one/*定義了一個(gè)并集選擇器，帶有p,h1,id="mytitle",class="one"的標(biāo)簽都內(nèi)容會(huì)顯示紅色*/{
    color:red;
}

4、偽類選擇器（待定）

對于<a>標(biāo)簽，其對應(yīng)幾種不同的狀態(tài)：

link：超鏈接點(diǎn)擊之前
visited：超鏈接點(diǎn)擊之后
focus：是某個(gè)標(biāo)簽獲得焦點(diǎn)的時(shí)候（比如某個(gè)輸入框獲得焦點(diǎn)）
hover：鼠標(biāo)放到某個(gè)標(biāo)簽上的時(shí)候
active：點(diǎn)擊某個(gè)標(biāo)簽沒有松鼠標(biāo)時(shí)

CSS允許對于元素的不同狀態(tài)，定義不同的樣式信息。偽類選擇器又分為兩種：

靜態(tài)偽類：只能用于超鏈接
動(dòng)態(tài)偽類：針對所有標(biāo)簽都適用

下面來分別講一下這兩種偽類選擇器。

（1）靜態(tài)偽類：

用于以下兩個(gè)狀態(tài)（只能使用于超鏈接）：

link：超鏈接點(diǎn)擊之前
visited：超鏈接點(diǎn)擊之后

舉個(gè)例子：

 <style type="text/css">/*偽類選擇器：靜態(tài)偽類 */

a:link /*(針對所有利用href屬性的)超鏈接(不包括錨點(diǎn))點(diǎn)擊之前是紅色*/{

color:red; } a:visited/*讓超鏈接點(diǎn)擊之后是綠色*/{ color:green; } </style>

問：既然a{}定義了超鏈接的屬性，a:link{}定義了超鏈接點(diǎn)擊之前的屬性，那這兩個(gè)有啥區(qū)別呢？
答：

a{}和a:link{}的區(qū)別：

a{}定義的樣式針對所有的超鏈接(包括錨點(diǎn))
a:link{}定義的樣式針對所有寫了href屬性的超鏈接(不包括錨點(diǎn))

（2）動(dòng)態(tài)偽類:

用于以下幾種狀態(tài)（適用于所有的標(biāo)簽）：

focus（聚焦，點(diǎn)擊某個(gè)文本框后輸入文字，可以定義文本框和文字的屬性）：是某個(gè)標(biāo)簽獲得焦點(diǎn)的時(shí)候（比如某個(gè)輸入框獲得焦點(diǎn)）
hover（盤旋，鼠標(biāo)停留在上面）：鼠標(biāo)放到某個(gè)標(biāo)簽上的時(shí)候
active（長按狀態(tài)）：點(diǎn)擊某個(gè)標(biāo)簽沒有松鼠標(biāo)時(shí)

舉個(gè)例子：

<head>
<style type="text/css">
  /* 偽類選擇器：動(dòng)態(tài)偽類*/
    input:focus/*讓input文本框獲取焦點(diǎn)時(shí)：邊框：#FF6F3D這種橙色；文字：綠色；背景色：#6a6a6a這種灰色*/{
        border:3px solid #FF6F3D;
        color:white;
        background-color:#6a6a6a;
    }
    label:hover/*鼠標(biāo)放在label標(biāo)簽上時(shí)顯示藍(lán)色*/{
        color:blue; 
    }
    label:active/*點(diǎn)擊label標(biāo)簽鼠標(biāo)沒有松開時(shí)顯示紅色*/{
        color:red; 
    }
  </style>
</head>
<body>
<input type="text" name=""><br><br>
<label>css大神</label>
</body>

利用這個(gè)hover屬性，我們同樣對表格做一個(gè)樣式的設(shè)置：

表格舉例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    /*整個(gè)表格的樣式*/
    table{
        width: 300px;
        height: 200px;
        border: 1px solid blue;
        /*border-collapse屬性：對表格的線進(jìn)行折疊*/
        border-collapse: collapse;
    }
    /*鼠標(biāo)懸停時(shí)，讓當(dāng)前行顯示#868686這種灰色*/
    table tr:hover{
        background: #868686;
    }
    /*每個(gè)單元格的樣式*/
    table td{
        border:1px solid red;
    }
  </style>
 </head>
 <body>
  <table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </table>
 </body>
</html>

效果如下：

另外，介紹一下子代選擇器：用符號(hào)>表示

IE7開始兼容，IE6不兼容:

div>p{
	color:red;
}

div的兒子p。和div的后代p的截然不同。

能夠選擇：

<div>
		<p>我是div的兒子</p>
</div>

不能選擇：

<div>
		<ul>
			<li>
				<p>我是div的重孫子</p>
			</li>
		</ul>
</div>

序選擇器

IE8開始兼容；IE6、7都不兼容

設(shè)置無序列表<ul>中的第一個(gè)<li>為紅色：

<style type="text/css">
	ul li:first-child{
		color:red;
}
</style>

設(shè)置無序列表<ul>中的最后一個(gè)<li>為紅色：

ul li:last-child{
			color:blue;
}

序選擇器還有更復(fù)雜的用法。

由于瀏覽器的更新需要過程，所以現(xiàn)在如果公司還要求兼容IE6、7，那么就要自己寫類名：

<ul>
		<li class="first">項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li>項(xiàng)目</li>
		<li class="last">項(xiàng)目</li>
	</ul>

用類選擇器來選擇第一個(gè)或者最后一個(gè)：

ul li.first{
	color:red;
}
ul li.last{
	color:blue;
}

下一個(gè)兄弟選擇器

IE7開始兼容，IE6不兼容。

+表示選擇下一個(gè)兄弟

<style type="text/css">
h3+p{
	color:red;
}
</style>

上方的選擇器意思是：選擇的是h3元素后面緊挨著的第一個(gè)兄弟。

  <h3>我是一個(gè)標(biāo)題</h3>
	<p>我是一個(gè)段落</p>
	<p>我是一個(gè)段落</p>
	<p>我是一個(gè)段落</p>
	<h3>我是一個(gè)標(biāo)題</h3>
	<p>我是一個(gè)段落</p>
	<p>我是一個(gè)段落</p>
	<p>我是一個(gè)段落</p>
	<h3>我是一個(gè)標(biāo)題</h3>
	<p>我是一個(gè)段落</p>
	<p>我是一個(gè)段落</p>
	<p>我是一個(gè)段落</p>
	<h3>我是一個(gè)標(biāo)題</h3>

效果如下：

這種選擇器作用不大。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：天使之翼 ` > 《待分類》

舉報(bào)/認(rèn)領(lǐng)