CSS符合選擇器
交集選擇器
交集選擇器使用的方法是HTML標簽+類選擇器，具體的表現(xiàn)形式如下：p.one 其中p是HTML中的<p>的標簽，.one是類選擇器的書寫形式，使用<p class="one">123</p>。
交集選擇器,相交的部分就是要設(shè)置屬性值的標簽,即使用相交選擇器，會覆蓋掉原有的屬性值：
1,格式:
選擇器1選擇器2...{
屬性:值;
}
2,注意點:
(1),選擇器之間沒有任何的連接符號
(2),選擇器可以是標簽名稱,也可以是id、class名稱
(3),交集選擇器僅僅是了解
并集選擇器
多個選擇器用逗號分隔，所有的選擇器都能實現(xiàn)后面的樣式，例如：a , p , .one , #id {}
并集選擇器
1,格式:
選擇器1,選擇器2,...{
屬性:值;
}
2,注意點:
(1),選擇器之間利用,連接
(2),選擇器可以是標簽名稱,也可以是id、class名稱
兄弟選擇器
+選擇器
如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。~ 選擇器
作用是查找某一個指定元素的后面的所有兄弟結(jié)點。
注意二者都是兄弟選擇器，前者作用的是后一個元素，后者作用的是后面的所有兄弟元素，二者都有相同的父元素。
兄弟選擇器,只選中同級的標簽
1, 相鄰兄弟兄弟選擇(css2)
格式:
選擇器1+選擇器2{
屬性:值;
}
注意點:
(1),相鄰選擇器必須用+鏈接
(2),相鄰選擇器只能選中緊跟后邊的那個標簽,不能選中被隔開的標簽
2, 通用兄弟選擇器(css3),指定選擇器后邊特定的所有選擇器都被選中
選擇器1~選擇器2{屬性:值;}
后代選擇器
外層的標簽寫在前面,內(nèi)層標簽寫在后面 ,示例如下:
div p {} 解釋 : div 標簽中 有 p標簽 比如 : <div> <p> </p> </div>
可以在前面加上類或者ID選擇器, 只要標簽上有該class 或者id屬性 ,選擇器的嵌套盡量不超過三級 。
子元素選擇器
語法: .nav > li 大于號前后用空格分開, 表示只選擇第一層的子元素 ,如 .nav > li 只選擇 .nav下的li元素, li 下的 元素不選擇 <ul class="nav" ><li> </li> </ul>
PS:實驗發(fā)現(xiàn),如果不借助 class的屬性, 即父元素是類選擇器, 而是使用ul 即 ul > li 則會連第三層也選擇上．
屬性選擇器
選擇具有特殊屬性的標簽
- a[title] {} 選擇 a標簽中有title屬性的進行樣式的改變
- input[type=text] {} 選擇有特殊屬性,并且特殊屬性的值與給出值一樣的進行樣式改變
- div[class^=font] {} ^= 表示以等號后面的值為開頭的值的選擇出來,進行css樣式改變
- div[class
= 表示將等號后面的值作為結(jié)尾的標簽選擇出來
- div[class*=tao] {} *= 表示將等號后面的值,有與之匹配的找出來,不管哪個位置
上述的前提是有該屬性的標簽,并且標簽中的屬性的值與上述相同的值
偽元素選擇器
語法:E::first-letter 解釋: E表示標簽 ,主要有以下幾種:
- E::first-letter 表示第一個單詞
- E::first-line 表示第一行
- E::selection 選中文字后,文字的變換, 比如字體顏色的改變
- E::before E::after 花括號中必須有 content屬性 .在盒子的內(nèi)部的前面或后面放內(nèi)容
簡單使用: div::before { content: "a" ;} <div> bc</div> 頁面輸出結(jié)果為 abc
參考：
https://blog.csdn.net/Pruett/article/details/77912878
https://blog.csdn.net/u014291497/article/details/50482874
https://blog.csdn.net/qq_21826709/article/details/80482550
