二、CSS之——選擇器

作用：通過元素選擇器可以選擇頁面中的所有指定元素

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的貢覺網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

語法：標(biāo)簽名{}

作用：通過元素的class屬性值選中一組元素

語法：.class屬性值{}

id選擇器

作用：通過元素的id屬性值選中唯一的一個(gè)元素

語法：#id屬性值{}

復(fù)合選擇器（交集選擇器）

作用：可以選中同時(shí)滿足多個(gè)選擇器的元素

語法：選擇器1選擇器2選擇器N{}

選擇器分組（并集選擇器）

作用：通過選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素

語法：選擇器1,選擇器2,選擇器N{}

通配選擇器

作用：可以用來選中頁面中的所有的元素

語法：*{}

元素之間的關(guān)系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：擁有相同父元素的元素叫做兄弟元素

作用：選中指定元素的指定后代元素

語法：祖先元素 后代元素{}

有時(shí)候，你需要選擇本身沒有標(biāo)簽，但是 仍然易于識(shí)別的網(wǎng)頁部位，比如段落首行 或鼠標(biāo)滑過的連接。CSS為他們提供一些選 擇器：偽類和偽元素。

給鏈接定義樣式：

有四個(gè)偽類可以讓你根據(jù)訪問者與該鏈接的交互方式，將鏈接設(shè)置成4中不同的方式。

其他：

否定偽類

否定偽類可以幫助我們選擇不是其他東西的某種東西。

語法： :not(選擇器){}

比如p:not(.hello)標(biāo)識(shí)選擇所有的p元素，但是class為hello的除外。

屬性選擇器可以挑選帶有特殊屬性的標(biāo)簽。

語法：

[屬性名]

[屬性名 = "屬性值"]

[屬性名 ~= "屬性值"]

[屬性名 ^= "屬性值"]

[屬性名 |= "屬性值"]

[屬性名 $= "屬性值"]

[屬性名 *= "屬性值"]

作用：選中指定父元素的指定子元素

語法：父元素 子元素

比如body h1將選擇body字標(biāo)簽中的所有h1標(biāo)簽

IE6及以下的瀏覽器不支持子元素選擇器

其他子元素選擇器

除了根據(jù)祖先父子關(guān)系，還可以根據(jù)兄弟關(guān)系查找元素。

語法：

兄弟元素 + 兄弟元素 ：查找后邊一個(gè)兄弟元素

兄弟元素 ~ 兄弟元素：查找后邊所有的兄弟元素

在頁面中使用CSS選擇器選中元素時(shí)，經(jīng)常都是一個(gè)元素同時(shí)被多個(gè)選擇器選中。

比如：

這兩個(gè)選擇器都會(huì)選擇h1元素，如果兩個(gè)選擇器設(shè)置的樣式不一樣那還好不會(huì)產(chǎn)生沖突，但是如果兩個(gè)選擇器設(shè)置的是同一個(gè)樣式，這樣h1到底要應(yīng)用哪個(gè)樣式呢？CSS中會(huì)默認(rèn)使用權(quán)重較大的樣式，下面看一下權(quán)重又是如何計(jì)算的。

不同的選擇器有不同的權(quán)重值：

css樣式有哪幾種選擇器？

CSS選擇器、優(yōu)先級(jí)與匹配原理\x0d\x0a1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標(biāo)簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul 通配選擇符的權(quán)值 0,0,0,0\x0d\x0a2.標(biāo)簽的權(quán)值為 0,0,0,1\x0d\x0a3.類的權(quán)值為 0,0,1,0\x0d\x0a4.屬性選擇的權(quán)值為 0,0,1,0\x0d\x0a5.偽類選擇的權(quán)值為 0,0,1,0\x0d\x0a6.偽對(duì)象選擇的權(quán)值為 0,0,0,1\x0d\x0a7.ID的權(quán)值為 0,1,0,0\x0d\x0a8.important的權(quán)值為最高 1,0,0,0\x0d\x0a使用規(guī)則： 選擇器的權(quán)值加到一起，大的優(yōu)先；如果權(quán)值相同，后定義的優(yōu)先 。\x0d\x0a從上面我們可以得出兩個(gè)關(guān)鍵的因素：\x0d\x0a1.權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)\x0d\x0a2.樣式的優(yōu)先級(jí)跟樣式的定義順序有關(guān)

