收藏
批改狀態(tài)：合格
老師批語：代碼寫得很規(guī)范
CSS樣式是對(duì)HTML的補(bǔ)充，我們可以通過CSS樣式能夠節(jié)省很多重復(fù)性的格式設(shè)置，如網(wǎng)頁的文字大小很顏色等，通過CSS樣式可以很輕松的設(shè)置網(wǎng)頁元素的顯示方式和顯示位置，還可以使用CSS在網(wǎng)頁中實(shí)現(xiàn)一些簡(jiǎn)單交互的效果，大大提升了網(wǎng)頁的內(nèi)容識(shí)別和美觀。
CSS樣式是有選擇器和屬性構(gòu)成，那么什么是選擇器？這個(gè)問題其實(shí)很簡(jiǎn)單，在生活中就有很多類似選擇器這樣的例子，就拿我們平常使用手機(jī)聊天或者打游戲舉個(gè)例子吧（雖然我很少玩游戲，但是誰沒有童年呢是吧），就比如說你聽到朋友介紹一款比較活的手游或者好用的APP聊天工具，你也只是聽朋友的描述或者介紹它們也沒有見過，但是當(dāng)你被提起想使用的興趣時(shí)你的第一想法肯定是去下載，但是這個(gè)過程的前提是你得知道應(yīng)用名稱然后在應(yīng)用市場(chǎng)去找到它們?nèi)缓蟛拍苓x擇下載，沒錯(cuò)，CSS的選擇器也是一個(gè)查找選擇的過程，首先通過類名、ID、 元素名、元素屬性等在頁面中找到它們?nèi)缓笪覀儾拍苓x擇并對(duì)其進(jìn)行樣式定義操作。
那么CSS的選擇器都有哪些呢？
元素選擇器
屬性選擇器
類選擇器
ID選擇器
群組選擇器
通配符選擇器
后代選擇器
子選擇器
同級(jí)相鄰選擇器
同級(jí)所有選擇器
偽類選擇器
元素選擇器：元素選擇器是通過直接使用元素名選擇的選擇器
屬性選擇器：顧名思義，就是通過元素現(xiàn)有的屬性對(duì)其進(jìn)行選擇
類選擇器：是通過元素上已定義的class屬性的元素對(duì)其進(jìn)行選擇
ID選擇器：是通過元素上已定義的ID屬性對(duì)其進(jìn)行選擇，需要注意的是ID在頁面中是唯一的，如每個(gè)公民的身份證號(hào)一樣不可重復(fù)
群組選擇器：這個(gè)選擇器其實(shí)就是選擇頁面中多個(gè)元素，元素可以是ID屬性、類屬性、元素名等，多個(gè)屬性之間必須使用”，“英文逗號(hào)進(jìn)行分隔。例如：div,#container,.nav,[href="" ] {...} 。
通配符選擇器：這個(gè)選擇器其實(shí)就是選擇頁面中所有的元素
后代選擇器：該選擇器就是選擇某個(gè)父元素下面所有的元素，無論是子元素還是孫子級(jí)的元素都可以被選中
子選擇器：這個(gè)選擇器與后代選擇器不同在于它只作用于父元素的子元素，而子元素中如果包含有孫子元素也都不會(huì)被選中
同級(jí)相鄰選擇器：也被稱為相鄰選擇器，它只選擇與它同級(jí)且相鄰的后面一個(gè)元素
同級(jí)所有選擇器：這個(gè)選擇器也被稱為相鄰?fù)ㄓ眠x擇器，它與相鄰兄弟選擇器不同之處在于，它不只是選擇相鄰后面的一個(gè)元素而是相鄰后面所有的元素
偽類選擇器：這個(gè)選擇器也被稱為動(dòng)態(tài)偽類選擇器，這是一種CSS的用戶行為選擇器，它包括:link未被訪問的超鏈接、:visited已被訪問過超鏈接、:active元素被激活狀態(tài)、:hover鼠標(biāo)經(jīng)過元素狀態(tài)、:focus元素獲得焦點(diǎn)等交互偽類。
同時(shí)也包括表單偽類：:checked匹配選中的復(fù)選框按鈕或單選按鈕表單元素、:enabled匹配所有啟用的表單元素、:disabled匹配所有禁用的表單元素。
還包括結(jié)構(gòu)偽類：:first-child匹配父元素中包含的第一個(gè)子元素、:last-child匹配父元素中包含的最后一個(gè)子元素、:nth-child(n)選擇父元素中包含第n個(gè)子元素，其中的n可以是整數(shù)(1、2、3)也可以是關(guān)鍵字(even、odd)，也可以是是公式(如n+1、2n+1)并且n的初始值0、:nth-last-child選擇父元素中倒數(shù)第n個(gè)子元素，它和:nth-child不同之處在于它所選擇的元素順序是逆序的，其他作用都一樣、:nth-of-type(n)選擇父元素中包含具有指定類型的第n個(gè)元素、:nth-last-of-type(n)選擇父元素中具有指定類型的倒數(shù)第n個(gè)元素、:first-of-type選擇父元素中所包含的具有指定類型的第一個(gè)元素、:last-of-type選擇父元素中所包含的具有指定類型的最后一個(gè)元素、:only-child選擇父元素中所包含的唯一一個(gè)元素、:only-of-type選擇父元素中所包含的具有指定類型的同類型的同級(jí)兄弟元素、、
基本語法如下：
CSS選擇器 {
屬性 : 屬性值;
}
我們可以通過三種方式為我們頁面的元素引用所定義的樣式。
第一種是通過<link rel="stylesheet" href="style.css">來引用我們?cè)谕獠克x的外部樣式
第二種可以直接在<head> ... </head>元素中直接寫<style>...</style>的方式直接為網(wǎng)頁中的元素定義內(nèi)部樣式
第三種是通過直接在元素其實(shí)標(biāo)簽中定義<style="...">屬性定義內(nèi)聯(lián)樣式
下面是三種方式的結(jié)合代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基本語法</title>
<link rel="stylesheet" href="style.css"><!--通過引引入外部樣式為本頁面HTML元素定義樣式-->>
<style>
/* 通過在本頁面使用內(nèi)部樣式表的方式定義為網(wǎng)頁元素定義內(nèi)部樣式 */
p {
color: red;
}/*使用屬性器對(duì)元素P進(jìn)行選擇*/
.texte {
color:peru;
}/*使用類選擇器對(duì)元素li進(jìn)行選擇*/
#container {
background-color: pink;
}/*使用ID對(duì)元素div進(jìn)行選擇*/
</style>
</head>
<body>
<div id="container">
<p>今天是10月30號(hào)，我學(xué)到了什么是CSS樣式，如何引用以及CSS的選擇器，其中選擇器有：</p>
<ul>
<li>屬性選擇器: p [...]</li>
<li> <a href=""> 屬性選擇器: a [href=""] {...}</a></li>
<li class="texte">類選擇器: .texte {...}`</li>
<li>ID選擇器: #nav {...}</li>
<li>群組選擇器: p, ul {...}</li>
<li style="background-color: salmon;">通配符選擇器: * </li><!--使用內(nèi)聯(lián)樣式定義元素樣式-->
</ul>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
代碼運(yùn)行效果：
手寫代碼：
提示：除了上面引用方式之外，我們可以通過@import "style.css"或@import(style.css)兩種方式在樣式表中導(dǎo)入其他樣式表文件，這樣省去在一個(gè)頁面中使用多喝link元素引用樣式文件的麻煩。
CSS樣式是對(duì)HTML的補(bǔ)充，我們可以通過CSS樣式能夠節(jié)省很多重復(fù)性的格式設(shè)置，如網(wǎng)頁的文字大小很顏色等，通過CSS樣式可以很輕松的設(shè)置網(wǎng)頁元素的顯示方式和顯示位置，還可以使用CSS在網(wǎng)頁中實(shí)現(xiàn)一些簡(jiǎn)單交互的效果，大大提升了網(wǎng)頁的內(nèi)容識(shí)別和美觀?？偨Y(jié)出一句話就是：CSS的作用就是為美化HTML頁面結(jié)構(gòu)而生。
在學(xué)習(xí)強(qiáng)大的CSS之前我們需要先了解HTML元素的顯示方式。HTML元素分為塊級(jí)元素、行內(nèi)元素、行內(nèi)塊級(jí)元素。其中的塊級(jí)元素在頁面中是獨(dú)占一行顯示且除了自身帶有寬高屬性之外，它還可以由行內(nèi)元素?fù)伍_，同時(shí)也會(huì)自動(dòng)換行；行內(nèi)元素只會(huì)在頁面中多個(gè)行內(nèi)元素顯示在一行中，不會(huì)自動(dòng)換行，自身沒有寬高屬性，如果想要與塊級(jí)元素?fù)碛袑捀邔傧嗲易詣?dòng)換行需要使用display：block；對(duì)其進(jìn)行轉(zhuǎn)換；行內(nèi)塊級(jí)元素和行內(nèi)元素的不同之處在于它與塊級(jí)元素一樣擁有寬高屬性，但是即便如此它還是不能自動(dòng)換行，還是需要通過displa這個(gè)屬性對(duì)其進(jìn)行轉(zhuǎn)換。
要想讓塊級(jí)元素?fù)碛行袃?nèi)元素的默認(rèn)屬性在一行顯示且保留自身寬高屬性可以通過display：inline-block屬性值對(duì)進(jìn)行轉(zhuǎn)換。同樣行內(nèi)元素也是需要display對(duì)其進(jìn)行轉(zhuǎn)換為塊級(jí)元素才可以獨(dú)占一行顯示，如果你有一個(gè)這樣的需求，想讓行內(nèi)元素?fù)碛袎K級(jí)元素的屬性但不需要它獨(dú)占一行那么就可以通過display：inline-block這個(gè)值對(duì)對(duì)它進(jìn)行轉(zhuǎn)換。怎么樣？現(xiàn)在是不是感覺到display這個(gè)屬性的強(qiáng)大之處呢？其實(shí)它的作用不止于此，我們會(huì)在以后在對(duì)它進(jìn)行更進(jìn)一步的介紹。
CSS選擇器都有哪些基本選擇器，如何使用它們？
代碼部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>認(rèn)識(shí)傳說中的CSS</title>
<style>
/* CSS基本選擇器開始 */
/* 作為容器我現(xiàn)在想讓我里面的所有l(wèi)i元素的背景變個(gè)顏色怎么辦呢？，可以通過后代選擇器和子選擇器 */
#container li {
background-color: salmon;
} /*通過后代選擇器可以選擇li元素讓每個(gè)li的背景為salmon顏色*/
.list > li {
margin-top: 20px;
color: #fff;
font-size: 2rem;
}/*通過子選擇器結(jié)合后代選擇器讓每個(gè)li元素上面多出20像素的外邊距，讓他們看起來不那么擁擠*/
#container >p {
background-color: sandybrown;
margin-bottom: 10px;
} /*通過子選擇器讓父元素#container下面的所有p元素?fù)碛斜尘昂拖逻吘喽喑?0像素*/
.list + p {
color: springgreen;
}/*通過相鄰兄弟選擇器讓ul元素后面與它最相鄰的一個(gè)p元素字體顏色改變*/
.all ~ p {
color: red;
}/*通過相鄰?fù)ㄓ眠x擇器，我們讓除了類名為all的元素p的后面所有p元素的字體顏色改變*/
* {
margin: 0;
padding: 0;
} /*通過通配符選擇器我們讓頁面中所有元素的外邊距和內(nèi)邊距都設(shè)為零，這里不用擔(dān)心某些已經(jīng)設(shè)置固定邊距值得元素的值會(huì)被覆蓋，別忘了通配符選擇器的優(yōu)先級(jí)是0哦*/
[for="username"] {
color: crimson;
}/*通過屬性選擇器讓頁面中屬性為for="username"的labe元素中的字體變個(gè)顏色*/
/* CSS基本選擇器結(jié)束 */
/* -----------------------分割線---------------------------------- */
/* CSS的偽類選擇器開始 */
/* 我們可以通過CSS的結(jié)構(gòu)偽類選擇器定義我們網(wǎng)頁中某些元素的樣式 */
/* 動(dòng)態(tài)偽類選擇器是一種用戶行為的選擇器 */
.link a:link {
color: #ff742d;
}/*通過:link選擇器讓a元素的未被點(diǎn)擊訪問過的超鏈接字體顏色為#ff742d*/
.link a:visited {
color: teal;
}/*通過:visitted選擇器讓a元素的已被點(diǎn)擊訪問過的超鏈接字體顏色為teal顏色*/
.link a:active {
color: yellow;;
}/*通過:active選擇器讓a元素已激活(這里的激活是指鼠標(biāo)單擊超鏈接那一刻的動(dòng)作)的超鏈接字體顏色為yellow顏色*/
.link a:hover {
color:black;
}/*通過:hover選擇器讓a元素超鏈接在鼠標(biāo)經(jīng)過時(shí)字體顏色為black顏色*/
.link a:focus {
color:blue;
}/*通過:focus選擇器讓a元素超鏈接在獲得焦點(diǎn)時(shí)字體顏色為blue顏色*/
/* -----------------------動(dòng)態(tài)偽類結(jié)束分割線---------------------------------- */
/* 表單偽類選擇器是通過選擇表單不同的狀態(tài)對(duì)它進(jìn)行定義樣式，別忘記它們分別是：:checked 選中| :enabled啟用 | :disabled 禁用*/
input:disabled {
border: 1px solid crimson;
}/*通過:disabled 偽類選擇器選擇頁面中的禁用的表單并設(shè)置邊框顏色*/
input:enabled {
border: 1px solid #ff742d;
}/*通過:enabled 偽類選擇器選擇頁面中的啟用的表單并設(shè)置邊框顏色*/
input:checked {
display: inline-block;
width: 32px;
height: 32px;
}/*通過:checked 偽類選擇器選擇頁面中的擁有checked屬性的復(fù)選框（也可以應(yīng)用于單選框哦）并將其轉(zhuǎn)換為行內(nèi)塊元素后設(shè)置寬高32像素*/
/* -----------------------表單偽類結(jié)束分割線---------------------------------- */
/* 結(jié)構(gòu)偽類選擇器可以通過選擇頁面中HTML元素嵌套結(jié)構(gòu)來為被選擇元素定義樣式，也別忘了它們分別是通過元素位置選擇的：:first-child |:last-child|:nth-child(n)|:nth-last-child(n)；
還有通過我們所指定元素類型來選擇的：:nth-of-type()|:nth-last-of-type()|:first-of-type|:last-of-type*/
/* 通過元素在頁面中的嵌套位置結(jié)構(gòu)來選擇元素 */
#container li:first-child {
color: blue;
}/*通過結(jié)構(gòu)偽類:first-child選擇ul下面的第一個(gè)li元素改變它原來的白色字體修改為藍(lán)色*/
#container li:last-child {
font-size: 48px;
}/*通過結(jié)構(gòu)偽類:last-child選擇ul下面的最后一個(gè)li元素改變字體大小為48px*/
#container li:nth-child(2n) {
color:brown;
}/*通過結(jié)構(gòu)偽類:nth-child選擇ul下面的位置為偶數(shù)的元素改變顏色（想讓改為奇數(shù)可以用2n-1）*/
/* 通過元素在頁面中的嵌套結(jié)構(gòu)類型來選擇元素 */
.list>li:nth-of-type(2) {
font-size: 48px;
}/*通過結(jié)構(gòu)偽類選擇器:nth-of-type(n)選擇我們所指定的ul下面的第2個(gè)li類型的元素并為他設(shè)置字體大小48px，這里需要注意的是必須指定的li元素*/
.list>li:first-of-type {
font-size: 48px;
color: darkgreen;
}/*通過結(jié)構(gòu)偽類選擇器:frist-of-type選擇我們所指定的ul下面的第1個(gè)li類型的元素并為他設(shè)置字體大小48和字體顏色darkgreen，這里需要注意的是必須指定的li元素*/
.list>li:nth-last-of-type(3) {
font-size: 48px;
color: darkgreen;
}/*通過結(jié)構(gòu)偽類選擇器:nth-last-of-type(n)選擇我們所指定的ul下面的倒數(shù)第三個(gè)li類型的元素并為他設(shè)置字體大小48和字體顏色darkgreen，這里需要注意的是必須指定的li元素*/
.list>li:last-of-type {
font-size: 58px;
color:darkorchid;
}/*通過結(jié)構(gòu)偽類選擇器:last-of-type(n)選擇我們所指定的ul下面的最后一個(gè)li類型的元素并為他設(shè)置字體大小58和字體顏色darkorchid，這里需要注意的是必須指定的li元素*/
/* CSS的偽類選擇器結(jié)束 */
</style>
</head>
<body>
<div id="container">
<ui class="list">
<li>我是div的子元素1</li>
<li>我是div的子元素2</li>
<li>我是div的子元素3</li>
<li>我是div的子元素4</li>
<li>我是div的子元素5</li>
<li>我是div的子元素6</li>
<li>我是div的子元素7</li>
<li>我是div的子元素8</li>
<li>我是div的子元素9</li>
<li>我是div的子元素10</li>
</ui>
<p class="all">我和ul元素是同級(jí)我們是通用相鄰的好兄弟1</p>
<p>我和ul元素是同級(jí)我們是通用相鄰的好兄弟2</p>
<p>我和ul元素是同級(jí)我們是通用相鄰的好兄弟3</p>
<p>我和ul元素是同級(jí)我們是通用相鄰的好兄弟4</p>
<p>我和ul元素是同級(jí)我們是通用相鄰的好兄弟5</p>
<p>我和ul元素是同級(jí)我們是通用相鄰的好兄弟6</p>
<p>我和ul元素是同級(jí)我們是通用相鄰的好兄弟7</p>
<p class="link">
<a href="http://">我是上面最后一個(gè)p元素的子元素div元素是我爺爺，也不知道他是否認(rèn)識(shí)我，爺爺可以通過后代選擇器：div p a {...}來認(rèn)識(shí)我；我的父親p元素想讓我做事得使用子選擇器來找到我：p > a {...}1 忘了告訴你我是行內(nèi)元素，我和其他a元素會(huì)在一行顯示，，我們看起來會(huì)比較亂，兄弟情深哈哈</a>
<a href="http://">我是上面最后一個(gè)p元素的子元素div元素是我爺爺，也不知道他是否認(rèn)識(shí)我，爺爺可以通過后代選擇器：div p a {...}來認(rèn)識(shí)我；我的父親p元素想讓我做事得使用子選擇器來找到我：p > a {...}2 忘了告訴你我是行內(nèi)元素，我和其他a元素會(huì)在一行顯示，，我們看起來會(huì)比較亂，兄弟情深哈哈</a>
<a href="http://">我是上面最后一個(gè)p元素的子元素div元素是我爺爺，也不知道他是否認(rèn)識(shí)我，爺爺可以通過后代選擇器：div p a {...}來認(rèn)識(shí)我；我的父親p元素想讓我做事得使用子選擇器來找到我：p > a {...}3 忘了告訴你我是行內(nèi)元素，我和其他a元素會(huì)在一行顯示，，我們看起來會(huì)比較亂，兄弟情深哈哈</a>
<a href="http://">我是上面最后一個(gè)p元素的子元素div元素是我爺爺，也不知道他是否認(rèn)識(shí)我，爺爺可以通過后代選擇器：div p a {...}來認(rèn)識(shí)我；我的父親p元素想讓我做事得使用子選擇器來找到我：p > a {...}4 忘了告訴你我是行內(nèi)元素，我和其他a元素會(huì)在一行顯示，，我們看起來會(huì)比較亂，兄弟情深哈哈</a>
<a href="http://">我是上面最后一個(gè)p元素的子元素div元素是我爺爺，也不知道他是否認(rèn)識(shí)我，爺爺可以通過后代選擇器：div p a {...}來認(rèn)識(shí)我；我的父親p元素想讓我做事得使用子選擇器來找到我：p > a {...}5 忘了告訴你我是行內(nèi)元素，我和其他a元素會(huì)在一行顯示，，我們看起來會(huì)比較亂，兄弟情深哈哈</a>
</p>
<form action="login.php" method="POST" >
<label for="username">用戶名</label>
<input type="text" id="username" placeholder="請(qǐng)輸入用戶名" >
<label for="password">密碼</label>
<input type="password" id="password" placeholder="請(qǐng)輸入密碼" >
<label for="password2">確認(rèn)密碼</label>
<input type="password" id="password2" placeholder="請(qǐng)?jiān)俅屋斎朊艽a" disabled >
<input type="checkbox" name="a_html" id="a_html">
<label for="a_html">HTML</label>
<input type="checkbox" name="b_css" id="b_css">
<label for="b_css">CSS</label>
<input type="checkbox" name="c_php" id="c_php" checked disabled>
<label for="c_php">PHP</label>
</form>
</div>
<br>
<br>
<br>
<br>
<br>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
運(yùn)行效果：
手寫代碼：
五、總結(jié)1.首先必須知道CSS樣式選擇器是有優(yōu)先級(jí)的。元素選擇器0小于類選擇器1和ID選擇器2；類選擇器1小于ID選擇器2；ID選擇器2小于行內(nèi)樣式3；
2.為了方便維護(hù)我們的CSS樣式表文件必須從外部引用例如： <link rel="stylesheet" href="style.css">
3.為了頁面結(jié)構(gòu)的清晰美觀我們不建議在行內(nèi)添加樣式，特殊情況除外
4.CSS的結(jié)構(gòu)偽類雖然不多但是很很容易把他們搞混，因此我們需要多用多記
例如：
非限定類型：:first-child |:last-child|:nth-child(n)|:nth-last-child(n)我們只要知道他不管你要選擇的元素是什么類型只要位置正確都會(huì)被選中；
限定類型：:nth-of-type()|:nth-last-of-type()|:first-of-type|:last-of-type我們只要知道他不管你要選擇的元素在什么位置都不是他的菜，他想要的只是我們所指定的元素才會(huì)被選中，比如ul列表中有10個(gè)li元素，我們指定選擇第三個(gè)li元素，不管你這個(gè)列表中的li元素在什么位置或者前面還有什么h1或者是其他元素，只要他是這10個(gè)li元素中的第三個(gè)就可以被選中，所以由此得出，他只識(shí)別我們所知指定類型的元素，其他類型元素他會(huì)忽略掉不管
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)