前端（四）

一css四種基本選擇器

CSS選擇器：就是指定CSS要做用的標籤。選擇器分爲基本選擇器和擴展選擇器。

基本選擇器：

• 標籤選擇器：針對一類標籤
• ID選擇器：針對某一個特定的標籤使用
• 類選擇器：針對你想要的全部標籤使用
• 通用選擇器（通配符）：針對全部的標籤都適用（不建議使用）

1.1標籤選擇器

選擇器的名字表明html頁面上的標籤，常常描述「共性」，沒法描述某一個元素的「個性，如：

a {
    font-size: 20px;
}複製代碼

上邊的標籤選擇器的意思：全部的a標籤裏邊的內容字體大小爲20px。

• 全部的標籤，均可以是選擇器。好比ul、li、label、dt、dl、input。
• 不管這個標籤藏的多深，必定可以被選擇上。 
• 選擇的全部，而不是一個。

1.2ID選擇器

針對某一個特定的標籤來使用。只能使用一次。css中的ID選擇器以」#」來定義。

#mytitle{
	border:3px dashed green;
}複製代碼

id選擇器的選擇符是「#」。任何的HTML標籤均可以有id屬性。

• 只能有字母、數字、下劃線。
• 必須以字母開頭。
• 不能和標籤同名。好比id不能叫作body、img、a。

tips：HTML頁面，不能出現相同的id，哪怕他們不是一個類型。好比頁面上有一個id爲pp的p，一個id爲pp的div，是非法的！

1.3類選擇器

針對你想要的全部標籤使用。css中類選擇器用.來定義。

.one{
	width:800px;
}複製代碼

• 類選擇器能夠被多種標籤使用。

• 同一個標籤可使用多個類選擇器。用空格隔開。

問題：到底用id仍是用class？

答案：儘量的用class，除非極特殊的狀況能夠用id。

緣由：id是js用的。也就是說，js要經過id屬性獲得標籤，因此css層面儘可能不用id，要否則js就很彆扭。另外一層面，咱們會認爲一個有id的元素，有動態效果。

1.4通用選擇器

通配符*：匹配任何標籤。效率不高，若是頁面上的標籤越多，效率越低

*{
margin-left:0px;
margin-top:0px;
}複製代碼

二擴展選擇器

• 後代選擇器
• 交集選擇器
• 並集選擇器
• 僞類選擇器

2.1後代選擇器

當要把某一個部分的全部的什麼，進行樣式改變，就要想到後代選擇器。例如：

.div1 p{
	color:red;
	}複製代碼

空格就表示後代。.div1 p 表示.div1的後代全部的p。不論是兒子仍是孫子都會改變。

例如：

.eee p .bbb {
            color: #f00;
        }複製代碼

<div class="eee">
    <p>eeeeaedadasd <i class="bbb">nihao</i></p>
</div> 複製代碼

表示類eee的全部後代p中的類bbb的顏色都變成紅色。

2.2交集選擇器

定義交集選擇器的時候，兩個選擇器之間緊密相連。通常是以標籤名開頭，好比div.haha，再好比p.special。若是後一個選擇器是類選擇器，則寫爲div.special；若是後一個選擇器id選擇器，則寫爲div#special。

h3.special{
    color:red;
}複製代碼

<h3 class="special">交集選擇器</h3>複製代碼

選擇的元素要求同時知足兩個條件：必須是h3標籤，而後必須有special選擇器。

tips:交集選擇器沒有空格。因此，沒有空格的div.red（交集選擇器）和有空格的div.red（後代選擇器）不是一個意思。

2.3並集選擇器

定義的時候用逗號隔開，例如：

p,h1,#mytitle,.one{
	color:red;
}複製代碼

表示全部的這些選擇器選中的標籤字體顏色都是紅色。

2.4僞類選擇器

僞類：同一個標籤，根據其不一樣的種狀態，有不一樣的樣式。這就叫作「僞類」。僞類用冒號來表示。僞類分爲靜態僞類和動態僞類。

靜態僞類：只能用於超連接的樣式。以下：

• :link 超連接點擊以前。URI 還沒有出如今用戶代理的歷史中
• :visited 連接被訪問過。URI 已經出如今用戶代理的歷史中

動態僞類：針對全部標籤都適用的樣式。以下：

• :hover 「懸停」：鼠標放到標籤上的時候
• :active 「激活」： 鼠標點擊標籤，可是不鬆手時。
• :focus 是某個標籤得到焦點時的樣式（好比某個輸入框得到焦點）

超連接的四種狀態

/*超鏈從未被點擊是紅色*/
		a:link{
			color:red;
		}

		/*超連接被訪問過是綠色*/
		a:visited{
			color:orange;
		}
		/*鼠標懸停，放到標籤上的時候*/
		a:hover{
			color:green;
		}
		/*鼠標點擊連接，可是不鬆手的時候*/
		a:active{
			color:black;
                }
複製代碼

tips:

在css中，這四種狀態必須按照固定的順序寫：a:link 、a:visited 、a:hover 、a:active

a{}和a:link{}的區別：

• a{}定義的樣式針對全部的超連接(包括錨點)
• a:link{}定義的樣式針對全部寫了href屬性的超連接(不包括錨點)

2.5其餘選擇器

子代選擇器，用符號>表示。和後代選擇器的區別就是，只管兒子。

div>p{
  color:red;
}複製代碼

序選擇器，設置無序列表<ul>中的第一個<li>爲紅色：

ul li:first-child{
			color:red;
		}複製代碼

設置無序列表<ul>中的最後一個<li>爲藍色：

ul li:last-child{
	                color:blue;
		}複製代碼

兄弟選擇器，h3元素後面緊挨着的第一個兄弟：

h3+p{
	color:red;
    }複製代碼

關於一些css3的選擇器，咱們後邊在作介紹。

三css的繼承性

以下代碼：

<div style="color: #FF0000">
    <p>11111111111</p>
</div>複製代碼

咱們給div標籤增長紅色樣式，卻發現，div裏的每個子標籤<p>也增長了紅色樣式。這說明有些屬性是能夠繼承的。繼承性是從本身開始，直到最小的元素。

那麼哪些樣式能夠繼承呢？

• 關於文字樣式的屬性，都具備繼承性。這些屬性包括：color、 text-開頭的、line-開頭的、font-開頭的。

• 關於盒子、定位、佈局的屬性，都不能繼承。

四css的重疊性

層疊性：就是css自動處理衝突的能力。多種選擇器同時給P標籤增長顏色的屬性，這個時候，就出現了層疊性的狀況。內部原理是經過計算權重大小來選擇樣式。

• 先從高等級進行比較，高等級相同時，再比較低等級的，以此類推；
• 徹底相同的話，就採用 後者優先 原則；

那麼選擇器的權重高低都是多少呢？：

內聯樣式：    1，0，0，0

ID選擇器：    0，1，0，0

類、僞類：    0，0，1，0
標籤選擇器： 0，0，0，1

例如：這樣的樣式，哪一個會生效

body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}複製代碼

第二個樣式有兩個ID選擇器，因此會選擇第二個樣式。

tips：在css中，!important的權重至關的高。若是出現了!important，則無論權重如何都取有!important的屬性值。可是寬高有例外狀況，因爲寬高會被max-width/min-width覆蓋，因此!important會失效。