1.CSS 屬性選取器(選擇符:[屬性])
屬性選取器可以根據元素的屬性及屬性值來選擇元素。
例子 1
如果您希望把包含標題（title）的所有元素變為紅色，可以寫作：
| 代碼如下 | 複製代碼 |
*[title] {color:red;} <body> <h1>可以應用樣式：</h1> <h2 title="Hello world">Hello world</h2> <a title="Endige" href=http://www.111cn.net>Endige</a> <hr /> <h1>無法應用樣式：</h1> <h2>Hello world</h2> <a href="http://www.111cn.net">Endige</a> </body> |
|
例子 2
與上面類似，可以只對有 href 屬性的錨（a 元素）應用樣式：
a[href] {color:red;}
設定表單的樣式
屬性選取器在為不帶有 class 或 id 的表單設定樣式時特別有用：
| 代碼如下 | 複製代碼 |
input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
input[type="button"]{ width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; } |
|
2.子項目選取器(選擇符:>)
如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子項目，請使用子項目選取器（Child selector）。
">"是子選擇符,用於匹配那些其他元素的直接後輩,屬於CSS2
比如說:
| 代碼如下 | 複製代碼 |
body > p{color:red;} <body> <p>內容</p> <div><p>內容</p></div> </body><BR><BR> |
|
只有第一個匹配,第二個P是DIV的下級,因此是BODY的孫級,就不匹配了
IE與寬度和高度的問題
IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。 比如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：
| 代碼如下 | 複製代碼 |
#box{ width: 80px; height: 35px; } html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px; } |
|
3.通用選擇符(選擇符:*)
"*"是通用選擇符,匹配文檔中的任何元素 比如說:
body * ul{color:gray;}
BODY元素的兩級以下的UL元素顏色為灰色 也就是說BODY元素的任何下級UL元素不為灰色,但其他UL,不論是DIV的下級元素,還是清單項目,或是表格,都會成為灰色
| 代碼如下 | 複製代碼 |
<SPAN style="FONT-SIZE: 12px">* html>body </SPAN> |
|
至於這個我也不知道該怎麼解釋,範圍太大了 就現在的htm檔案而言,html標記已經是最外層的,body就是html的直接下級
4.CSS 相鄰兄弟選取器(選擇符:+)
如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選取器（Adjacent sibling selector）。
相鄰兄弟選取器使用加號"+"
例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}<BR>
這個選取器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。
如：
| 代碼如下 | 複製代碼 |
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div><BR> |
|
在上面的片段中，div 元素中包含兩個列表：一個無序列表，一個有序列表，每個列表都包含三個清單項目。這兩個列表是相鄰兄弟，清單項目本身也是相鄰兄弟。不過，第一個列表中的清單項目與第二個列表中的清單項目不是相鄰兄弟，因為這兩組清單項目不屬於同一父元素（最多隻能算堂兄弟）。 請記住，用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選取器：
| 代碼如下 | 複製代碼 |
|
|
上面這個選取器只會把列表中的第二個和第三個清單項目變為粗體。第一個清單項目不受影響。
結合其他選取器
相鄰兄弟結合符還可以結合其他結合符：
| 代碼如下 | 複製代碼 |
html > body table + ul {margin-top:20px;} |
|
這個選取器解釋為：選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子項目。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
