CSS Selectors 選擇器（選擇符）

選擇器

元素選擇符
關系選擇符
屬性選擇符
偽類選擇符
偽對象選擇符

一、元素選擇符

通配選擇符 (*):選擇所有對象
通常不建議使用通配選擇符，因為它會遍歷并命中文檔中所有的元素，出于性能考慮，需酌情使用

*{ margin: 0; padding: 0 }

類型選擇符(E):以文檔語言對象類型作為選擇符

p{ font-size: 15px}

ID選擇符(E#id):以唯一標識符id屬性等于myid的E對象作為選擇符

<style>
p#content {
    font-size: 15px;
}
</style>
<body>
<h1 id="subtitle">標題</h1>
<p id="content">正文內容</p>
</body>

類選擇符(E.class):以class屬性包含myclass的E對象作為選擇符
不同于ID選擇符的唯一性，類選擇符可以同時定義多個

.a { color: #666; }
.b { font-weight: 700; } 
<div class="a b">給某個div元素定義.a和.b兩個類,類名中間空格</div>

多類選擇符，選中同時擁有.a和.b兩個類的元素

.a.b { color: #666; } 
<div class="a b">多類選擇符使用方法</div>

二、關系選擇符

包含選擇符(E F):選擇所有被E元素包含的F元素。
與子選擇符不同的是，包含選擇符將會命中所有符合條件的后代，包括兒子，孫子，孫子的孫子

<style>
 /* 包含選擇符(E F) */ 
.demo div { border:1px solid red; }
 /* 子選擇符(E>F) */
 .demo > div { border:1px solid blue; } 
</style> 
  <div class="demo">
     <div>0 
       <div>1</div>
       <div>2</div>
       <div>3</div> 
  </div> 
</div>
如果使用.demo div，那么 0, 1, 2, 3 都有有邊框；
如果使用 .demo > div，那么只有 0 有邊框，即只有子元素會被命中

子選擇符(E>F):選擇所有作為E元素的子元素F。
子選擇符只能命中子元素，而不能命中孫輩

.demo > div { position: relative; } 
<div class="demo"> 
  <div class="a"> 
    <div class="b">子選擇符</div> 
  </div>
</div>
只有 .a 會被命中，因為它是 .demo 的子元素

相鄰選擇符(E+F):選擇緊貼在E元素之后F元素。
與兄弟選擇符不同的是，相鄰選擇符只會命中符合條件的 相鄰的兄弟元素

<style>
 /* 相鄰選擇符(E+F) */
  p+p{color:red;}
  /* 兄弟選擇符(E~F) */ 
  p~p{color:red;}
</style>
<p>p1</p>
<p>p2</p>
<h3>這是一個標題</h3>
<p>p3</p> 
<h3>這是一個標題</h3>
<p>p4</p> 
<p>p5</p>
如果使用p + p{color:red;}，那么p2, p5將會變成紅色；
如果使用p ~ p{color:red;}，那么p2,p3,p4,p5將會變成紅色

兄弟選擇符(E~F):選擇E元素后面的所有兄弟元素F。(CSS3)
兄弟選擇符會命中所有符合條件的兄弟元素，而不強制是緊鄰的元素

<style>
 /* 相鄰選擇符(E+F) */
  p+p{color:red;}
  /* 兄弟選擇符(E~F) */ 
  p~p{color:red;}
</style>
<p>p1</p>
<p>p2</p>
<h3>這是一個標題</h3>
<p>p3</p> 
<h3>這是一個標題</h3>
<p>p4</p> 
<p>p5</p>
如果使用p + p{color:red;}，那么p2, p5將會變成紅色；
如果使用p ~ p{color:red;}，那么p2,p3,p4,p5將會變成紅色

三、CSS Attribute Selectors 屬性選擇符

E[att] { styleRules }: 選擇具有att屬性的E元素。

<style> 
  img[alt]{
     margin: 10px; 
  } 
</style>
<img src="圖片url" alt="" /> 
<img src="圖片url" />
選中第一張圖片，因為匹配到了alt屬性

E[att="val"]：選擇具有att屬性且屬性值等于val的E元素。

    <style>
    input[type="text"] {
        border: 2px solid #000;
    }
    </style>
    <input type="text" />
    <input type="submit" />
將會選中第一個input，因為匹配到了alt屬性，并且屬性值為text

E[att~="val"]：選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等于val的E元素（包含只有一個值且該值等于val的情況）。

    <style>
    div[class~="a"] {
        border: 2px solid #000;
    }
    </style>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="a b">3</div>
將會選中1, 3兩個div，因為匹配到了class屬性，且屬性值中有一個值為a

E[att^="val"]：選擇具有att屬性且屬性值為以val開頭的字符串的E元素。

    <style>
    div[class^="a"] {
        border: 2px solid #000;
    }
    </style>
    <div class="abc">1</div>
    <div class="acb">2</div>
    <div class="bac">3</div>
選中1, 2兩個div，因為匹配到了class屬性，且屬性值以a開頭

E[att$="val"]：選擇具有att屬性且屬性值為以val結尾的字符串的E元素。

    <style>
    div[class$="c"] {
        border: 2px solid red;
    }
    </style>
    <div class="abc">1</div>
    <div class="acb">2</div>
    <div class="bac">3</div>
選中1, 3兩個div，因為匹配到了class屬性，且屬性值以c結尾

E[att="val"]：選擇具有att屬性且屬性值為包含val的字符串*的E元素。

    <style>
    div[class*="b"] {
        border: 2px solid #000;
    }
    </style>

    <div class="abc">1</div>
    <div class="acb">2</div>
    <div class="bac">3</div>
所有div，因為匹配到了class屬性，且屬性值中都包含了b

E[att|="val"]：選擇具有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素，如果屬性值僅為val，也將被選擇

    <style>
    div[class|="a"] {
        border: 2px solid #000;
    }
    </style>
    <div class="a-test">1</div>
    <div class="b-test">2</div>
    <div class="c-test">3</div>
   <div class="a-">4</div>
選中第1個div，因為匹配到了class屬性，且屬性值以緊跟著"-"的a開頭
選中第4個div，因為匹配到了class屬性，且屬性值僅為val

四、CSS Pseudo-Classes Selectors 偽類選擇符

E:link ：設置超鏈接a在未被訪問前的樣式
如果需要給超鏈接定義：訪問前，鼠標懸停，當前被點擊，已訪問這4種偽類效果，而又沒有按照一致的書寫順序，不同的瀏覽器可能會有不同的表現
超鏈接的4種狀態，需要有特定的書寫順序才能生效。

    a:link { }
    a:visited { }
    a:hover { }
    a:active { }
注意，a:hover 必須位于 a:link 和 a:visited 之后，a:active 必須位于 a:hover 之后
可靠的順序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜歡(love)和討厭(hate)兩個詞來概括

E:visited ：設置超鏈接a在其鏈接地址已被訪問過時的樣式。
E:hover：設置元素在其鼠標懸停時的樣式。
E:active ：設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。
E:focus ：設置對象在成為輸入焦點（該對象的onfocus事件發生）時的樣式。
webkit內核瀏覽器會默認給:focus狀態的元素加上outline的樣式

<style>
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
input:focus {
    color: #f60;
    border: 1px solid #f60;
    outline: none;//取消默認的邊框樣式
}
</style>body>
<h1>請聚焦到以下輸入框</h1>
<form action="#">
    <ul>
        <li><input value="姓名" /></li>
        <li><input value="單位" /></li>
        <li><input value="年齡" /></li>
        <li><input value="職業" /></li>
    </ul>
</form>
</body>

E:lang(fr)：匹配使用特殊語言的E元素。

<style>
p:lang(zh-cmn-Hans) {
    color: red;
}
p:lang(en) {
    color: green;
}
</style><body>
<p lang="zh-cmn-Hans">測試文字</p>
<p lang="en">english</p>
</body>

E:not(s) ：否定偽類選擇符，匹配不含有s選擇符的元素E s是選擇符
有了這個選擇符，那么你將可以很好的處理類似這樣的場景：假定有個列表，每個列表項都有一條底邊線，但是最后一項不需要底邊線

    li:not(:last-child) {
        border-bottom: 1px solid #ddd;
    }
給該列表中除最后一項外的所有列表項加一條底邊線

<style>
p:not(.abc) {
    color: #f00;
}
</style><body>
<p class="abc">否定偽類選擇符 E:not(s)</p>
<p id="abc">否定偽類選擇符 E:not(s)</p>
<p class="abcd">否定偽類選擇符 E:not(s)</p>
<p>否定偽類選擇符 E:not(s)</p>
</body>
class=“abc”的第一行未選中

E:root 匹配E元素在文檔的根元素。在HTML中，根元素永遠是HTML
E:first-child：匹配父元素的第一個子元素E。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素

    <ul>
        <li>列表項一</li>
        <li>列表項二</li>
        <li>列表項三</li>
        <li>列表項四</li>
    </ul>
如果我們要設置第一個li的樣式，那么代碼應該寫成 li:first-child{ }，
而不是 ul:first-child{ }。

E必須是它的兄弟元素中的第一個元素，換言之，E必須是父元素的第一個子元素

  p:first-child{color:red;}
    <div>
        <h2>標題</h2>
        <p>p</p>
    </div>
在p前面加了一個h2標簽，發現選擇器失效

E:last-child ：匹配父元素的最后一個子元素E。

要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素
E:last-child選擇符，E必須是它的兄弟元素中的最后一個元素，換言之，E必須是父元素的最后一個子元素

    p:last-child{color:#f00;}
    <div>
        <h2>標題</h2>
        <p>p</p>
    </div>
無效的代碼：
    p:last-child{color:#f00;}
    <div>
        <p>p</p>
        <h2>標題</h2>
    </div>

E:only-child：匹配父元素僅有的一個子元素E，父元素只有這一個子元素
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素

<style>
li:only-child {
  color: red;
}
</style><body>
<ul>只有唯一一個子元素
<li>結構性偽類選擇符<b> E:only-child</b> </li>
</ul>
<ul>有多個子元素
    <li>結構性偽類選擇符 E:only-child</li>
    <li>結構性偽類選擇符 E:only-child</li>
    <li>結構性偽類選擇符 E:only-child</li>
</ul>
</body>
選中第一個<ul>的<li>，且孫元素<b>被選中

E:nth-child(n)：匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素
該選擇符允許使用一個乘法因子(n)來作為換算方式，比如我們想選中所有的偶數子元素E，那么選擇符可以寫成：E:nth-child(2n)

    <style>
    li:nth-child(2n){color:red;} /* 偶數 */
    li:nth-child(2n+1){color:red;} /* 奇數 */
    </style>
    <ul>
        <li>列表項一</li>
        <li>列表項二</li>
        <li>列表項三</li>
        <li>列表項四</li>
    </ul>
因為(n)代表一個乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)換算出來會是偶數，而(2n+1)換算出來會是奇數

該選擇符允許使用一些關鍵字，比如：odd, even

使用odd, even實現奇偶：
    <style>
    li:nth-child(even){color:red;} /* 偶數 */
    li:nth-child(odd){color:blue;} /* 奇數 */
    </style>
    <ul>
        <li>列表項一</li>
        <li>列表項二</li>
        <li>列表項三</li>
        <li>列表項四</li>
    </ul>
關鍵字odd代表奇數，even代表偶數

E:nth-child(n)會選擇父元素的第n個子元素E，如果第n個子元素不是E，則是無效選擇符，但n會遞增。

    <div>
        <p>第1個p</p>
        <p>第2個p</p>
        <span>第1個span</span>
        <p>第3個p</p>
        <span>第2個span</span>
        <p>第4個p</p>
        <p>第5個p</p>
    </div>
CSS Case 1：
    p:nth-child(2){color:red;} 第2個p會變紅
CSS Case 2：
    p:nth-child(3){color:#f00;} 不會選中任何元素
CSS Case 3：
    p:nth-child(4){color:#f00;}
這時選中的卻是第3個p，因為它是第4個子元素

E:nth-last-child(n) ：匹配父元素的倒數第n個子元素E，假設該子元素不是E，則選擇符無效。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素
該選擇符允許使用一個乘法因子(n)來作為換算方式，比如我們想選中倒數第一個子元素E，那么選擇符可以寫成：E:nth-last-child(1)

    <div>
        <p>第1個p</p>
        <p>第2個p</p>
        <span>第1個span</span>
        <p>第3個p</p>
        <span>第2個span</span>
    </div>
如上HTML，假設要選中倒數第一個p(即正數第3個p)，那么CSS選擇符應該是：
p:nth-last-child(2)
因為倒數第1個p，其實是倒數第2個子元素。

基于選擇符從右到左解析：首先要找到第1個子元素，然后再去檢查該子元素是否為p，如果不是p，則n遞增，繼續查找

E:first-of-type：匹配同類型中的第一個同級兄弟元素E。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是說E可以是body
該選擇符總是能命中父元素的第1個為E的子元素，不論第1個子元素是否為E

  <style>
    p:first-of-type {
    color:red;
    }
  </style>
  <body>
  <div class="test">
      <div>我是一個div元素</div>
      <p>1p元素</p>
      <p>2p元素</p></div>
  </body>
選中第1個 <p>1p元素</p>

E:last-of-type：匹配同類型中的最后一個同級兄弟元素E。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是說E可以是body
該選擇符總是能命中父元素的倒數第1個為E的子元素，不論倒數第1個子元素是否為E

  <style>
    p:first-of-type {
    color:red;
    }
  </style>
  <body>
  <div class="test">
      <div>我是一個div元素</div>
      <p>1p元素</p>
      <p>2p元素</p></div>
  </body>
選中第2個 <p>2p元素</p>

E:only-of-type：匹配同類型中的唯一的一個同級兄弟元素E。（E本身及孫元素）
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是說E可以是body
該選擇符總是能命中父元素的唯一同類型子元素E，不論該元素的位置

<head>
      <style>
        body:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
    <div class="test">
        <p>結構性偽類選擇符 E:only-of-type</p>
        <span>span1<p>innerP</p></span>
        <p>結構性偽類選擇符 E:only-of-type</p>
    </div>
</body>
p:only-of-type :不選中任何元素，因為P元素不是唯一的
span:only-of-type：選中<span>，且包括孫元素<p>
body:only-of-type：選中全部

E:nth-of-type(n)：匹配同類型中的第n個同級兄弟元素E。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是說E可以是body
該選擇符總是能命中父元素的第n個為E的子元素，不論第n個子元素是否為E

    <div>
        <p>第1個p</p>
        <p>第2個p</p>
        <span>第1個span</span>
        <p>第3個p</p>
        <span>第2個span</span>
    </div>
如上HTML，假設要命中第一個span：
    span:nth-of-type(1){color:#f00;}
如果使用E:nth-child(n)：
    span:nth-child(3){color:#f00;}

最后編輯于：2017.12.06 00:00:21

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,119評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,382評論 3贊 415
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,038評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,853評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,616評論 6贊 408
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,112評論 1贊 323
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,192評論 3贊 441
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,355評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,869評論 1贊 334
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,727評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,928評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,467評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,165評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,570評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,813評論 1贊 282
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,585評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,892評論 2贊 372

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

CSS Selectors 選擇器（選擇符）

CSS Selectors 選擇器（選擇符）

選擇器

一、元素選擇符

二、關系選擇符

三、CSS Attribute Selectors 屬性選擇符

四、CSS Pseudo-Classes Selectors 偽類選擇符

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS Selectors 選擇器（選擇符）

選擇器

一、元素選擇符

二、關系選擇符

三、CSS Attribute Selectors 屬性選擇符

四、CSS Pseudo-Classes Selectors 偽類選擇符

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频