css選擇器、css的三大特性
文章目錄
- css選擇器、css的三大特性
- 一、css介紹
- 二、css選擇器
- 2.1 基本選擇器
- 2.2 組合選擇器
- 2.3 交集并集選擇器
- 2.4序列選擇器
- 2.5屬性選擇器
- 2.6偽類選擇器
- 2.7偽元素選擇器
- 三、css三大特性
- 3.1 繼承性
- 3.2 層疊性
- 3.3 優先級
一、css介紹
CSS全稱為Cascading Style Sheet層疊樣式表，是專門用來為HTML標簽添加樣式的。樣式指的是HTML標簽的顯示效果，比如換行、寬高、顏色等等。
在沒有css以前html的樣式都需要在每個標簽后面設置屬性，這樣非常的繁瑣，有了scc以后只需要完成統一的樣式設置就可以批量化的設置標簽的樣式。
css引入有四種方式：
#內行式
<p style="color:red">hello</p>#嵌入式
<head><style>p{color: red;}</style>
</head>
<body><p>hello</p>
</body>#導入式
#css文件中為p{color: red;}
<head><style>@import "css/mystyle.css";#或者@import url("css/mystyle.css");</style>
</head>
<body><p>hello</p>
</body>#外鏈式
#css文件中為p{color: red;}
<head><link rel="stylesheet" href="css/mystyle.css">
</head>
<body><p>hello</p>
</body>
導入式的方式存在一些問題：
- 導入式是css2.1特有的，對于不兼容css2.1的瀏覽器來說就是無效的
- 導入式會先加載頁面，再加載樣式，因此如果頁面內容很大，可能會先出現無樣式的頁面，隔一段時間再出現完整的頁面從而降低用戶體驗
在css中可以使用如下的方式進行注釋：
/*這是注釋*/
二、css選擇器
選擇器的目的是通過某種方式選中標簽從而完成對標簽樣式的修改。
2.1 基本選擇器
id選擇器以#開頭，p1為標簽的id名。但需要注意的是id名是唯一的，標簽的id名不能重復，因此id資源十分珍貴，一般留給js代碼使用，css樣式不推薦使用。另外id名由字母、數字、部分特殊字符組成，且不能以數字開頭，更不能是html關鍵字如p，a，img。
<!--id選擇器-->
<style>#p1{color: red;}
</style>
類選擇器以.開頭，p1為標簽的類名。類名的命名規則和id相同，一個標簽可以有多個類，例如<p class=“p1 p2”></p>。
<!--類選擇器-->
<style>.p1{color: red;}
</style>
標簽選擇器只需直接寫標簽名即可。標簽選擇器會選擇頁面所有相同類型的標簽，但是只有html的標簽才能作為標簽選擇器。
<!--標簽選擇器-->
<style>p{color: red;}
</style>
通配符選擇器可以選中頁面的所有標簽，需要注意的是通配符選擇器使用時會遍歷頁面的所有標簽，如果頁面內容非常大，會導致效率降低的問題。
<!--通配符選擇器-->
<style>*{color: red;}
</style>
2.2 組合選擇器
后代選擇器以空格作為間隔，空格前后可以是基本選擇器的任意一種。后代選擇器可以選中某個標簽的所有滿足要求的子標簽，如下代碼中后代選擇器選中的是類為p1的標簽中子標簽為p并且子標簽p中所有id為p2的子標簽。
<!--后代選擇器-->
<style>.p1 p #p2{color: red;}
</style>
相鄰選擇器以+號作為間隔，+前后可以是基本選擇器的任意一種。相鄰選擇器的作用是選擇某個標簽相鄰的下一個標簽，如下代碼中相鄰選擇器選中的是類為p1的標簽相鄰的下一個p標簽。
<!--相鄰選擇器-->
<style>.p1+p{color: red;}
</style>
下級選擇器以>作為間隔，>前后可以是基本選擇器的任意一種。下級選擇器可以選中某個標簽下一層嵌套中滿足要求的子標簽，如下代碼中下級選擇器選中的是類為p1的標簽中下一層嵌套中子標簽為p并且子標簽p中的下一層嵌套的所有id為p2的子標簽。
<!--下級選擇器-->
<style>.p1>p>#p2{color: red;}
</style>
向后選擇器以作為間隔，前后可以是基本選擇器的任意一種。向后選擇器可以選中某標簽后面所有滿足要求的標簽。如下代碼中向后選擇器選中的是類為p1的標簽后面所有的p標簽。
<!--向后選擇器-->
<style>.p1~p{color: red;}
</style>
2.3 交集并集選擇器
交集并集選擇器前后同樣可以為基本選擇器的任意一種。
交集選擇器將多個基本選擇器連在一起寫(不過有標簽選擇器的話，標簽選擇器要寫在前面)，其功能是選中滿足多個條件的標簽，如下代碼中交集選擇器選中的是標簽為p且類為p1，p2的標簽。
<!--交集選擇器-->
<style>p.p1.p2{color: red;}
</style>
并集選擇器將多個基本選擇器用,分隔寫在一塊，其功能是選中多個標簽，如下代碼中并集選擇器選中的是所有p標簽或者類為p1的標簽或者類為p2的標簽。
<!--并集選擇器-->
<style>p,.p1,.p2{color: red;}
</style>
2.4序列選擇器
序列選擇器可以加在任何基本選擇器后面作用是給基本選擇器一個篩選條件。
<!--選中所有層級中第一個且為p的標簽-->
p:first-child
<!--選中所有層級中最后一個且為p的標簽-->
p:last-child
<!--選中所有層級中正數第n個且為p的標簽-->
p:nth-child(n)
<!--選中所有層級中倒數第n個且為p的標簽-->
p:nth-last-child(n)
<!--選中所有層級中的第一個p標簽-->
p:first-of-type
<!--選中所有層級中的最后一個p標簽-->
p:last-of-type
<!--選中所有層級中正數第n個p標簽-->
p:nth-of-type(n)
<!--選中所有層級中倒數第n個p標簽-->
p:nth-last-of-type(n)
<!--選中所有層級中只有一個標簽且為p-->
p:only-child
<!--選中所有層級中只有一個p標簽-->
:only-of-type2.5屬性選擇器
屬性選擇器的地位相當于基本選擇器，可以代替上面選擇器中需要使用基本選擇器的位置。
屬性選擇器會把屬性中的內容作為字符串對其進行匹配，=表示完全匹配，*表示含有，^表示以其開頭，$表示以其結尾。
<!--選中含有class屬性的標簽-->
[class]
<!--選中class中完全匹配為p1的標簽-->
[class="p1"]
<!--選中class中含有p1字符的標簽-->
[class*="p1"]
<!--選中class中以p1字符開頭的標簽-->
[class^="p1"]
<!--選中class中以p1字符結尾的標簽-->
[class$="p1"]
<!--選中a標簽且a標簽中的href屬性以https字符開頭，這本質是a的標簽選擇器和屬性選擇器經過交集選擇器拼接在了一起-->
a[href^="https"]
2.6偽類選擇器
<!--a標簽初始狀態文字顏色為紅色-->
a:link{color: red;}
<!--a標簽被訪問過后文字顏色為藍色-->
a:visited {color: blue;}
<!--鼠標懸停a標簽上時背景顏色為綠色-->
a:hover {background-color:green;}
<!--鼠標點擊a標簽時文字顏色為黃色-->
a:active {color: yellow;}
<!--input文本框聚集時框線消失，背景顏色為粉色-->
input:focus{outline: none;background-color:pink;}
a標簽的偽類選擇器可以單獨出現，也可以一起出現，一起出現時有嚴格的順序要求：link，visited，hover，active。
hover是所有其他標簽都可以使用的，focus只給input標簽使用。
2.7偽元素選擇器
<!--選中p標簽的首個字母，常用于雜志類文字首字母的調節大小-->
p:first-letter {font-size: 48px;}
<!--p標簽內容前面插入新內容，且文本顏色為紅色-->
p:before {content: "*";color: red;}
<!--p標簽內容后面插入新內容，且文本顏色為紅色-->
p:after {content: "?";color: red;}
選擇器的組合使用示例：p .p1:first-child~#qq:last-child,div+[class]:last-child p[class$=qq]
三、css三大特性
3.1 繼承性
繼承性指子標簽可以繼承父標簽的樣式，但是只有以color、font-、text-、line-開頭的屬性才可以繼承，a標簽的文字顏色和下劃線是不能繼承別人的，h標簽的文字大小是不能繼承別人的，如果繼承則會在原來字體大小的基礎上變大。
3.2 層疊性
層疊性是指如果多個選擇器選中了同一個標簽且設置的屬性產生沖突時會有覆蓋效果。例如打開瀏覽器開發者面板時會看到有效屬性被劃掉了。
3.3 優先級
當多個選擇器選中同一標簽且設置的屬性產生沖突時，就會涉及到優先級的問題了。
優先級遵守以下的規則：
- 行內式>嵌入式和外部式(引入css文件的樣式)。
- 直接選中 > 間接選中(即繼承而來的)。
- 如果都是間接選中，那么誰離目標標簽比較近，就用誰的。
- 如果都是直接選中，并且都是同類型的選擇器，那么誰寫的在后面就用誰的。
- 如果都是直接選中，并且是不同類型的選擇器，那么id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）。
- 如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級：id數多的優先級高；id數相同，則判定類數多的優先級高；id數、class數均相同，則判定標簽數多的優先級高；若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在后面誰的優先級高。
另外可以通過important將優先級提升到最高，但是這種方法容易產生代碼難以維護的問題。
.p1{color:red !important;}
![【ETCD】[源碼閱讀]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法](http://pic.xiahunao.cn/【ETCD】[源碼閱讀]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法)
)
