博主信息

博文 45

粉絲 3

評論 0

訪問量 56570

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

細說選擇器優(yōu)先級與屬性簡寫

一、偽類選擇器的狀態(tài)匹配

<a>標簽這種鏈接有4中狀態(tài)，

默認狀態(tài)
已訪問過的
懸停狀態(tài)
激活狀態(tài)：鼠標點擊
這四種狀態(tài)順序是固定的，而且順序不能胡亂寫，否則會導(dǎo)致狀態(tài)無效

<style>
    /* 1. 默認狀態(tài) */
    a:link {
        color: aqua;
        text-decoration: none;
        font-size: 36px;
    }
    /* 2. 已訪問過的狀態(tài) */
    a:visited {
        color: blue;
    }
    /* 3. 懸停狀態(tài) */
    a:hover {
        color: red;
        text-decoration: underline;
    }
    /* 4. 激活狀態(tài)：鼠標點擊 */
    a:active {
        color: salmon;
    }
</style>

<a href="https://www.toutiao.com">今日頭條：信息創(chuàng)造價值</a>

示例圖：

<form> 標簽也同樣有狀態(tài)屬性，以下是學習過程中的一個表單的示例代碼：

<form action="">
    <p>用戶名：<input type="text" name="" value="admin" readonly></p>
    <p>郵&nbsp;&nbsp;&nbsp;箱：<input type="email" name="" value="aaa@bbb.com" required></p>
    <p>密&nbsp;&nbsp;&nbsp;碼：<input type="password" name="" value="12345678" disabled></p>
</form>

比如說我們?nèi)绻胍挠脩裘膇nput框的背景色，通常的做法是：

<style>
form p:first-of-type input:first-of-type {
    background-color: red;
}
</style>

效果如圖：

但是這樣寫就非常繁瑣了，這樣的話我們可以用狀態(tài)來匹配也能達到同樣的效果：

<style>
/* 可以使用以下簡寫方法 */
input:read-only {
    background-color: red;
}
</style>

當然，郵箱和密碼輸入框也可以使用對應(yīng)的狀態(tài)屬性來描述他們的背景顏色：

<style>
input:required {
    background-color: lightgreen;
}
input:disabled {
    background-color: lightsalmon;
}
</style>

整體效果如圖：

不僅如此，我們還以通過選中的狀態(tài)（focus）來修改被選中的input輸入框的背景色：

<style>
input:focus {
    background-color: lightgreen;
}
</style>

效果如圖：

二、選擇器的優(yōu)先級

通常在一個頁面中，我們經(jīng)常會遇到一個標簽上有多個選擇器，這個時候我們就在給元素樣式的時候就需要考慮它們的優(yōu)先級了，因為優(yōu)先級的不同，會導(dǎo)致樣式顯示的跟實際書寫代碼的順序不太一樣，例如有以下h2標簽：

<h2 class="on" id="foo">Hello World!</h2>

效果如圖：

1.當選擇器相同時，與代碼的書寫順序有關(guān)，后面的樣式自動覆蓋前面的樣式。

<style>
    h2 {
        color: green
    }
    h2 {
        color: red
    }
</style>

效果圖：

由以上案例可以看出，后面寫的h2樣式把第一個h2的樣式給覆蓋掉了。

2.當選擇器不同時，與其優(yōu)先級有關(guān)，級別高的覆蓋級別低的。

<style>
    .on {
        color: red;
    }
    h2 {
        color: green;
    }
</style>

效果圖：

由圖中可以看出來“class選擇器.on”的樣式覆蓋了h2的樣式，從這個案例可以得到一個結(jié)果：class選擇器的優(yōu)先級大于標簽選擇器。

3.目前是class選擇器，如果還想用更高級別的選擇器，我們還可以使用id選擇器。

<style>
    #foo {
        color: blue;
    }
    .on {
        color: red;
    }
</style>

效果圖：

注意：為了文章后面的描述方便，我把class選擇器簡稱為class，標簽選擇器簡化為tag，請id選擇器簡化為id，各位讀者朋友注意下。

通過上述3個案例，我們可以得出來一個選擇器優(yōu)先級的結(jié)論：

id > class > tag

三、選擇器優(yōu)先級的提權(quán)方式

通過上面的學習，我已經(jīng)掌握了CSS的優(yōu)先級相關(guān)的知識，但是一個頁面只能通過選擇器的類型來提升優(yōu)先級呢？通過后面的學習我發(fā)現(xiàn)并不是。實際工作當中，我們在寫CSS的時候可以應(yīng)用一系列的選擇器組合來靈活的設(shè)置優(yōu)先級。

例如有以下HTML代碼:

<h2 class="on off" id="foo">Hello World!</h2>

給出以下樣式：

<style>
body h2 {
    color: skyblue;
}
h2 {
    color: red;
}
</style>

效果圖：

從效果圖中看出，body h2的優(yōu)先級高于h2，這是為什么呢？
因為這里有一個計算公式：

[id的數(shù)量，class的數(shù)量，tag的數(shù)量]

根據(jù)我的學習心得，感覺這個公式是非常重要的，理解了這個，以后的CSS優(yōu)先級的問題都不會覺得再難，再出錯了。
明白了這個公式，我們也就知道了為什么上述的body h2的優(yōu)先級高于h2了，根據(jù)上述公式，body h2的計算公式：[0, 0, 2]，而h2的公式：[0, 0, 1]，從計算公式里面看出來，tag的數(shù)量前者比后者多1個，所以body h2的優(yōu)先級高。