請(qǐng)簡要說明css樣式表中三種選擇器(三種樣式)的特點(diǎn)

CSS選擇器的類型分為3類:標(biāo)記選擇器、類別選擇器和ID選擇器。（可能名稱有不同的說法，但意思都是一樣的）

標(biāo)記選擇器是利用HTML的標(biāo)記直接定義標(biāo)記內(nèi)容的樣式，如：h1{

color:red;

font-size:25pt;}

類別選擇器是通常說的class選擇器，定義的時(shí)候要在名稱前加.如：.one{

color:red;

font-size:25pt;}

ID選擇器定義的時(shí)候要在前面加#，如：#box

{

color:red;

font-size:25pt;}

利用DW寫CSS的時(shí)候，高級(jí)就是上面說的ID選擇器，ID選擇器的名字可以任意命名，可以自己定義，可是標(biāo)簽就只能是HTML語言里制定的那些標(biāo)記，不能自己定義。

詳解CSS樣式選擇器有哪些?

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

CSS選擇器分類：

標(biāo)簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器

1、html標(biāo)簽選擇器：

定義：以html標(biāo)簽作為選擇器

2、class類選擇器：

定義：為HTML標(biāo)簽添加class屬性，通過類選擇器來為具有此class屬性的元素設(shè)置css樣式。

類選擇器也可以對(duì)不同類型元素的同一個(gè)名稱的類選擇器設(shè)置不同的樣式規(guī)則：

同一個(gè)元素可以設(shè)置多個(gè)類，之間用空格隔開：

3、ID選擇器

定義：為HTML標(biāo)簽添加ID屬性，通過ID選擇器來為具有此ID的元素設(shè)置CSS規(guī)則

4、群組選擇器

定義：集體統(tǒng)一設(shè)置樣式

5、全局選擇器

定義：所有標(biāo)簽設(shè)置樣式

HTML文檔結(jié)構(gòu)圖

6、后代選擇器

定義：使用后代選擇器設(shè)置，之間用空格隔開，后代選擇器可以多層。

7、偽類選擇器

鏈接的四種狀態(tài)：激活狀態(tài)，已訪問狀態(tài)，未訪問狀態(tài)，鼠標(biāo)懸停狀態(tài)。

偽類

說明

:link

未訪問的鏈接

:visited

已訪問的鏈接

:hover

鼠標(biāo)懸停狀態(tài)

:active

激活的鏈接

:hover 用于訪問的鼠標(biāo)經(jīng)過某個(gè)元素時(shí)；

:active 用于一個(gè)元素被激活時(shí)（即按下鼠標(biāo)之后放開鼠標(biāo)之前的狀態(tài)）

偽類選擇器的屬性：link visited hover active

說明：

1)?a:hover 必須置于?a:link和a:visited之后，才有效

2) a:active 必須置于 a:hover之后才有效

3) 偽類名稱對(duì)大小寫不敏感

8、CSS其它選擇器

css繼承特性，從父元素那繼承部分css屬性

選擇器的優(yōu)先級(jí)

ID選擇優(yōu)先級(jí)最高（id選擇器定義具有唯一性）

class選擇器次之（class選擇器可以多個(gè)）

元素選擇器再次之

其它選擇器優(yōu)先級(jí)主要根據(jù)定義的先后順序，最后定義的優(yōu)先級(jí)高

!important 加重選擇器的優(yōu)先級(jí)，添加在樣式規(guī)則之后，中間用空格隔開。

CSS選擇器命名規(guī)則

1：采用英文字母，數(shù)字以及"-" 和 "_" 命名

2：以小寫字母開頭，不能以數(shù)字和"-"?和 "_" 開頭

3：使用有意義的命名規(guī)范

常用CSS命名

header

頁頭

main

主體

footer

頁尾

nav

導(dǎo)航

sidebar

側(cè)欄

container

容器

column

欄目

title

標(biāo)簽

menu

菜單

submenu

子菜單

*列舉常用命名，大家根據(jù)自身項(xiàng)目及團(tuán)隊(duì)的規(guī)則命名

