通過標籤名選中元素。
語法： 標籤名 {}
不管標籤巢狀多深，都可以通過標籤名查詢到。
1 p
4 5
6 7
8 9 內部深層的
p10
11
12
13
14 用途：清除，重置預設樣式
1 /*用途：重置，清除預設樣式
*/2 a
6 ul
通過id名選中元素
語法：#id名（#
和id名緊緊書寫）
id名命名規則：
html
嚴格區分大小寫，必須以字母開頭，後面可以有數字，下劃線，短橫。
id名是唯一的，不管是不是相同的標籤只有出現一次該id
名1 #para-_1
一般情況我們不使用id
設定樣式。
通過類名選中元素。
給元素新增class
屬性.類名 {}
類名命名規則和id
名一樣。
同乙個元素可以被不同選擇器選中（id選擇器設定字型大小，類選擇器設定文字顏色）設定不同的樣式屬性，這些屬性都會載入在元素身上。
層疊性體現（疊加）：同乙個元素被不同選擇器選中，設定不同的樣式，會同時載入。
同乙個元素可以設定多個類名，類名之間用空格隔開。
多個元素可以同時有相同類名。
1 段落
類名特殊應用：原子類（我們可以將一些常用屬性，設定為原子類，一般原子類只乙個屬性，便於樣式設定）
1 1用途：相同樣式的元素，新增同乙個類名（類名上樣式）
萬用字元可以選中頁面上所有的標籤（包括body
）。用途：練習階段使用萬用字元快速清除預設樣式。
1 *
高階選擇器是在基礎選擇器上延伸
通過巢狀關係進行選擇，一般通過標籤或者類選擇器確定大範圍，在大範圍內再次選擇。
語法：每一層選擇器用空格隔開
1 div p
後代選擇器不但可以選中兒子，還可以選中孫子等所有的後代元素。
1 .box h3
4 5
6 7
89
10
11
12 一般我們在使用後代選擇器是，將每一層祖先補全，精確選擇。
1 /*一般要求補全每一層祖先
*/2 .box div p
5 6
7 我是p標籤
8 9
.box p {}一樣會選中下面的結構
1 2
3 我是p標籤
4 5
6 7
8 我是p標籤
9 10
不管怎麼，一定在書寫選擇器時有對應的結構。
11 12
13 我是p標籤
14
1 1 .box div p
2 3
4 我是p標籤
5 6
同時選中兩個選擇器都具有的元素。
語法：連續書寫選擇器，不要新增任何空格（和後代選擇器進行區分）
1 p.para
4 p5
6 我是p
特殊7
交集選擇器可以連續交集（選擇器可以書寫多個）
1 /*可以連續交集
*/2 p.para.fs
交集選擇器可以不是標籤選擇器開頭
1 .para.fs {} //合法
2 #para.fs {} //不合法，
id選擇器可以唯一選中元素
同時設定多個選擇器相同的樣式。
語法：逗號隔開每乙個選擇器
1 div, h3, p
類選擇器也可以使用並集
1 .box, .para, .fs
css繼承性：元素可以從祖先繼承文字屬性，不能繼承盒子屬性
祖先設定文字屬性後代元素都將繼承這些文字屬性。
1 文字屬性：color, font
系列,line
系列，text
系列等2 盒子屬性（不能繼承）：width,height,background
系列，border,
浮動，等
css乙個比較好性質，可以將一些文字屬性給祖先設定，他的後代都將繼承這些文字屬性，簡化**。
1 body
層疊性體現：繼承性
1 div
同乙個元素被不同選擇器選中，設定相同樣式，會如何顯示？
層疊性：同乙個元素被不同選擇器選中，設定相同樣式，權重大的會層疊掉權重小的。
1 div class="box" id="box">盒子
2 /*同乙個元素被不同選擇器選中
div .box #box
同時設定文字顏色，會如何渲染
*/3 div
7 #box
10 .box
權重：元素選擇器針對性越強，權重就越大。
id選擇器 》類選擇器 》 標籤選擇器
1id = 255類
1類 = 255
標籤①選中元素，計算該元素的權重。
選中元素，計算權重，只需要看id
數量，類的數量，標籤數量。先比較
id選擇器的數量，
id數量多的權重最大；如果
id數量相同，比較類的數量，類的數量多的權重就大；如果類的數量還相同就比較標籤的數量，標籤數量多的權重最大；如果標籤數量還相同，直接看書寫順序，誰的樣式在最後就顯示誰的樣式。
1 .box1 .box2 #box3 p
5 /*選擇器數量都相同，後面的樣式層疊掉前面的
*/6 #box1 .box2 .box3 p
②元素沒有被選中，該元素權重是0.
樣式看繼承性（html結構距離近的優先渲染）就近原則
1 body
5 #box1
8 .box3
如果距離相同，看選擇器權重（依次比較該選擇器id,
類，標籤選擇器數量）
1 .box1 .box2
5 #box1 .box2
如果距離相同，選擇器數量還相同，看css
書寫順序
1 .box1 #box2
4 /*數量相同，看
css順序
*/5 #box1 .box2
語法：書寫在屬性值後面新增空格 !important
分號結束
作用：可以提高選中元素單個屬性的權重最大。而不是提高整個選擇器的權重
important不影響就近原則。
1 /*元素沒有被選中
*/2 body
6 .box
CSS及其多種選擇器
昨天博文快結束的時候我展示了css的 結構和css的乙個樣式選擇器 標籤選擇器 其功能為 根據標籤名稱定義所有將要使用的這種標籤都採用定義的樣式。其格式為 標籤名 今天我將展示css其他的選擇器 類選擇器，id選擇器，後代選擇器，分組選擇器，通配選擇器及其他們的優先順序。每乙個標籤都可以有乙個cla...
CSS的簡介及其選擇器
基本語法檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視css的效果 檢視css的效果 檢視css的效果 zhangsan 23 選擇所有標籤1.未連線 a link 2.已經訪問鏈結 a visited...
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...