收藏
WJ批改狀態(tài)：合格
老師批語(yǔ)：寫(xiě)的非常認(rèn)真，格式工整！
實(shí)例：
body {background-color: red;}
瀏覽器顯示結(jié)果：
實(shí)例：
<head><style>.box{width:200px;height:200px;background:green;}</style></head><body><div class="box"></div></body>
瀏覽器顯示結(jié)果：
實(shí)例：
<head><style>.box{width:200px;height:200pxbackground:red;}.box.box1{background:blue;}</style></head><body><div class="box box1"></div></body>
瀏覽器顯示結(jié)果：
學(xué)習(xí)重點(diǎn)：認(rèn)識(shí)這種寫(xiě)法，知道這種寫(xiě)法是什么意思，在css中后面相同的屬性會(huì)覆蓋前面的屬性，所以顯示結(jié)果為藍(lán)色。
實(shí)例：
<head><style>.box#box{width:200px;height:200px;background:red;}#box{background:blue;}</style></head><body><div class="box" id="box"></div></body>
瀏覽器顯示結(jié)果：
學(xué)習(xí)重點(diǎn)：因?yàn)?box#box的優(yōu)先級(jí)要高于#box所以顯示為紅色。而#box.box的優(yōu)先級(jí)要比.box#box的優(yōu)先級(jí)更高，了解復(fù)合類樣式的優(yōu)先級(jí)規(guī)則。id現(xiàn)在很少用，大部分用在表單和錨點(diǎn)上，所以盡可能用class選擇器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>選擇器：簡(jiǎn)單選擇器</title><style>.container {width: 625px;height: 625px;padding: 5px;background: #ffffff;display: grid;/*網(wǎng)格布局*/grid-template-columns: repeat(3, 1fr);/*網(wǎng)格的列為3個(gè)寬度相同的列*/grid-gap: 5px;/*網(wǎng)格間距為5像素*/}.item {font-size: 4rem;rem/*相對(duì)大小*/display: flex;/*彈性布局*/justify-content: center;align-items: center;/*居中*/background: #f5bb1e;/*垂直居中*/}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item center">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div></body></html>
接下來(lái)用后代選擇器的方式，給九宮格加上邊框
<style>.container .item{border:2px solid #000;}</style>
顯示結(jié)果：
給所有的具有.item選擇器的元素都加上了邊框
實(shí)例：
<style>body > div {border:5px solid orange;}</style>
顯示結(jié)果：
如果用后代選擇器的話
<style>body div {border:5px solid blue;}</style>
顯示結(jié)果：
學(xué)習(xí)重點(diǎn)：后代選擇器表示的是不僅是父子關(guān)系，它會(huì)獲得所有后代元素，用空格來(lái)連接；父子選擇器表示的僅僅是父子關(guān)系，用>來(lái)連接。
實(shí)例：
<style>.item.center + .item{background:greenyellow;}</style>
顯示結(jié)果：
實(shí)例：
<style>.item.center ~ .item{background:red;}</style>
顯示結(jié)果：
實(shí)例：(九宮格)
<style>.container :first-child{background:red;}</style>
結(jié)果：
這里我發(fā)現(xiàn)如果.container后面沒(méi)空格的話就會(huì)把樣式加給自身.container
<style>.container:first-child{background:red;}</style>
結(jié)果：
學(xué)習(xí)重點(diǎn)：:first-child沒(méi)有父元素的話會(huì)從根元素開(kāi)始匹配每個(gè)父元素下的第一個(gè)元素，一定要在:first-child前面加上父元素并加空格
實(shí)例：
<style>.container :last-child{background:red;}</style>
結(jié)果：
實(shí)例1：選擇第四個(gè)方框
<style>.container :nth-child(4){background:red;}</style>
結(jié)果：
實(shí)例2：選擇奇數(shù)偶數(shù)元素
<style>.container :nth-child(2n){background:red;}/*偶數(shù)為紅色*/.container :nth-child(2n-1){background:green;}/*奇數(shù)為綠色*/</style>或者用even表示偶數(shù)，odd表示奇數(shù).container :nth-child(even){background:red;}/*偶數(shù)為紅色*/.container :nth-child(odd){background:green;}/*奇數(shù)為綠色*/
結(jié)果：
實(shí)例3：選擇前3個(gè)元素
<style>.container :nth-child(-n + 3){background:blue;}</style>
結(jié)果：
實(shí)例3：選擇倒數(shù)前3個(gè)元素
<style>.container :nth-last-child(-n + 3){background:blue;}</style>
結(jié)果：
實(shí)例3：選擇第5個(gè)到第8個(gè)元素
<style>.container :nth-child(n + 5):nth-child(-n + 8){background:green;}</style>
結(jié)果：
學(xué)習(xí)重點(diǎn)：n的索引是從0開(kāi)始的，所以2n就是偶數(shù)，2n+1/2n-1就是奇數(shù),選擇從第幾個(gè)開(kāi)始是加幾，選擇從第一個(gè)到第幾個(gè)是-n加幾，選擇n是從第5個(gè)到第8個(gè)是 :nth-chlid(n+5):nth-child(-n+8)，兩者可以結(jié)合使用
首先把九宮格代碼部分改成<span class="item"></span>
<div class="item">1</div><div class="item">2</div><div class="item">3</div><span class="item">4</span><span class="item">5</span><span class="item">6</span><span class="item">7</span><span class="item">8</span><span class="item">9</span>
實(shí)例：
<style>.container :last-of-type{background:pink;}</style>
結(jié)果：
分組結(jié)構(gòu)偽類分兩步：1.元素按類型進(jìn)行分組；2.在分組中根據(jù)索引進(jìn)行選擇
實(shí)例1：匹配span分組中的第三個(gè)元素
<style>.container span:nth-of-type(3){background:pink;}</style>
結(jié)果：
實(shí)例2：匹配span分組中的前三個(gè)元素
<style>.container span:nth-of-type(-n + 3){background:pink;}</style>
結(jié)果：
實(shí)例3：匹配span分組中的倒數(shù)2個(gè)元素
<style>.container span:nth-last-of-type(-n + 2){background:pink;}</style>
結(jié)果：
實(shí)例：
<head><style>#login-form {display: none;}#login-form:target {display: block;}/*當(dāng)前#login-form的表單元素被a的錨點(diǎn)激活時(shí)執(zhí)行*/</style></head><body><a href="#login-form">我要登錄：</a><form action="" method="post" id="login-form"><label for="email">郵箱：</label><!--<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）--><input type="email" name="email" id="email" /><label for="password">密碼：</label><input type="password" name="password" id="password" /><button>登錄</button></form></body>
瀏覽器顯示結(jié)果：
點(diǎn)擊后
實(shí)例：
<style>input:focus{background:yellow;}</style>
顯示結(jié)果：
實(shí)例：
<style>input::selection{color:red;background-color:greenyellow;}</style>
顯示結(jié)果：
::selection前面是雙冒號(hào)
實(shí)例：
<style>.list > *:not(:nth-of-style(2)){color:red;}</style><body><ul class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></body>
顯示結(jié)果：
實(shí)例：
<style>.list::before{content:"購(gòu)物車";font-size:2rem;}.list::after{content:"結(jié)算中...";color:red;font-size:2rem;}</style><body><ul class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></body>
顯示結(jié)果：
::before,::after前面都是雙冒號(hào)
<style>table,td,tr,th,caption {border: 1px solid #000;padding: 0px;margin: 0px;}</style><!-- 表格：數(shù)據(jù)格式化的工具 --><table><!-- 表格標(biāo)題 --><caption>員工信息表</caption><!-- 表格頭部 --><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><!-- 表格主體 --><tbody><tr><td>張三</td><td>男</td><td>22</td></tr><tr><td>張四</td><td>男</td><td>23</td></tr><tr><td>張莉</td><td>女</td><td>22</td></tr></tbody><!-- 表格尾部 --><tfoot><tr><td>尾部</td><td>尾部</td><td>尾部</td></tr></tfoot></table>
顯示結(jié)果：
css與id選擇器的應(yīng)用場(chǎng)景，id選擇器現(xiàn)在大部分用在表單，錨點(diǎn)上，其它地方很少用，盡可能的用class選擇器。
空格、>、+、~分別對(duì)應(yīng)后代選擇器、父子選擇器、同級(jí)相鄰選擇器、同級(jí)所有選擇器
first-child,last-child,nth-child(n),nth-last-child(n),選擇第一個(gè)元素，最后一個(gè)元素，選擇任意一個(gè)元素，選擇任意倒數(shù)一個(gè)元素，n初始索引值為1，但是有點(diǎn)難理解，課堂中說(shuō)的一個(gè)例子，選擇前三個(gè)元素，nth-child(-n+3),如果n的值為1，這里是不對(duì)的，n的值此時(shí)應(yīng)該是0，老師后來(lái)說(shuō)表達(dá)式的情況下為0，后來(lái)經(jīng)過(guò)自己邊寫(xiě)邊想，發(fā)現(xiàn)確實(shí)是這樣的，n正常情況下是1，在表達(dá)式中就是0，終于想明白了！
last-of-type,first-of-type,元素:nth-of-type(n),元素:nth-last-type(n)
微信掃碼
關(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)