還有一個問題，如果說tag一樣多呢，又該如何比較呢？其實，我在學習的時候也猜出來了，應(yīng)該是往前進一位，比較class的數(shù)量。

例如，以下樣式，h2的標簽樣式已經(jīng)是從html開始了，如果我們想要后來寫的樣式提權(quán)，無法再通過增加tag的數(shù)量來操作了，這時候我們就可以使用class（相當于往前進1）來覆蓋html body h2的樣式了。

<style>
<!-- [0, 1, 0] -->
.on {
    color: green
}
<!-- [0, 0, 3] -->
html body h2 {
    color: red;
}
</style>

效果圖：

由此類推，我們還可以通過id的數(shù)量來決定優(yōu)先級。

<style>
<!-- [1, 0, 0] -->
#foo {
    color: blue
}
<!-- [0, 1, 3] -->
html body h2.on {
    color: red;
}
</style>

效果圖：

通過這個公式，我們可以靈活的對HTML元素進行不同級別的CSS樣式的渲染，掌握這個，以后的CSS優(yōu)先級問題都不在話下，這個是重點，需要牢記掌握。

四、屬性的簡寫

1.在之前的CSS學習中，如果我要設(shè)置一個字體的樣式，我會這樣寫：

<style>
/* 字體屬性 */
.title {
    font-family: sans-serif;
    font-size: 26px;
    /* font-style: normal */
    font-style: italic;
    /* lighter */
    font-weight: 500;
}
</style>

但是這樣寫感覺有點太繁瑣了，于是學到了下面這種方法：

<style>
/* 簡寫如下 */
font: italic lighter 36px 微軟雅黑;
</style>

這二者效果是一樣的，如圖：

2.字體不光可以修飾普通的文本，還可以利用字體生成一些小圖標，至于如何利用字體生成小圖標呢？通過學習我了解到在iconfont-阿里巴巴矢量圖標庫可以選擇我們需要的圖標然后生成相應(yīng)的代碼。地址：https://www.iconfont.cn/

【第一步】引入項目中生成的fontclass代碼：

<link rel="stylesheet" href="./iconfont.css">

【第二步】：選擇相應(yīng)圖標并獲取類名，應(yīng)用于頁面：

<span class="icoxnfont icon-xxx"></span>

“iconfont” 是我們項目下的iconfont.css文件里的font-family屬性值。可以通過編輯項目查看，默認是 “iconfont”。

效果圖：

五、盒模型的屬性縮寫

一個頁面中的所有內(nèi)容都是盒子，任何一個頁面都是一個二維平面，二維平面中的元素只有兩種排列方式，要么水平，要么垂直，一個頁面中的所有元素都是一個盒子。它包含了：邊距、邊框、填充、和內(nèi)容。

如下圖就說明了一個盒模型的結(jié)構(gòu)：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的；
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框；
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的；
Content(內(nèi)容) - 盒子內(nèi)容，顯示圖像和文本等。

如下代碼可以清晰描述盒模型的相關(guān)內(nèi)容：

<style>
.box {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
    box-sizing: border-box;
}
.box {
    /* 邊框 */
    /* 每個邊框可以設(shè)置三個屬性: 寬度,樣式,顏色 */
    /* border-top-width: 5px;
    border-top-color: red;
    border-top-style: solid; */
    /* border-top: 5px red solid; */
    border-top: rgb(255, 0, 255) solid 5px;
    border-bottom: 10px red dashed;
    border: 5px solid #000;
}
.box {
    /* 內(nèi)邊距 */
    /* padding: 上 右 下 左; 按順時針方向*/
    padding: 5px 10px 15px 20px;
    /* 頁面看不到是因為padding是透明的,且背景色會自動擴展到padding */
    /* 將背景色裁切到到內(nèi)容區(qū) */
    background-clip: content-box;
    /* 當左右相等，而上下不相等，使用三值語法 */
    padding: 10px 20px 15px;
    /* 當左右相等，上下也相等，使用二值語法 */
    padding: 10px 30px;
    /* 如果四個方向全相等，使用單值語法 */
    padding: 10px;
    /* 總結(jié),當使用三值和二值時,只需要記住第二個永遠表示左右就可以了 */
}
.box {
    /* 外邊距:控制多個盒子之間的排列間距 */
    /* 四值,順時針,上右下左 */
    margin: 5px 8px 10px 15px;
    /* 三值,左右相等，上下不等 */
    margin: 10px 30px 15px;
    /* 二值,左右相等,上下也相等 */
    margin: 10px 15px;
    /* 單值,四個方向全相等 */
    margin: 8px;
}
</style>

<div class="box"></div>

效果圖

盒模型相關(guān)總結(jié)：
1.內(nèi)外邊距的都是按照順時針方向來表示值的，上、右、下、左；
2.如果使用二值、三值表示時，第二個值永遠表示左、右兩邊的值；
3.padding是透明的,在頁面中看不到，且背景色會自動擴展到padding；
4.邊框有三個屬性，寬度、樣式、顏色，這三個屬性的書寫沒有固定順序。

批改老師：