耐心學(xué)習(xí)基礎(chǔ)知識(shí)，基礎(chǔ)是蓋房的根基，必須打結(jié)實(shí)。

如果您覺得有用，記得在下方點(diǎn)贊、關(guān)注、留言，我會(huì)定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動(dòng)力，么么噠。

每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn)，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢(mèng)想的人一起成長！

css選擇器 列表樣式

舉一個(gè)簡單的ul，li的列表例子，實(shí)現(xiàn)如下效果：

常規(guī)寫法（使用last-child選擇器）：

寫法2（使用not選擇器）:

寫法2（使用+選擇器）:

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。

css選擇器有哪些？各種選擇器優(yōu)先級(jí)大小順序

1、類型選擇器

CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器)，可以向這種元素類型的每個(gè)實(shí)例上應(yīng)用聲明。例如，以下簡單規(guī)則的選擇器是H1，因此規(guī)則作用于文檔中所有的H1元素。

2、簡單屬性選擇器

CLASS屬性

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應(yīng)用聲明。BODY內(nèi)的所有元素都有CLASS屬性。從本質(zhì)上講，可以使用CLASS屬性來分類元素，在樣式表中創(chuàng)建規(guī)則來引用CLASS屬性的值，然后瀏覽器自動(dòng)將這些屬性應(yīng)用到該組元素。

類選擇器以標(biāo)志符(句點(diǎn))開頭，用于指示后面是哪種類型的選擇器。對(duì)于類選擇器，之所以選擇句點(diǎn)是因?yàn)樵诤芏嗑幊陶Z言中它與術(shù)語"類"相關(guān)聯(lián)。翻譯成英語，標(biāo)志符表示"帶有類名的元素"。

ID屬性

ID屬性的操作類似于CLASS屬性，但有一點(diǎn)重要的不同之處:ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設(shè)置單個(gè)元素的樣式規(guī)則。包含ID屬性的選擇器稱為ID選擇器。

需要注意的是，ID選擇器的標(biāo)志符是散列符號(hào)(#)。標(biāo)志符用來提醒瀏覽器接下來出現(xiàn)的是ID值。

STYLE屬性

盡管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實(shí)際上可以替代整個(gè)選擇器機(jī)制。不是只具有一個(gè)能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實(shí)際上是一個(gè)或多個(gè)CSS聲明。

通常情況下，使用CSS，設(shè)計(jì)者將把所有的樣式規(guī)則置于一個(gè)樣式表中，該樣式表位于文檔頂部的STYLE元素內(nèi)(或在外部進(jìn)行鏈接)。但是，使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標(biāo)記中。

3、組合選擇器類型

可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構(gòu)成更復(fù)雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類型選擇器和類選擇器，一個(gè)元素必須滿足兩個(gè)要求:它必須是正確的類型和正確的類以便使樣式規(guī)則可以作用于它。

外部信息:偽類和偽元素

在CSS1中，樣式通常是基于在HTML源代碼中出現(xiàn)的標(biāo)記和屬性。對(duì)于很多設(shè)計(jì)情景而言這種做法完全可行，但是它無法實(shí)現(xiàn)設(shè)計(jì)者希望獲得的一些常見的設(shè)計(jì)效果。

設(shè)計(jì)偽類和偽元素可以實(shí)現(xiàn)其中的一些效果。這兩種機(jī)制擴(kuò)充了CSS的表現(xiàn)能力。在CSS1中，使用偽類可以根據(jù)一些情況改變文檔中鏈接的樣式，如根據(jù)鏈接是否被訪問，何時(shí)被訪問以及用戶和文檔的交互方式來應(yīng)用改變。借助于偽元素，可以更改元素的第一個(gè)字母和第一行的樣式，或者添加源文檔中沒有出現(xiàn)過的元素。

偽類和偽元素都不存在于HTML;也就是說，它們?cè)贖TML代碼中是不可見的。這兩種機(jī)制都得到了精心設(shè)計(jì)以便能夠在CSS以后的版本中做進(jìn)一步地?cái)U(kuò)充;也就是說實(shí)現(xiàn)更多的效果。

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。

CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。

本文題目：css分組選擇器樣式,列舉幾種常用的css選擇器類型
URL分享：http://aaarwkj.com/article42/dsigchc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)