派生選擇器可以使一個元素里的子元素定義樣式例如：li
甘谷ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
a
{
font-size:14px}
就是給li下的子元素a定義一個14px號像素的字體樣式
類別選擇器在html中引入css樣式通常由，類別選擇器在CSS中用一個“.”點開頭表示如：.box
{width:960px;
margin:0
auto;
padding:0px;
overflow:hidden}
在html頁面中，用class="類別名"的方法調(diào)用：div
class="box"這里是內(nèi)容/div
類別選擇器方法比較簡單靈活，可以隨時根據(jù)頁面的需求新建和刪除
還有，id選擇器在CSS中用“#”號開頭表示如：#box
{width:960px;
margin:0
auto;
padding:0px;
overflow:hidden}
在html頁面中，用id="類別名"的方法調(diào)用：div
id="box"這里是內(nèi)容/divid選擇器和類別選擇器其實是一樣的通常id選擇器僅是用來表示不重復(fù)的樣式相對的來說，類別選擇器靈活一些，而id選擇器僅表示重要的樣式字段
最常用的四種選擇器是：元素選擇器、類選擇器、ID選擇器、派生選擇器
1、元素選擇器
最常見的css選擇器當(dāng)屬元素選擇器了，在HTML文檔中該選擇器通常是指某種HTML元素，例如：p,h2,span,a,div乃至html。
例如：
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
以上css代碼會對整個文檔添加黑色背景；將所有p元素字體大小設(shè)置為30像素同時添加灰色背景；對文檔中所有h2元素添加紅色背景。
通過上面的例子也可以看出css的基本規(guī)則結(jié)構(gòu)：由選擇器和聲明塊組成。每個聲明塊中包含一個或多個聲明。每個聲明的格式為：屬性名 ： 屬性值。如下圖所示：
每條聲明以分號”;”結(jié)尾。如果在一個聲明中使用了不正確的屬性值，或者不正確的屬性，則該條聲明會被忽略掉。另外請注意不要忘記每條聲明后面的分號。
我們也可以同時對多個html元素進行聲明：
h1, h2, h3, h4, h5, h6, p {font-family: 黑體;}
這樣會將文檔中所有的h1~h6以及p元素字體設(shè)置為”黑體”。如果我們希望一鍋粥地選取所有的元素，可以使用通配符”*”： * { font-size: 20px;}
這樣所有的元素都將被選中，雖然font-size屬性對于某些元素是無效的，那么它將被忽略。
2、類選擇器
(1)單類選擇器
單純的元素選擇器似乎還過于粗糙了，比如我們希望在文檔中突出加粗顯示某種重要的內(nèi)容，例如稿件的截至日期。問題在于我們不能確定稿件的截至日期將會出現(xiàn)在哪種元素中，或者它可能出現(xiàn)在多種不同的元素中。這個時候，我們可以考慮使用類選擇器(class selector)。
要使用類選擇器我們需要首先對文件元素添加一個class屬性，比如截至日期可能會出現(xiàn)在以下元素中:
p class="deadline".../p
h2 class="deadline".../h2
這樣我們就可以用以下方式使用類選擇器了：
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的元素字體設(shè)置為紅色，同時會對span元素中的文本添加額外的斜體效果。這樣，如果你希望某處文本擁有額外的斜體效果將它們放在span/span中就可以了。
(2)多類選擇器
在實踐的做法中，元素的calss屬性可能不止包含一個單詞，而是一串單詞，各個單詞之間用空格隔開。
比如某些元素包含一個”warning”類，某些元素包含一個”important”類，某些元素同時包含”warning important”類。屬性名出現(xiàn)的順序沒有關(guān)系：
class = "warning important"
class = "important warning"
以上2者是等價的。我們希望包含warning類的元素有一個醒目的紅色字體，包含important屬性的元素有一個加粗的字體顯示，而同時包含以上2中屬性的元素另外擁有一個藍色背景(不管還能不能看清文字了)，我們可以使用以下的css代碼：
.warning { color: red;}
.important { font-weight: bold;}
.warning.important { background: blue;}
當(dāng)然，第三條你也可以寫成： .important.warning { background: blue;} 和詞序沒有關(guān)系。說明一下，.warning會匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。而.important.warning會匹配所有同時包含以上2種屬性的元素，不管該元素還包含多少其他的類，也不管他們在類列表中出現(xiàn)的順序，只要其中含有這2個屬性，則會被選擇進來！
同樣地，多于多類選擇器，在前面加上元素名，則會匹配包含指定類名的指定元素，例如：p.warning.important {}
將會匹配同時包含warning和important屬性的p元素，其他同樣包含以上2類的元素則不會被選中。
3、ID選擇器
ID選擇器和類選擇器有些類似，但是差別又十分顯著。首先一個元素不能像類屬性一樣擁有多個類，一個元素只能擁有一個唯一的ID屬性。其次一個ID值在一個HTML文檔中只能出現(xiàn)一次，也就是一個ID只能唯一標(biāo)識一個元素(不是一類元素，而是一個元素)。類似類屬性，在使用ID選擇器前首先要在元素中添加ID屬性，例如：
p id="top-para".../p
p id="foot-para".../p
使用ID選擇器的方法為井號”#”后面跟id值?，F(xiàn)在我們使用id選擇器選擇以上2個p元素如：
#top-para {} #foot-para {}；
這樣我們就可以對以上2個段落進行需要的操作了。正因為ID選擇器的唯一性，也使其用法變得相對簡單。
4、屬性選擇器
屬性選擇器在css2中引入，使我們可以根據(jù)元素的屬性及屬性值來選擇元素。下面分別來說明：
(1)簡單屬性選擇器
簡單的屬性選擇器可以使我們根據(jù)一個元素是否包含某個屬性來做出選擇。使用方法為: 元素名[屬性名] 或 *[屬性名]。比如我們希望選擇帶有alt屬性的所有img元素： img[alt] { ...}
選擇帶有title屬性的所有元素：*[title] { ...}。同類選擇器類似，我們也可以根據(jù)多個屬性信息進行選擇，例如同時擁有href和title的a元素：
a[href][title] { ...}
組合使用類選擇器使我們的選擇更加富于靈活性。
(2)具體屬性值選擇器
如果我們希望更加精確地根據(jù)屬性值來選擇元素，我們可以在簡單的屬性選擇器中指定屬性的值。最簡單的我們希望找到href屬性值為的錨元素：
a[href=""] { font-weight: bold;}
要特別注意的是，這里的具體值匹配實質(zhì)上是一個字符串匹配，所以在這里對于class屬性而言，詞條的順序是有關(guān)系的。
p[class="warning important"] { ...}
將不會匹配到p class="important warning"/p，也不會匹配到p class="warning important mini-type"，這里就是一個生硬的字符串匹配。
另外，想要同時匹配多個屬性的值也是可以的：
p[class="warning"][title="para"] { ...}
將匹配到類為warning(僅有warning)，title屬性為para的p元素。
(3)部分屬性值選擇器
根據(jù)屬性值來匹配元素?zé)o疑比簡單的屬性匹配更加精細化了，但是似乎有些精細化過頭了，字符串的完全匹配顯得過于生硬。比如我們希望選擇在一串屬性值中出現(xiàn)了某個關(guān)鍵字的元素，不妨再次以class屬性為例，我們希望選擇所有包含了warning類的p元素，屬性值匹配將無法做到，好在還是有辦法的，我們可以使用以下的部分值匹配選擇器：
p[class~="warning"] { ...}
該選擇器在等號”=”前面添加了一個波浪號~，含義為包含后面的字串的匹配。以上代碼將會選擇所有class屬性中包含”warning”的p元素。為了更加清楚地說明問題，它和以下的選擇器是等價的：
p.warning { ...}
當(dāng)然~=不僅僅只是用在class屬性上，這只是一個示例。
再比如說，我們的文檔中包含一系列人物介紹的div元素：
div title="intro 1".../div
div title="intro 2".../div
div title="intro 3".../div
我們可以使用以下的方式選擇所有人物簡介div：div[title~="intro"] { ...}
不過遺憾的是div title="animal intro"也將會被選擇進來，這是需要我們特別注意的地方。
關(guān)于部分值選擇器也有其局限性，它匹配的是由空格分隔的單詞，如果我們將上面的div寫成下面的樣子就會匹配失?。?/p>
div title="intro-1".../div
div title="intro-2".../div
div title="intro-3".../div
對于這種情況，我們可以使用子串匹配屬性選擇器。規(guī)則如下：
l div[title^="intro"] {...} //title以intro開頭的div元素
l div[title$="intro"] {...} //title以intro結(jié)尾的div元素
l div[title*="intro"] {...} //title中包含"intro"子串的div元素
舉例來說：
a[href*="google."] {...}
將包含所有鏈接中包含”google.”的a元素。
div[title$="y"] {...}
將包含以下所有div元素：
div title="cloudy".../div
div title="snowy".../div
div title="rainy".../div
可以看出部分值屬性選擇器的功能是十分強大的。
5、派生選擇器
派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文檔DOM結(jié)構(gòu)來進行css選擇的。DOM結(jié)構(gòu)在此不再贅述了，但為了更加清楚地說明問題，我們這里給出一個DOM樹作為參考：
(1)后代選擇器(descendant selector)
如上圖，如果想要選擇body元素的所有l(wèi)i子元素，方法如下：
body li { ...}
這里會選擇所有的li后代，也就是圖中的body下的所有l(wèi)i，不論他們之間相隔的代數(shù)有多少。同理，如果想要選擇h1元素下的span，可以使用以下代碼：
h1 span { ...}
如果我們要選擇擁有warning類的元素的li后代，可以使用下面的方法：.warning li { ...}
當(dāng)然，如果希望只選擇擁有warning類的div元素的li后代，可以寫作：div.warning li { ...}
由上面的例子不難看出，后代選擇器的規(guī)則就是用空格連接2個或多個選擇器。空格的含義為：…的后代。多個選擇器的情況如下： ul li li { ...}
這樣，就會選擇所有ul下包含在li元素下的所有l(wèi)i元素了，聽起來十分拗口，參考我們的DOM樹，會選擇到文檔樹種最后一排li元素。
(2)子元素選擇器(child selector)
子元素選擇器和后代選擇器不同，它只能選擇某元素的直接后代，不能跨代選取，用法如下：ul li { ...}
兩個子元素中間用一個大于號連接。上面的代碼會選擇到所有ul元素的直接li子元素。對應(yīng)到DOM樹中，所有的li元素都會被選中，原因是圖中所有的li元素都是ul的子元素。
但是，以下代碼將不會選中任何元素：h1 span { ...}
由于span是h1的”孫子元素”，h1沒有直接的span子元素，因而上面的代碼將不會選到任何結(jié)果。其他方面和后代元素類似，需要特別注意的就是子元素選擇器不能隔代選取。
(3)相鄰兄弟選擇器(Adjacent sibling selector)
相鄰兄弟選擇器，故名思意將會選取某個元素的相鄰兄弟元素，注意它選取的是相鄰的兄弟元素而不是所有的兄弟元素，實際上選取的是緊跟在后面的兄弟元素。
相鄰兄弟選擇器在實踐中有比較不錯的應(yīng)用，例如，你想在一個h2標(biāo)題后面的段落應(yīng)用某種獨到的樣式或者希望在某類p段落后的table上添加一個額外的邊距等等。它的用法如下：
li + li { ...}
以上代碼會選擇所有作為li相鄰元素的li元素，聽起來又有點拗口，參考DOM樹，它會選擇除了排在第一個li元素的其余4個li元素，因為2個排在第1的li元素沒有更靠前的兄弟元素來選擇它。
再比如：h1 + p { ...} 會選擇所有緊跟h1后面的p兄弟元素。h1.warning + p { ...} 會選擇所有有用warning類的h1元素后面緊跟的p兄弟元素。
(4)幾種派生選擇器的結(jié)合使用
實際上，以上介紹的幾種派生選擇器可以結(jié)合使用，看下面的例子：
html body li.warning + li { ...}
上面的選擇器含義為：html元素的body子元素中，所有擁有warning類的li元素的相鄰兄弟元素。
如何給某一個元素添加樣式呢，我們可以通過標(biāo)簽選擇器、類選擇器或者id選擇器。
首先我們先放置兩個div和一個無序列表來舉例，注意無序列表的第二項內(nèi)還有一個div
標(biāo)簽選擇器就是按標(biāo)簽添加樣式，直接輸入標(biāo)簽，后加大括號即可。
如下我們給div都加一個100px的寬高，10px的上外邊距，背景顏色為粉色的樣式。
可以看到所有的div都被添加了這個樣式，不管是在哪一層，只要是div，全部都會被添加這個樣式。
類選擇器則是根據(jù)class名來添加樣式，接下來給剛剛的元素添加上類名。 同一個標(biāo)簽可以有多個類名，用空格分離；同一個類名也可以被添加給不同的標(biāo)簽。
使用類選擇器時候要在類名前加一個 點"." ，再接大括號。
當(dāng)我們給test_1設(shè)置樣式時，發(fā)現(xiàn)所有寫了class="test_1"的標(biāo)簽都被添加了樣式，不管它是什么標(biāo)簽。
我們把test_1改成test_2，發(fā)現(xiàn)所有寫了class="test_2"的標(biāo)簽都被添加了樣式。
id選擇器也很好理解，就是根據(jù)id來添加樣式，id名前使用井號"#"。
但是要注意id和class不同， id就像身份證號一樣是唯一的，一個id在一個頁面里只能使用一次。 所以一個標(biāo)簽只能有一個id，一個id只能給一個標(biāo)簽添加。
我們給剛剛的標(biāo)簽加上id，給id為d3的標(biāo)簽添加樣式：
選擇器部分文章：
選擇器介紹（一）標(biāo)簽選擇器、id選擇器、類選擇器
選擇器介紹（二）后代選擇器，子代選擇器，交集選擇器，并集（群組）選擇器
通配符選擇器清除瀏覽器默認樣式
CSS選擇器就是指定CSS要作用的標(biāo)簽，那個標(biāo)簽的名稱就是選擇器。意為：選擇哪個容器。
CSS選擇器分類：
標(biāo)簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器
1、html標(biāo)簽選擇器：
定義：以html標(biāo)簽作為選擇器
2、class類選擇器：
定義：為HTML標(biāo)簽添加class屬性，通過類選擇器來為具有此class屬性的元素設(shè)置css樣式。
類選擇器也可以對不同類型元素的同一個名稱的類選擇器設(shè)置不同的樣式規(guī)則：
同一個元素可以設(shè)置多個類，之間用空格隔開：
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)過某個元素時；
:active 用于一個元素被激活時（即按下鼠標(biāo)之后放開鼠標(biāo)之前的狀態(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
標(biāo)簽
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ù)。陪有夢想的人一起成長！
重慶分公司
重慶分公司
