一、CSS介紹：
1.1、CSS介紹：
CSS，全稱是：Cascading Style Sheets，層疊樣式表，用于修飾HTML頁面的。
CSS編寫規(guī)則如下所示：
CSS編寫的規(guī)則分為兩部分，分別是：選擇器、聲明塊。
- 聲明塊，需要使用【{}】大括號包裹，括號里面使用【key: value；】的格式定義屬性。
選擇器，表示需要對哪個HTML標(biāo)簽添加CSS樣式，聲明塊表示要給選擇的標(biāo)簽添加什么樣式效果。例如：
h1 {
color: blue;
font-size: 20px;
}
1.2、CSS三種使用方式：
CSS有三種使用方式，這三種方式在不同地方使用，分別是：內(nèi)聯(lián)樣式、內(nèi)部樣式、外部樣式。
（1）內(nèi)聯(lián)樣式：
內(nèi)聯(lián)樣式，是直接在需要添加樣式的HTML標(biāo)簽上面，使用【style】屬性進(jìn)行樣式修飾。如下所示：
<body>
<div style="color: blue; font-size: 20px;">內(nèi)聯(lián)CSS樣式</div>
</body>
（2）內(nèi)部樣式：
內(nèi)部樣式，是在head標(biāo)簽之前，使用【
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.box {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<div clas="box">內(nèi)聯(lián)CSS樣式</div>
</body>
</html>
（3）外部樣式：
外部樣式，就是將所有的CSS代碼統(tǒng)一的寫到一個CSS文件里面，然后哪個HTML要使用，就通過【】標(biāo)簽引入即可。
<!-- 引入外部CSS樣式 -->
<link rel="stylesheet" href="./cssdemo.css">
rel屬性，用于指定是CSS樣式表，href屬性用于指定CSS文件的路徑。
1.3、CSS樣式表的優(yōu)先級：
上面三種CSS樣式表的使用方式，是具有優(yōu)先級，瀏覽器會使用優(yōu)先級越高的CSS樣式。
CSS樣式表優(yōu)先級：
- 內(nèi)聯(lián)樣式 > 內(nèi)部樣式 和 外部樣式，即：標(biāo)簽上面使用的style屬性優(yōu)先級最高。
- 內(nèi)部樣式 和 外部樣式 的優(yōu)先級，最后讀取的樣式，優(yōu)先級更高，即：哪個最后定義，就使用哪個樣式。
- 也可以理解為后定義的樣式，會覆蓋前面定義的樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- 引入外部CSS樣式 -->
<link rel="stylesheet" href="./cssdemo.css">
<style>
div {
color: blue;
}
</style>
</head>
<body>
<!-- <div style="color: red;">三種CSS樣式表優(yōu)先級</div> -->
<div clas="box">三種CSS樣式表優(yōu)先級</div>
</body>
</html>
定義的CSS外部樣式。
div {
color: orange;
font-size: 20px;
}
二、CSS選擇器：
2.1、簡單選擇器：
（1）元素選擇器：
根據(jù)HTML標(biāo)簽名稱來選擇元素。
<style>
div {
color: blue;
}
</style>
（2）id選擇器：
id選擇器，需要給HTML標(biāo)簽添加id屬性，然后再通過指定的id名稱來選擇到這個HTML標(biāo)簽，一個HTML里面，id屬性應(yīng)該是唯一的。
id選擇器使用格式：#id名稱 {樣式屬性}
（3）class類別選擇器：
class類別選擇器，給需要添加樣式的標(biāo)簽設(shè)置【class】屬性，一個HTML頁面里面，可以有多個相同名稱的class選擇器，也就是說，class類別選擇器可以被重復(fù)使用。class選擇器也支持同時設(shè)置多個，使用空格隔開即可。
class選擇器使用格式：【.class名稱 { 樣式屬性 } 】（注意：使用點(diǎn)號開頭）
（4）通用選擇器：
通用選擇器是對HTML中的所有標(biāo)簽添加CSS樣式的，通用選擇器使用【*】星號通配符定義。
2.2、組合選擇器：
（1）后代選擇器：
后代選擇器，通過【空格】將每個選擇分隔，格式如下所示：
后代選擇器：【選擇器1 空格 選擇器2 空格 選擇器3…】
后代選擇器，可以將所有指定的后代標(biāo)簽獲取到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- 引入外部CSS樣式 -->
<link rel="stylesheet" href="./cssdemo.css">
<style>
/* 獲取 div 標(biāo)簽下的所有 p 標(biāo)簽 */
div p {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<p>后代選擇器</p>
</div>
<p>后代選擇器</p>
<p>后代選擇器</p>
</div>
</body>
</html>
（2）子選擇器：
子選擇器，通過【>】箭頭將每個選擇分隔，格式如下所示：
子選擇器：【選擇器1 > 選擇器2 > 選擇器3…】
子選擇器，只能夠獲取到選擇器下直接子元素，不能包含孫子元素。
也就是某個選擇器下面，第一層的標(biāo)簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
/* 獲取 .box 選擇器下的直接 p 標(biāo)簽 */
.box > p {
color: red;
}
</style>
</head>
<body>
<div class="box">
<div>
<p>后代選擇器</p>
</div>
<p>后代選擇器</p>
<p>后代選擇器</p>
</div>
</body>
</html>
（3）相鄰兄弟選擇器：
相鄰兄弟選擇器，通過【+】加號將每個選擇器分隔，格式如下所示：
相鄰兄弟選擇器：【選擇器1 + 選擇器2 + 選擇器3…】
待解鎖_…
（4）一般兄弟選擇器：
一般兄弟選擇器，通過【~】波浪線將每個選擇器分隔，格式如下所示：
一般兄弟選擇器：【選擇器1 ~ 選擇器2…】
待解鎖_…
2.3、偽類選擇器：
偽類選擇器，是根據(jù)元素的狀態(tài)來選擇元素。偽類選擇器，是屬于類別選擇器的一種，它能夠根據(jù)元素的狀態(tài)來選擇標(biāo)簽元素。
偽類選擇器的格式如下：
偽類選擇器：【選擇器名稱：狀態(tài) { 屬性樣式 }】
常見的偽類選擇器，有如下幾個：
偽類選擇器：
- 【:link】這是鼠標(biāo)點(diǎn)擊之前顯示的樣式。
- 【:visited】這是鼠標(biāo)點(diǎn)擊之后顯示的樣式。
- 【:hover】這是鼠標(biāo)懸浮上面顯示的樣式。
- 【:active】這是鼠標(biāo)點(diǎn)擊的那一刻顯示的樣式。
上面四個偽類選擇器，一般情況下，都是使用在超鏈接上面，并且四個的使用順序（l、v、h、a）必須按照上面定義的先后順序編寫，否則在瀏覽器中可能不能生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
a {
font-size: 30px;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">偽類選擇器</a>
</body>
</html>
上面四個偽類選擇器也可以使用在其他標(biāo)簽上面，但是只能使hover和active生效。
2.4、偽元素選擇器：
偽元素選擇器，可以在標(biāo)簽的前后添加額外的內(nèi)容，偽元素選擇器的使用格式：
偽元素選擇器：【選擇器名稱::選擇器類型 { 樣式屬性 }】
偽元素選擇器有五種：
偽元素選擇器：
- 【::first-letter】在第一個字符之前添加樣式（樣式只能夠?qū)Φ谝粋€字符生效）。
- 【::first-line】在第一行之前添加樣式（樣式只能夠?qū)Φ谝恍形谋旧В?/strong>
- 【::before】在指定元素之前添加樣式。
- 【::after】在指定元素之后添加樣式。
- 【::selection】在元素選中之后顯示的樣式（這個只能支持：color、backgroud、cursor、outline四個屬性）。
偽元素選擇器添加文本內(nèi)容是通過【content】屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border: 2px solid blue;
}
.box1::first-letter {
font-size: 30px;
color: red;
}
.box2::first-line {
font-size: 20px;
color: green;
}
.box3::before {
content: '***';
color: red;
font-size: 20px;
}
.box4::after {
content: 'XXX';
font-size: 30px;
color: green;
}
.box5::selection {
color: white;
background: black;
}
</style>
</head>
<body>
<div class="box1">
偽元素選擇器first-letter
</div>
<div class="box2">
偽元素選擇器first-line
</div>
<div class="box3">
偽元素選擇器before
</div>
<div class="box4">
偽元素選擇器aftre
</div>
<div class="box5">
偽元素選擇器selection
</div>
</body>
</html>
2.5、結(jié)構(gòu)偽類選擇器：
結(jié)構(gòu)偽類選擇器，可以從多個元素中，選擇指定的元素進(jìn)行操作，常見的結(jié)構(gòu)偽類選擇器有如下這些：
結(jié)構(gòu)偽類選擇器：
- :empty：選擇內(nèi)容是空的元素標(biāo)簽的選擇器。
- :root：匹配文檔的根元素，即：html標(biāo)簽。
- :first-child：選擇第一個孩子元素。
- :last-child：選擇最后一個孩子元素。
- :nth-child(n)：選擇索引值是n的孩子元素，索引值從1開始。
- :nth-child(2n)、:nth-child(even)：選擇索引值是偶數(shù)的。
- :nth-child(2n-1)、:nth-child(2n+1)、:nth-child(odd)：選擇索引值是奇數(shù)的。
2.6、目標(biāo)偽類選擇器：
目標(biāo)偽類選擇器，一般是錨點(diǎn)結(jié)合使用，語法格式：
- 【XXX:target】：當(dāng)選擇對應(yīng)目標(biāo)之后，會觸發(fā)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
body>div>div {
height: 600px;
border: 1px solid black;
}
ul {
position: fixed;
top: 0;
}
/* 目標(biāo)偽類選擇器 */
div:target {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li><a href="#one">第一頁</a></li>
<li><a href="#two">第二頁</a></li>
<li><a href="#three">第三頁</a></li>
</ul>
<div>
<div id="one">第一頁</div>
<div id="two">第二頁</div>
<div id="three">第三頁</div>
</div>
</body>
</html>
2.7、UI元素狀態(tài)選擇器：
UI元素狀態(tài)選擇器，是針對表單元素設(shè)置的，有下面四種選擇器：
UI元素狀態(tài)選擇器
- :enabled：匹配所有處于可用狀態(tài)的元素。
- :disabled：匹配所有處于禁用狀態(tài)的元素。
- :checked：匹配所有選擇狀態(tài)的元素。
- ::selection：匹配所有處于選中、高亮狀態(tài)的元素（選中文本時候，注意是兩個冒號）。
- :focus：獲得焦點(diǎn)時候的選擇器。
案例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI狀態(tài)選擇器</title>
<style>
input:enabled {
background-color: lightblue;
}
input:disabled {
background-color: pink;
}
input[type=checkbox]:checked {
/* 去掉默認(rèn)樣式 */
appearance: none;
width: 20px;
height: 20px;
background: red;
}
input:focus {
background-color: aqua;
}
div::selection {
background-color: lightblue;
}
</style>
</head>
<body>
<form action="#">
用戶名：<input type="text"> <br>
密碼: <input type="text"> <br>
多選<input type="checkbox"> <br>
<input type="button" value="提交" disabled>
</form>
<div>
BBBBBBBBBBBBBB
</div>
</body>
</html>
2.9、否定偽類選擇器：
否定偽類選擇器，語法格式：
- 【:not(s)】：對指定的選擇器，進(jìn)行否定選中。
div:not(:first-child) {
background-color: aqua;
}
2.10、屬性選擇器：
根據(jù)元素的屬性或者屬性值來選擇元素。一般情況下，是針對表單、超鏈接采用屬性選擇器居多。屬性選擇器的使用格式：
屬性選擇器：
- 第一種方式：【[屬性名稱]】，通過中括號包裹屬性名稱（查找含有指定屬性名稱的標(biāo)簽元素）。
- 第二種方式：【[屬性名稱=“value”]】，通過中括號，包裹屬性名稱和屬性值，查找含有指定屬性名稱，并且屬性值等于給定的標(biāo)簽元素，（這種只能匹配單個屬性值）。
- 第三種方式：【[屬性名稱**~=****“value”]】，查找包含指定屬性名稱，并且屬性值中包含給定值value的標(biāo)簽元素（這種是能夠從多個屬性值中進(jìn)行匹配）。**
- 第四種方式：【[屬性名稱**|=****“value”]】，查找包含指定屬性名稱，并且屬性值是以【value】或者【value-】開頭的元素（這種只能匹配單個屬性值）。**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>屬性選擇器</title>
<style>
input {
display: block;
margin: 10px;
}
/* 屬性選擇器 */
/* 查找所有包含type屬性的input標(biāo)簽 */
input[type] {
border: 2px solid blue;
padding: 5px 10px;
}
/* 查找所有type屬性等于text的input標(biāo)簽 */
input[type='text'] {
background-color: lightgray;
}
/* 查找所有class屬性包含box2值的input標(biāo)簽 */
input[class~='box2'] {
width: 200px;
}
/* 查找所有class屬性值是以box01開頭的input標(biāo)簽 */
input[class|='box'] {
width: 300px;
}
</style>
</head>
<body>
<input type="text" name="age">
<input type="text" name="uname">
<input type="password" class="box1 box2">
<input type="text" class="box-css01">
</body>
</html>
運(yùn)行效果如下：文章來源：http://www.zghlxwxcb.cn/news/detail-705693.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-705693.html
到了這里，關(guān)于CSS三種樣式表、樣式表優(yōu)先級、CSS選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
