CSS選擇器

時間 2019-11-12

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

CSS的命名空間是大小寫敏感的；選擇器在HTML不區分大小寫，在XML中大小寫敏感。css

1. 元素選擇器html

它是最多見也是最基本的 CSS 選擇器，文檔的元素就是最基本的選擇器。 css3

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

在 W3C 標準中，元素選擇器又稱爲類型選擇器，會匹配文檔語言元素類型的名稱，也就是說CSS樣式能夠應用於XML文件瀏覽器

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

note { font-family:Verdana, Arial;margin-left:30px;}
to {font-size:28px; display: block;}
from {font-size:28px; display: block;}
heading {color: red; font-size:60px; display: block;}
body  {color: blue; font-size:35px; display: block;}

2. 類選擇器app

要應用樣式而不考慮具體設計的元素，最經常使用的方法就是使用類選擇器，容許以一種獨立於文檔元素的方式來指定樣式，ui

.error{color:red;}

也能夠與其餘元素結合使用，如元素選擇器，通配符等url

*.important {color:red;}
p.urgent {color:yellow;}

經過把兩個類選擇器連接在一塊兒，僅能夠選擇同時包含這些類名的元素（類名的順序不限）spa

.important.urgent {background:silver;}

3. ID選擇器設計

ID 同類選擇器同樣，利用它們能夠不用考慮文檔的層次結構，能夠給id 和class 屬性設定任何值，但不能以數字或特殊符號開頭code

4. 屬性選擇器

能夠根據屬性名進行選擇，多個屬性連接在一塊兒便可

a[href] {color:red;}
a[href][title] {color:red;}

能夠選擇特定屬性名，屬性值的元素(徹底匹配)

input[name='password']{ ...}

也能夠部分匹配

a[rel~="copyright"] { ... }                    /* 屬性值以空格分開，其中一個值爲"copyright"*/
a[hreflang|="en"]                              /* 值以連字符-分隔，且以en開頭，如en-US*/
a[href*="example.com.cn"] {color: red;}        /* 值包含example.com.cn的元素*/ 
a[href^="mailto"] {color: red;}　              /* 值以mailto開頭的元素*/
a[href$=".png"] {color: red;}　　　　　　　　　　/* 值以.png結尾的元素*/

5. 上下文選擇器

上下文選擇器能夠和通配符結合使用，在某些生成的組件中，需定位的元素和其父元素常常會有必定的層級關係

後代選擇器

body  p{line-height: 1.5em;}                      /*body下面全部的p元素*/
div * input[type='text']{border:1px solid gray;}  /*input元素和div中間必有某個元素 */

子元素選擇器

body > p{...}          /*body的直接子元素p*/
div ol>li p{...}       /*div下面的ol元素的子元素li下面的p元素*/

兄弟元素選擇器

h1 ~ pre{...}          /*h1同級後面的pre元素, 共一個parent*/
h1.opener + h2{...}    /*緊鄰在h1後面的兄弟元素h2，共一個parent*/

6. 僞類選擇器

僞類可分爲UI僞類和結構化僞類

UI僞類

連接是最常使用UI 僞類的元素，因爲這4 個僞類的特指度（本章後面再討論特指度）相同，若是不按照這裏列出的順序使用它們，瀏覽器可能不會顯示預期結果

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

其餘經常使用的有 :focus, :enable, :disable, :checked, :target, :lang

input:focus {border:1px solid blue;}
input:enabled{...}
input:disabled{...}
input:checked{...}
#more_info:target {background:#eee;}

結構化僞類

:nth-last-child(1)和:last-child(1)等價，:nth-child(1)同:first-child等價

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

li:nth-child(5) 

tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */
foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element, counting from the last one */

ol > li:last-child

7. 僞元素

::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.

p::first-line { text-transform: uppercase }
p::first-letter { color: green; font-size: 200% }

如下代碼經常使用於清除浮動

.clearfix:after {
　　content:".";
　　display:block;
　　height:0;
　　visibility:hidden;
　　clear:both;
}

8. 命名空間

@namespace foo url(http://www.example.com);
 foo|h1 { color: blue }     /* The first rule (not counting the @namespace at-rule) will match only h1 elements in the "http://www.example.com" namespace. */
 foo|* { color: yellow }    /* The second rule will match all elements in the "http://www.example.com" namespace. */
 |h1 { color: red }         /* The third rule will match only h1 elements with no namespace.*/
 *|h1 { color: green }      /* The fourth rule will match h1 elements in any namespace (including those without any namespace).*/
 h1 { color: green }        /* The last rule is equivalent to the fourth rule because no default namespace has been defined.*/