【前端開發系列】—— CSS3屬性選擇器總結

時間 2019-11-19

原文原文鏈接

想一想本身爲何要學CSS，做爲一個開發過前端的人員來講，調試一個圖片花了半天的時間，最後發現分隔符用錯了，實在是一件很丟人的事情。所以，痛下決心來學習CSS，最近一週也會更新下相關的學習筆記。css

　　CSS3中使用了不少的屬性選擇器，經過這些屬性選擇器，能夠根據咱們本身的設計來定義元素的樣式，製做精美的網頁。html

　　下面是CSS3的屬性選擇器的語法，及使用。

元素名字[元素類型=「類型名字」]：選擇器名字{ 屬性：值； 屬性：值； }

　　在元素類型匹配時，就可使用相似正則的匹配方法。前端

　　[att=val] 指定特定名字的元素chrome

　　[att*=val] 匹配val*的元素，ide

　　[att^=val] 匹配val開頭的元素，好比id爲val一、val432432均可以。學習

　　[att$=val] 匹配val結尾的元素，好比id爲1213val、fdajlval等等。測試

　　僞元素選擇器

　　一般，CSS中會有一些已經定義好的元素選擇器，咱們經過ui

選擇器:僞元素{屬性名：值}

　　來定義。spa

　　經常使用的僞選擇器有：設計

1 first-line 僞元素選擇器：某個元素的第一行

2 first-letter：某元素的首字母

3 after：某元素以後插入內容，如

<p>:before{ 　　content:123 }

4 before：某元素以前插入內容

　　經常使用選擇器

　　root：整個DOM的元素定點，也就是html

　　not：排除特定的元素

　　empty：好比一個列表空的那個元素

　　target：連接指定的目標

 1 <html>
 2 <head>
 3     <style type="text/css">
 4  :target{
 5  background-color:yellow;
 6         }
 7     </style>
 8 </head>
 9 <body>
10     <p id="menu">
11         <a href="#text1">示例1</a>| 12         <a href="#text2">示例2</a>| 13         <a href="#text3">示例3</a>| 14         <a href="#text4">示例4</a>| 15         <a href="#text5">示例5</a>
16     </p>
17     <div id="text1">
18         <h2>示例文字1</h2>
19         <p>..此處省略..</p>
20     </div>
21     <div id="text2">
22         <h2>示例文字2</h2>
23         <p>..此處省略..</p>
24     </div>
25     <div id="text3">
26         <h2>示例文字3</h2>
27         <p>..此處省略..</p>
28     </div>
29     <div id="text4">
30         <h2>示例文字4</h2>
31         <p>..此處省略..</p>
32     </div>
33     <div id="text5">
34         <h2>示例文字5</h2>
35         <p>..此處省略..</p>
36     </div>
37 </body>
38 </html>

View Code

點擊圖片就能夠看到效果

　　first-child：選擇第一個子元素

　　last-child：選擇最後一個子元素

　　nth-child：選擇第n個子元素，這個還能夠根據奇偶來制定，好比：

<子元素>：nth-child(even){ ... } <子元素>：nth-child(odd){ ... }//也能夠經過在括號內使用2n+1來，指定奇偶

　　nth-last-child：選擇倒數第n個子元素

　　only-child：單個子元素時，指定樣式

　　元素狀態選擇器

　　hover：當鼠標浮在元素上方時，觸發

　　active：當鼠標按下，尚未離開時，觸發。由於chrome不支持，因此沒有進行測試。

　　focus：編輯焦點時，觸發

　　enabled：可使用時，觸發

　　disabled：不可使用時，觸發

　　read-only：只讀時，觸發

　　read-write：可讀可寫時，觸發

　　checked：被勾選觸發

