CSS選擇器

標簽： a:hover first-child 和 first-of-type only-child 和 :only-of-type :nth-child(n) 和 :nth-of-type(n [attr ~=val]

本文中包含了CSS1、CSS2、CSS3選擇器，并對其中的一些自認為較難理解的地方做了注記，希望對大家有用

一、CSS1選擇器

CSS1選擇器注：

注1：為什么要LVHA

1.鼠標經過的“未訪問鏈接”同時擁有a:link、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；

2.鼠標經過的“已訪問鏈接”同時擁有a:visited、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；

所以說，a:hover定義一定要放在a:link、a:visited的后面。再重復一遍正確的順序是：a:link、a:visited、a:hover、a:active .

注2：在谷歌瀏覽器中，a標簽的herf中有內容時，a:link{color:blue}才有效，因為a:link會對擁有href=“ ”，即擁有實際鏈接地址的a對象發生效果。

二、CSS2選擇器

注1：

[target = _black],選擇有target屬性并且屬性值是_black,沒有其他值

例如：
   [title=demo]{
    background: yellow;
    } 
   <p title="demo">p1</p>  //有效
   <p title="demo demo11">p2</p>  //無效，title多了demo11這個值，若換成注2中的方法就可以了

注2：

[title ~= demo]{
    background: yellow;
}
<p title="demo demo1">p1</p>  //有效
<p title="demo22">p2</p> //無效，[title ~= demo]是說title屬性包含demo這個詞，屬性值之間用空格分隔的單詞,demo22就不是demo這個詞了，盡管包含demo，所以上面表格中說的包含單詞demo需要理解清楚。

三、CSS3選擇器

注1：first-child 和 first-of-type

CSS2選擇器中有個：first-child

div:first-child{ background-color: red; }//無效，因為<div>1</div>并不是body元素的第一個子元素
<body>
 0
 <div>1</div>
 <div>2</div>
 <div>3</div>
</body>

CSS3選擇器中有個：first-of-type

div:first-of-type{/*改*/ background-color: red; }//有效，因為<div>1</div>是body元素的子元素中所有div的第一個

同理：last-child和last-of-type一樣

注2：:only-child 和 :only-of-type

<body>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 4
</body>

p:only-child { //無效，p不是body的唯一子p元素
background: red;
}

p:only-of-type{//有效，p是body的唯一一個p子元素
background: red;
}

注3：:nth-child(n) 和 :nth-of-type(n)

<body>
 <div>1</div>
 <div>2</div>
 3
 <div>4</div>
 5
</body>

body p:nth-child(2){ background: red; }//無效，body中第二個元素是<div>2</div>，不是p元素，此選擇器無效。

補充：關于body p:nth-child(2)，如果body中的第二個元素是p元素則有效，如果不是p元素，則無效；若是body :nth-child(2)，則選中body中第二個元素。

body p:nth-of-type(2){ background: red; }//有效，效果如下圖，因為5是body中第二個p元素

同理 :nth-last-child(n)和:nth-last-of-type(n)一樣

注4：根元素選擇器
:root這個選擇器沒什么意思，和你直接使用html一樣
:root {...}
html {...}

其他內容，詳見https://blog.csdn.net/q1056843325/article/details/53189526

本文鏈接：https://blog.csdn.net/wangchaohpu/article/details/82413850

智能推薦

css選擇器

標簽選擇器類別選擇器 id選擇器 id選擇器與類別選擇器的區別：id 屬性只能在每個 HTML 文檔中出現一次。嵌套聲明集體聲明全局聲明（選擇所有元素）混合...

CSS選擇器

1. 通用選擇器代碼： * 示例代碼：*{} 說明：選擇所有元素。實例：運行結果： 2.標簽選擇器代碼：元素名稱示例代碼：p{} 說明：根據標簽選擇元素。實例：運行結果： 3. 類選擇器代碼： .<類名> 示例代碼：.color{} 說明：根據class的值選擇元素。實例：運行結果： 4.Id選擇器代碼： #<id值> 示例代碼： #color{} ...

css選擇器

css選擇器簡單總結元素選擇器 : 元素名稱 {css樣式} 后代選擇器 : 父元素與子元素用空格連接子元素選擇器：用 > 連接父元素和子元素分組選擇器 : 具有相同樣式的元素常常分為一組，用 , 連接類選擇器 : 用 . 接className表示類選擇器屬性選擇器 : 兄弟選擇器 : 用 + 連接兩個相鄰的元素,表示選擇緊跟在 broElement1 后面的所有 broEle...

CSS選擇器

什么是選擇器？每一條CSS樣式聲明（定義）由兩部分組成，形式如下：選擇器，說白了就是用一種方式把你想要的哪一個標簽選中! 標簽選擇器標簽選擇器其實就是html代碼中的標簽。例如：類選擇器類選擇器在CSS樣式編碼中是最常用到的。語法：注意：英文圓點開頭其中類選擇器可以任意起名 ID選擇器在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區別：為標簽設置id＝＂ID名稱＂，...

css選擇器

CSS基礎選擇器一共4種： CSS高級（選擇器組合）選擇器：子元素選擇器實例：...

CSS選擇器

智能推薦

猜你喜歡