首頁 > 博客列表 > 偽類選擇器與選擇器權(quán)重

博主信息

博文 12

粉絲 0

評論 0

訪問量 8049

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

選擇器/盒模型/常用單位

1. 偽類選擇器

根據(jù)元素的位置或狀態(tài)來匹配子元素

1.1 結(jié)構(gòu)偽類

與上下文選擇器很相似

:nth-child():在括號內(nèi)定義
:first-child:第一個元素
:last-child:最后一個

:nth-last-child()：倒數(shù)
代碼演示：

.list>.item:nth-child(1){
 background-color: violet;
 }/* 括號內(nèi)填寫多少數(shù)字就獲取對應(yīng)的元素 */

獲取第一個元素：

.list > .item:first-child {
background-color: violet-;
}

獲取最后一個元素：

.list > .item:last-child {
background-color: violet-;
}

獲取倒數(shù)第三個元素：

.list>.item:nth-last-child(3){
 background-color: violet;
 }

1.2 狀態(tài)偽類

鏈接,表單

:hover: 鼠標(biāo)懸停
:enabled: 有效控件
:disabled: 禁用控件
:checked: 選中控件
:required: 必選控件
:focus: 焦點(diǎn)控件
:not(): 過濾掉某些元素
:empty(): 空

更多查詢 MDN

2. 選擇器權(quán)重

原子選擇器: tag,class,id
原子選擇器權(quán)重: tag(1),class(10),id(100)

可簡單理解為: 標(biāo)簽是個位, class 是十位, id 是百位

3. 盒模型

3.1 一切皆”盒子”

盒子是頁面中可見的”矩形區(qū)域”
php.cn:<html>,{outline:1px solid red}

3.2 五大屬性

width: 寬
height: 高
padding: 內(nèi)邊距
border: 邊框
margin: 外邊距

3.3 border

可見屬性
可設(shè)置width,style,color

3.4 padding,margin

不可見屬性
僅可設(shè)置: width
大多數(shù)內(nèi)置元素都有默認(rèn)padding/margin
建議全部重置為 0,以方便自定義布局

3.5 width,height

默認(rèn)不包含 padding,border

3.6 box-sizing

box-sizing: 設(shè)置盒模型計(jì)算邊界
content-box: 默認(rèn)值,僅包括內(nèi)容區(qū)
border-box: 推薦值,寬高擴(kuò)展到可視邊框

3.7 通用初始化

```css

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

初識前端與環(huán)境搭建

2023-03-10 19:09:06

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