CSS3和選擇器
阿新 • • 發佈：2018-12-04
一、CSS
1、CSS全稱層疊樣式表，通常有稱為風格樣式表。Cascading Style Sheet 也叫級聯樣式表。
2.CSS第一版釋出時間1996年12月，2010釋出CSS3.0版本，也就是現在用的CSS3.。
3.CSS使用的優勢（作用）：
- 內容與表現分離
- 表現統一，容易修改
- 有很多豐富的樣式，使頁面佈局更加靈活。
- 減少網頁的程式碼，提高瀏覽網速，節省網路寬頻，提高程式碼的重用。
- 運用獨立的css,有利於網頁被搜尋引擎收錄。
4.CSS3的基本語法：
h1{ font-size:15px; color:red; } 註釋：color,font-size是屬性，red是值，合起來就是樣式的宣告。h1是選擇器。
5.樣式標籤：<style>樣式標籤，位於<head>標籤中。
6.CSS樣式有三種：行內樣式，內部樣式，外部樣式表。
行內樣式：
<p style="color:red;">
這是一段文字
</p>
註釋：行內樣式，就是直接寫在HTML標籤裡面。內部樣式：
<style>
p{
font-size:30px;
}
</style>
註釋：內部樣式寫在head標籤中，只能適用於原網頁。外部樣式：
<link rel="stylesheet" href="css/style.css"> 註釋：外部樣式，首先要建立檔案件CSS，再去建立檔案.css檔案。最後在head標籤裡面匯入上面的程式碼即可！ 其他寫法一樣。 rel是在本頁面使用外部樣式表，type這檔案樣式文字，href是寫的css檔案的路徑。 p{ color:blue; } 這裡寫的是連結式外部樣式，一般常用！
樣式優先順序：
行內樣式 > 內部樣式 > 外部樣式
還有這個優先順序遵守 就近原則, 也就是李標籤越近的樣式優先級別越高。
二、CSS3的選擇器（常用的選擇器）
1.基本選擇器:標籤選擇器，類選擇器，ID選擇器
標籤選擇器：如h1~h6,寫在標籤裡面。 <h1 style="font-size:15px;">標籤選擇器</h1> 類選擇器: .class{ font-size:15px; color:red; } //註釋：其中.class是類名稱。font-size是屬性，後面的是值。 id選擇器： #id{ font-size:20px; } //註釋:id選擇器的宣告,以#號鍵開頭，在同一個頁面裡面，ID屬性只能設定一次。
注意:基本選擇器有分優先順序，ID選擇器 > class類選擇器 > 標籤選擇器 ，它們是不遵循就近原則的！
2.CSS3高階選擇器：層次選擇器
《1》後代選擇器：
body p{
background-color:yellow;
}
//註釋：後代選擇器，選擇的是所有的P標籤，在body和p之間要用空格隔開！
《2》子代選擇器：
body>p{
color:red;
}
//註釋：body為父元素，p為子元素。選擇的是body下面的子元素P.
《3》相鄰兄弟選擇器：
.active+p{
color:yellow;
}
//註釋：.active和p是同輩元素，選擇的是緊鄰p下面的一個元素，而且只能是往後面找！
《4》通用兄弟選擇器：
.active~p{
color:blue;
}
//註釋：這兩個都是同輩元素，選擇的是所有的p元素，也即是和p同級，可以是一個，也可以是多個
3.結構偽類選擇器：
body p:first-child{
}
//註釋：這是指父元素下面的第一個子元素p
body p:last-child{
}
//父元素下面的最後一個子元素
body p:nth-child(n){
}
//選擇父元素下面的第n個子元素p
body p:last-of-type{
}
//父元素下面的指定型別的最後一個元素
body p:first-of-type{
}
//父元素下面的指定型別的第一個元素
body p:nth-of-type(n){
}
//父元素下面的指定型別的第n個元素
注意：body p:nth-child(n)在父級元素裡面從第一個元素找，部分型別，也就是隻有是p元素都會找到！
body p:nth-of-type(n)在父級元素裡面先看型別，在看位置，不符合型別的元素直接排除！
4.屬性選擇器：
p[id]{
}
//匹配屬性id的p元素
p[id=val]{
}
//匹配屬性id=val的p元素
p[id*=val]{
}
//匹配屬性中含有class屬性並且屬性值中包含val的p元素
p[id^=val]{
}
//選擇所有含有id屬性以val開頭的所有p元素
p[id$=val]{
}
//選擇所有含有id屬性的並且以val結尾的所有p元素