CSS選擇器

1、基本選擇器

2、分組選擇器

3、通配符選擇器

4、類選擇器

5、ID選擇器

6、屬性選擇器

7、後代選擇器

8、子元素選擇器

9、相鄰兄弟選擇器

10、僞類

11、僞元素

 

1、基本選擇器

 

如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

 

2、分組選擇器

 h2, p {color:gray;}

 h2 元素和段落都有灰色

 

3、通配符選擇器

 

 * {color:red;}

 使文檔中的每個元素都爲紅色：

 

4、類選擇器

 

類選擇器允許以一種獨立於文檔元素的方式來指定樣式。

該選擇器可以單獨使用，也可以與其他元素結合使用。

.important {color:red;}
p.important {color:red;}
只有引用了important類的段落顯示爲紅色文本
.important.warning {silver;}
同時包含important和warning類的元素

5、ID 選擇器

 

#intro {font-weight:bold;}
類選擇器和 ID 選擇器可能是區分大小寫的
 
6、屬性選擇器 
6.1簡單屬性選擇
 [title] {color:red;}
 把包含標題（title）的所有元素變爲紅色
 a[href] {color:red;}
 對有 href 屬性的錨（a 元素）應用樣式
 a[href][title] {color:red;}
 同時有 href 和 title 屬性的 HTML 超鏈接的文本設置爲紅色
6.2根據具體屬性值選擇
 a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}   將指向 Web 服務器上某個指定文檔的超鏈接變成紅色   與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。   a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
6.3屬性與屬性值必須完全匹配
 <p class="important warning">This paragraph is a very important warning.</p>    p[class="important warning"]   根據部分屬性值選擇   p[class~="important"] {color: red;}   class 屬性中包含 important 的元素
6.4子串匹配屬性選擇器

 

 

類型	描述
[abc^="def"]	選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]	選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]	選擇 abc 屬性值中包含子串 "def" 的所有元素

 

7、後代選擇器

h1 em {color:red;}

只對 h1 元素中的 em 元素應用樣式

8、子元素選擇器

h1 > strong {color:red;}

這個規則會把第一個 h1 下面的 strong 元素變爲紅色，但是第二個 strong 不受影響：

<h1>This is <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

9、相鄰兄弟選擇器

h1 + p {margin-top:50px;}

增加緊接在 h1 元素後出現的段落的上邊距

這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。

li + li {font-weight:bold;}

上面這個選擇器只會把列表中的第二個和第三個列表項變爲粗體。第一個列表項不受影響。
 

10、僞類

屬性	描述
:active	向被激活的元素添加樣式。
:focus	向擁有鍵盤輸入焦點的元素添加樣式
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。
:link	向未被訪問的鏈接添加樣式。
:visited	向已被訪問的鏈接添加樣式。
:first-child	向元素的第一個子元素添加樣式。
:lang	向帶有指定 lang 屬性的元素添加樣式。

 

11、僞元素

屬性	描述
:first-letter	向文本的第一個字母添加特殊樣式。
:first-line	向文本的首行添加特殊樣式
:before	在元素之前添加內容。
:after	在元素之後添加內容。

容CSS選擇器，所以學會CSS選擇器以後可以然後入手jquery選擇器基本上沒有什麼門檻