CSS節選——選擇器

CSS，cascading style sheet，層疊樣式表，請留意層疊概念。

css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

?::before和::after偽元素的用法

::before和::after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內容。
這些添加不會出現在DOM中，不會改變文檔內容，不可復制，僅僅是在css渲染層加入。
所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容，例如圖標。
舉例：網站有些聯系電話，希望在它們前加一個icon?，就可以使用:before偽元素，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
.phoneNumber::before {
content:'\FFFD';
font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

::before 示例

::before 和:before有什么區別？
這個問題看來很簡單，但如果之前沒有琢磨這個問題，給人感覺也是門頭一垂，聽到這個題目就懵逼了，因為原來從來沒有注意過這個問題，即便有注意這個問題也不能很好的回答清楚。回答的技巧就是從相同點和不同點，以及他們的作用，及注意事項上去回答。
解答要點
相同點
都可以用來表示偽類對象，用來設置對象前的內容
:befor和::before寫法是等效的
不同點
:befor是Css2的寫法，::before是Css3的寫法
:before的兼容性要比::before好 ，不過在H5開發中建議使用::before比較好
加分項
偽類對象要配合content屬性一起使用
偽類對象不會出現在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
偽類對象的特效通常要使用:hover偽類樣式來激活

.test:hover::before { /* 這時animation和transition才生效 */ }

?

序列選擇器

#1、作用：
css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，過去的選擇器中要選中某個必須加id或class，學習了這9個后，不用加id或class，想選中同級別的第幾個就選第幾個
#2、格式
#2.1 同級別
:first-child    p:first-child    同級別的第一個
:last-child    p:last-child    同級別的最后一個
:nth-child(n)                    同級別的第n個
:nth-last-child(n)            同級別的倒數第n個
#2.2 同級別同類型
:first-of-type                    同級別同類型的第一個
:last-of-type                    同級別同類型的最后一個
:nth-of-type(n)                    同級別同類型的第n個
:nth-last-of-type(n)            同級別同類型的倒數第n個
#2.3 其他
:only-of-type                    同類型的唯一一個
:only-child                         同級別的唯一一個

#1、同級別的第一個
#1.1 示范一
p:first-child { 
color: red;
}
代表：同級別的第一個，并且第一個要求是一個p標簽
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
這樣的話第一個p和div中的第一個p都變成紅色，
#1.2 示范二
p:first-child {
color: red;
}
代表：同級別的第一個，并且第一個要求是一個p標簽
<h1>w我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
這樣的話只有div中的第一個p變紅，因為在有在div內同一級別的第一個才是p
注意點：
:fist-child就是第一個孩子，不區分類型
#2、同級別的最后一個
p:last-child {
color: red;
}
代表：同級別的最后一個，并且最后一個要求是一個p標簽
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
<p>我是段落7</p>
這樣的話只有6跟7都變紅
#3、同級別的第n個
p:nth-child(3) {
color: red;
}
代表：同級別的第3個，并且第3個要求是一個p標簽
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落2”變紅
#4、同級別的倒數第n個
p:nth-last-child(3) {
color: red;
}
代表：同級別的倒數第3個，并且第3個要求是一個p標簽
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落6.1”和“我是段落5”被選中

同級別

<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
#1、同級別同類型的第一個
p:first-of-type {
color: red;
}
“我是段落1”和“我是段落6.1”被選中
#2、同級別同類型的最后一個
p:last-of-type {
color: red;
}
“我是段落7”和“我是段落6.2”被選中
#3、同級別同類型的第n個
p:nth-of-type(2) {
color: red;
}
“我是段落2”和“我是段落6.2”被選中
#4、同級別同類型的倒數第n個
p:nth-last-of-type(2) {
color: red;
}
“我是段落5”和“我是段落6.1”被選中

同級同類型

#1、同類型的唯一一個
p:only-of-type {
color: red;
}
<h1>我是標題</h1>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
“我是段落7“被選中
#2、同級別的唯一一個
p:only-child {
color: red;
}
<h1>我是標題</h1>
<div>
<p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被選中

其他

屬性選擇器

#1、作用：根據指定的屬性名稱找到對應的標簽，然后設置屬性
該選擇器，最常用于input標簽
#2、格式與具體用法：
[屬性名]
其他選擇器[屬性名]
[屬性名=值]
[屬性名^=值]
[屬性名$=值]
[屬性名*=值]
例1：找到所有包含id屬性的標簽
[id]
例2：找到所有包含id屬性的p標簽
p[id]
例3：找到所有class屬性值為part1的p標簽
p[class="part1"]
例4：找到所有href屬性值以https開頭的a標簽
a[href^="https"]
例5：找到所有src屬性值以png結果的img標簽
img[src$="png"]
例6：找到所有class屬性值中包含part2的標簽
[class*="part"]

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代選擇器</title>
<style type="text/css">
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

示例

?兄弟選擇器

#1、作用：給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性
#2、格式
選擇器1 選擇器2 {
屬性：值;
}
#3、注意點：
1、相鄰兄弟選擇器必須通過 號鏈接
2、相鄰兄弟選擇器只能選中你緊跟其后的那個標簽，不能選中被隔開的標簽

相鄰兄弟選擇器，CSS2推出

#1、作用：給指定選擇器后面的所有選擇器中的所有標簽設置屬性
#2、格式：
選擇器1~選擇器2 {
屬性：值;
}
#3、注意點：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器后面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中

通用兄弟選擇器，CSS3推出

偽類選擇器

#1、作用：常用的幾種偽類選擇器。
#1.1 沒有訪問的超鏈接a標簽樣式：
a:link {
color: blue;
}
#1.2 訪問過的超鏈接a標簽樣式：
a:visited {
color: gray;
}
#1.3 鼠標懸浮在元素上應用樣式：
a:hover {
background-color: #eee; 
}
#1.4 鼠標點擊瞬間的樣式：
a:active {
color: green;
}
#1.5 input輸入框獲取焦點時樣式：
input:focus {
outline: none;
background-color: #eee;
}
#2 注意：
1 a標簽的偽類選擇器可以單獨出現，也可以一起出現
2 a標簽的偽類選擇器如果一起出現，有嚴格的順序要求，否則失效
link，visited，hover，active
3 hover是所有其他標簽都可以使用的
4 focus只給input標簽使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代選擇器</title>
<style type="text/css">
a:link {
color: #cccccc;
}
a:visited {
color: #55BBBB;
}
a:hover {
color: green;
}
a:active {
color: red;
}
input:hover {
outline: none;
background-color: #cccccc;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">點擊我</a>
<input type="text">
</body>
</html>

示例

偽元素選擇器

#1、常用的偽元素。
#1.1 first-letter：雜志類文章首字母樣式調整
例如：
p:first-letter {
font-size: 48px;
}
#1.2 before
用于在元素的內容前面插入新內容。
例如：
p:before {
content: "*";
color: red;
}
在所有p標簽的內容前面加上一個紅色的*。
#1.3 after
用于在元素的內容后面插入新內容。
例如：
p:after {
content: "?";
color: red;
}
在所有p標簽的內容后面加上一個藍色的?。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代選擇器</title>
<style type="text/css">
p:first-letter {
font-size: 50px;
}
/*兩個冒號與一個是一樣的，老版本用的是一個冒號，考慮到兼容性推薦使用一個冒號*/
a::after {
content: "?";
color: red;
}
a:before {
content: "-";
color: green;
}
</style>
</head>
<body>
<p>英雄不問出處，流氓不論歲數</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>
</html>

示例

CSS三大特性

1、繼承性

#1、定義：給某一個元素設置一些屬性，該元素的后代也可以使用，這個我們就稱之為繼承性
#2、注意：
1、只有以color、font-、text-、line-開頭的屬性才可以繼承
2、a標簽的文字顏色和下劃線是不能繼承別人的
3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大
ps:打開瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應用場景：
通常基于繼承性統一設置網頁的文字顏色，字體，文字大小等樣式

2、層疊性

#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那么會有覆蓋效果
#2、注意：
1、層疊性只有在多個選擇器選中了同一個標簽，然后設置了相同的屬性，
才會發生層疊性
ps：通過谷歌瀏覽器可以查看到，一些屬性被劃掉了

3、優先級

#1、定義：當多個選擇器選中同一個標簽，并且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
#2、優先級
整體優先級從高到底：行內樣式>嵌入樣式>外部樣式
行內樣式并不推薦使用，所以我們以嵌入為例來介紹優先級

注意：

1、大前提：直接選中 > 間接選中(即繼承而來的)
2、如果都是間接選中，那么誰離目標標簽比較近，就聽誰的
3、如果都是直接選中，并且都是同類型的選擇器，那么就是誰寫的在后面就聽誰的
4、如果都是直接選中，并且是不同類型的選擇器，那么就會按照選擇器的優先級來層疊
id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）
5、優先級之!important

#1、作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，但是不推薦使用。因為大量使用!import的代碼是無法維護的。
#2、注意：
1、!important只能用于直接選中，不能用于間接選中
2、!important只能用于提升被指定的屬性的優先級，其他屬性的優先級不會被提升
3、!important必須寫在屬性值分號的前面

6、優先級之權重計算

#1、強調
如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級
#2、計算方式
#1、id數多的優先級高
#2、id數相同，則判定類數多的優先級高
#3、id數、class數均相同，則判定標簽數多的優先級高
#4、若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在后面誰的優先級高

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=h00jj00j&title=CSS節選——選擇器