1.常用的CSS選擇器

1.1 標簽選擇器，用html標簽申明，如：?

? ?/*標簽選擇器*/
? ?p{
? ? ?color: red;
? ?}

1.2?類選擇器，用一個樣式類名申明，如：?

?/*類選擇器*/
?.content{
? ?? color: red;
?}

1.3 id 選擇器，用 DOM 的 id 申明，如：?

?/*id選擇器*/
?#content{
??? color: red;
?}

1.4 屬性選擇器，用 DOM 的屬性申明，屬于 CSS2，IE6 不支持，不常用，如：?

??<div title="content">this is content</div>
??<style>
??? ?/*屬性選擇器*/
??? ?[title=content]{
??? ???? color: red;
?? ? }
??</style>

除了前 3 種基本選擇器，還有一些擴展選擇器，最常用的有：?

1.5 后代選擇器，利用空格間隔，比如：

?<div>
??? ?<p>后代選擇器</p>
?</div>

?<style>
?? ? /*后代選擇器*/
? ?? div p{
????? ?? color: red;
?? ? }
?</style>

1.6 群組選擇器，利用逗號間隔，比如：

?<div>群組選擇器</div>
?<span>群組選擇器</span>
?<p>群組選擇器</p>

?<style>
?? ? /*群組選擇器*/
?? ? div,span,p{
???? ??? color: red;
??? ?}
?</style>

當然還有很多其他的選擇器，包括子元素選擇器，相鄰兄弟選擇器等等。

2.優先級?

基本原則： 一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。?

計算方法：?我們用 1 表示標簽選擇器的優先級，用 10 表示類選擇器的優先級，用 100 標示 ID 選擇器的優先級?

?#content ?.para ? p?
? /*優先級值：100+10+1 = 111*/

? div#content ? p????
? /*優先級值：1+100+1 = 102*/

? div.content ? p????
? /*優先級值：1+10+1 = 12*/

? div ? p????????????
? /*優先級值：1+1 = 2*/

3.定義順序?

看下列代碼，請問<div>標簽內的文字是什么顏色的？?

?<style>
?? ? .red{
?????? color: red;
?? ? }
?? ? .blue{
?????? color: blue;
?? ? }
?</style>
?<div class="blue red">請問字體是什么顏色？</div>

?

答案：藍色。因為最終的顯示效果跟樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，也就是.blue定義在.red后面，會將其顏色覆蓋，與在class中的使用先后順序無關。

熱門文章

原創教程

?原創教程：《ECMAScript 6 教程》

?附加習題：《ECMAScript 6 教程》測試題

?原創教程：《Vue2.0基礎教程》

?原創教程：《Vue2.0進階教程》

?附加習題：《Vue2.0基礎教程》測試題

趣味職場

?職場感悟：混口飯吃，談不上喜歡

?感到迷茫：我很努力，但依然很迷茫

?薪資待遇：那么點工資，能招到人嗎？

?培訓出身：我是一個培訓出身的程序員

?搞笑黑話：互聯網公司黑話，搞笑到爆

?職業自由：程序員職業自由的6個階段

?職場形象：在別人眼里，程序員是這樣的

免費資源

其實學好技術并不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料！

[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！

加微信:?lyn10180919?免費領取，由于領取的朋友比較多，所以加微信時一定要備注：7，否則很難通過。

總結

以上是生活随笔為你收集整理的CSS选择器必备的3个知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。