　　selection：選擇時，觸發

 1 <html>
 2 <head>
 3     <style type="text/css">
 4  p::selection{
 5  background:red;
 6  color:#FFF;
 7         }
 8  input[type="text"]::selection{
 9  background:gray;
10  color:#FFF;
11         }
12  td::selection{
13  background:green;
14  color:#FFF;
15         }
16     </style>
17 </head>
18 <body>
19     <p>hello!xingoo</p>
20     <hr/>
21     <input type="text" value="hello!xingoo" />
22     <hr/>
23     <table border="1" cellspacing="0" cellpadding="0" >
24         <tr>
25             <td>
26  hello! 27             </td>
28             <td>
29  xingoo! 30             </td>
31         </tr>
32         <tr>
33             <td>
34  123! 35             </td>
36             <td>
37  456! 38             </td>
39         </tr>
40     </table>
41 </body>
42 </html>

View Code

　　default：好比多選框，頁面刷新時，默認選擇觸發

　　indeterminate：好比多選框，都沒選時的樣式

 1 <html>
 2 <head>
 3     <script>
 4         function radio_onchange()  5  {  6             
 7             var radio = document.getElementById("radio1");  8             var text = document.getElementById("text1");  9  console.log(text.disabled); 10             if(radio.checked){ 11  console.log("checked"); 12  text.disabled = ""; 13  }else{ 14  console.log("unchecked"); 15  text.value = ""; 16  text.disabled = "disabled"; 17  } 18  } 19     </script>
20     <style type="text/css">
21  input[type="text"]:enabled{
22  background-color:yellow;
23         }
24  input[type="text"]:disabled{
25  background-color:purple;
26         }
27  input[type="text"]:hover{
28  background-color:skyblue;
29         }
30  input[type="text"]:focus{
31  background-color:red;
32         }
33  input[type="text"]:read-only{
34  background-color:gray;
35         }
36         
37  input[type="checkbox"]:checked{
38  outline:2px solid blue;
39         }
40         
41  input[type="checkbox"]:indeterminate{
42  outline:2px solid red;
43         }
44     </style>
45 </head>
46 <body>
47     <form>
48         <input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio>
49         <input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br/>
50         <input type=text id="text1" disabled />
51         <p>
52             姓名：<input type="text" name="name" /><br/>
53             Email：<input type="text" name="email" value="http://www.cnblogs.com/xing901022/" readonly="readonly" />
54         </p>
55         
56         興趣：<input type="checkbox">閱讀</input>
57         <input type="checkbox">電影</input>
58         <input type="checkbox">遊戲</input>
59         <input type="checkbox">上網</input>
60         <br/>
61         
62         
63     </form>
64 </body>
65 </html>

View Code

　　invalid：不符合元素範圍的

　　valid：符合元素範圍校驗的

 1 <html>
 2 <head>
 3     <style type="text/css">
 4  input[type="text"]:invalid{
 5  background-color:red;
 6         }
 7  input[type="text"]:valid{
 8  background-color:white;
 9         }
10     </style>
11 </head>
12 <body>
13     <form>
14         <p>必須輸入文字:<input type="text" required /></p>
15     </form>
16 </body>
17 </html>

View Code

不合法時

合法時

　　required：支持這個屬性，而且定義了required的

　　optional：支持requried屬性，可是沒有定義的

 1 <html>
 2 <head>
 3     <style type="text/css">
 4  input[type="text"]:required{
 5  border-color:red;
 6  border-width:3px;
 7         }
 8  input[type="text"]:optional{
 9  border-color:blue;
10  border-width:3px;
11         }
12     </style>
13 </head>
14 <body>
15     <form>
16         姓名：<input type="text" required placeholder="必須輸入" /><br/>
17         年齡：<input type="text" />
18     </form>
19 </body>
20 </html>

View Code

　　in-range：在範圍內的

　　out-of-range：超出範圍的

 1 <html>
 2     <head>
 3         <style type="text/css">
 4  input[type="number"]:in-range{
 5  background-color:white;
 6             }
 7  input[type="number"]:out-of-range{
 8  background-color:red;
 9             }
10         </style>
11     </head>
12     <body>
13         test number 1-100<input type=number min=0 max=100>
14     </body>
15 </html>