CSS選擇器、優(yōu)先級與匹配原理\x0d\x0a1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul 通配選擇符的權(quán)值 0,0,0,0\x0d\x0a2.標簽的權(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.偽對象選擇的權(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從上面我們可以得出兩個關(guān)鍵的因素：\x0d\x0a1.權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)\x0d\x0a2.樣式的優(yōu)先級跟樣式的定義順序有關(guān)
創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為福山企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)，福山網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
舉一個簡單的ul，li的列表例子，實現(xiàn)如下效果：
常規(guī)寫法（使用last-child選擇器）：
寫法2（使用not選擇器）:
寫法2（使用+選擇器）:
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
作用：通過元素選擇器可以選擇頁面中的所有指定元素
語法：標簽名{}
作用：通過元素的class屬性值選中一組元素
語法：.class屬性值{}
id選擇器
作用：通過元素的id屬性值選中唯一的一個元素
語法：#id屬性值{}
復(fù)合選擇器（交集選擇器）
作用：可以選中同時滿足多個選擇器的元素
語法：選擇器1選擇器2選擇器N{}
選擇器分組（并集選擇器）
作用：通過選擇器分組可以同時選中多個選擇器對應(yīng)的元素
語法：選擇器1,選擇器2,選擇器N{}
通配選擇器
作用：可以用來選中頁面中的所有的元素
語法：*{}
元素之間的關(guān)系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
作用：選中指定元素的指定后代元素
語法：祖先元素 后代元素{}
有時候，你需要選擇本身沒有標簽，但是 仍然易于識別的網(wǎng)頁部位，比如段落首行 或鼠標滑過的連接。CSS為他們提供一些選 擇器：偽類和偽元素。
給鏈接定義樣式：
有四個偽類可以讓你根據(jù)訪問者與該鏈接的交互方式，將鏈接設(shè)置成4中不同的方式。
其他：
否定偽類
否定偽類可以幫助我們選擇不是其他東西的某種東西。
語法： :not(選擇器){}
比如p:not(.hello)標識選擇所有的p元素，但是class為hello的除外。
屬性選擇器可以挑選帶有特殊屬性的標簽。
語法：
[屬性名]
[屬性名 = "屬性值"]
[屬性名 ~= "屬性值"]
[屬性名 ^= "屬性值"]
[屬性名 |= "屬性值"]
[屬性名 $= "屬性值"]
[屬性名 *= "屬性值"]
作用：選中指定父元素的指定子元素
語法：父元素 子元素
比如body h1將選擇body字標簽中的所有h1標簽
IE6及以下的瀏覽器不支持子元素選擇器
其他子元素選擇器
除了根據(jù)祖先父子關(guān)系，還可以根據(jù)兄弟關(guān)系查找元素。
語法：
兄弟元素 + 兄弟元素 ：查找后邊一個兄弟元素
兄弟元素 ~ 兄弟元素：查找后邊所有的兄弟元素
在頁面中使用CSS選擇器選中元素時，經(jīng)常都是一個元素同時被多個選擇器選中。
比如：
這兩個選擇器都會選擇h1元素，如果兩個選擇器設(shè)置的樣式不一樣那還好不會產(chǎn)生沖突，但是如果兩個選擇器設(shè)置的是同一個樣式，這樣h1到底要應(yīng)用哪個樣式呢？CSS中會默認使用權(quán)重較大的樣式，下面看一下權(quán)重又是如何計算的。
不同的選擇器有不同的權(quán)重值：
CSS選擇器就是指定CSS要作用的標簽，那個標簽的名稱就是選擇器。意為：選擇哪個容器。
CSS選擇器分類：
標簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器
1、html標簽選擇器：
定義：以html標簽作為選擇器
2、class類選擇器：
定義：為HTML標簽添加class屬性，通過類選擇器來為具有此class屬性的元素設(shè)置css樣式。
類選擇器也可以對不同類型元素的同一個名稱的類選擇器設(shè)置不同的樣式規(guī)則：
同一個元素可以設(shè)置多個類，之間用空格隔開：
3、ID選擇器
定義：為HTML標簽添加ID屬性，通過ID選擇器來為具有此ID的元素設(shè)置CSS規(guī)則
4、群組選擇器
定義：集體統(tǒng)一設(shè)置樣式
5、全局選擇器
定義：所有標簽設(shè)置樣式
HTML文檔結(jié)構(gòu)圖
6、后代選擇器
定義：使用后代選擇器設(shè)置，之間用空格隔開，后代選擇器可以多層。
7、偽類選擇器
鏈接的四種狀態(tài)：激活狀態(tài)，已訪問狀態(tài)，未訪問狀態(tài)，鼠標懸停狀態(tài)。
偽類
說明
:link
未訪問的鏈接
:visited
已訪問的鏈接
:hover
鼠標懸停狀態(tài)
:active
激活的鏈接
:hover 用于訪問的鼠標經(jīng)過某個元素時；
:active 用于一個元素被激活時（即按下鼠標之后放開鼠標之前的狀態(tài)）
偽類選擇器的屬性：link visited hover active
說明：
1)?a:hover 必須置于?a:link和a:visited之后，才有效
2) a:active 必須置于 a:hover之后才有效
3) 偽類名稱對大小寫不敏感
8、CSS其它選擇器
css繼承特性，從父元素那繼承部分css屬性
選擇器的優(yōu)先級
ID選擇優(yōu)先級最高（id選擇器定義具有唯一性）
class選擇器次之（class選擇器可以多個）
元素選擇器再次之
其它選擇器優(yōu)先級主要根據(jù)定義的先后順序，最后定義的優(yōu)先級高
!important 加重選擇器的優(yōu)先級，添加在樣式規(guī)則之后，中間用空格隔開。
CSS選擇器命名規(guī)則
1：采用英文字母，數(shù)字以及"-" 和 "_" 命名
2：以小寫字母開頭，不能以數(shù)字和"-"?和 "_" 開頭
3：使用有意義的命名規(guī)范
常用CSS命名
header
頁頭
main
主體
footer
頁尾
nav
導(dǎo)航
sidebar
側(cè)欄
container
容器
column
欄目
title
標簽
menu
菜單
submenu
子菜單
*列舉常用命名，大家根據(jù)自身項目及團隊的規(guī)則命名
耐心學(xué)習(xí)基礎(chǔ)知識，基礎(chǔ)是蓋房的根基，必須打結(jié)實。
如果您覺得有用，記得在下方點贊、關(guān)注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動力，么么噠。
每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢想的人一起成長！
1、類型選擇器
CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器)，可以向這種元素類型的每個實例上應(yīng)用聲明。例如，以下簡單規(guī)則的選擇器是H1，因此規(guī)則作用于文檔中所有的H1元素。
2、簡單屬性選擇器
CLASS屬性
CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應(yīng)用聲明。BODY內(nèi)的所有元素都有CLASS屬性。從本質(zhì)上講，可以使用CLASS屬性來分類元素，在樣式表中創(chuàng)建規(guī)則來引用CLASS屬性的值，然后瀏覽器自動將這些屬性應(yīng)用到該組元素。
類選擇器以標志符(句點)開頭，用于指示后面是哪種類型的選擇器。對于類選擇器，之所以選擇句點是因為在很多編程語言中它與術(shù)語"類"相關(guān)聯(lián)。翻譯成英語，標志符表示"帶有類名的元素"。
ID屬性
ID屬性的操作類似于CLASS屬性，但有一點重要的不同之處:ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設(shè)置單個元素的樣式規(guī)則。包含ID屬性的選擇器稱為ID選擇器。
需要注意的是，ID選擇器的標志符是散列符號(#)。標志符用來提醒瀏覽器接下來出現(xiàn)的是ID值。
STYLE屬性
盡管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實際上可以替代整個選擇器機制。不是只具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實際上是一個或多個CSS聲明。
通常情況下，使用CSS，設(shè)計者將把所有的樣式規(guī)則置于一個樣式表中，該樣式表位于文檔頂部的STYLE元素內(nèi)(或在外部進行鏈接)。但是，使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標記中。
3、組合選擇器類型
可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構(gòu)成更復(fù)雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類型選擇器和類選擇器，一個元素必須滿足兩個要求:它必須是正確的類型和正確的類以便使樣式規(guī)則可以作用于它。
外部信息:偽類和偽元素
在CSS1中，樣式通常是基于在HTML源代碼中出現(xiàn)的標記和屬性。對于很多設(shè)計情景而言這種做法完全可行，但是它無法實現(xiàn)設(shè)計者希望獲得的一些常見的設(shè)計效果。
設(shè)計偽類和偽元素可以實現(xiàn)其中的一些效果。這兩種機制擴充了CSS的表現(xiàn)能力。在CSS1中，使用偽類可以根據(jù)一些情況改變文檔中鏈接的樣式，如根據(jù)鏈接是否被訪問，何時被訪問以及用戶和文檔的交互方式來應(yīng)用改變。借助于偽元素，可以更改元素的第一個字母和第一行的樣式，或者添加源文檔中沒有出現(xiàn)過的元素。
偽類和偽元素都不存在于HTML;也就是說，它們在HTML代碼中是不可見的。這兩種機制都得到了精心設(shè)計以便能夠在CSS以后的版本中做進一步地擴充;也就是說實現(xiàn)更多的效果。
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標準通用標記語言的一個應(yīng)用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
重慶分公司
重慶分公司
