首頁 > 博客列表 > 偽類選擇器：狀態(tài)匹配及元素屬性縮寫等

博主信息

博文 13

粉絲 0

評論 2

訪問量 18340

專題推薦

更多>

偽類選擇器：狀態(tài)匹配

一、鏈接

代碼：
html:

<body>
    <a href="http://ipnx.cn">PHP中文網(wǎng)</a>
</body>

標簽的四種狀態(tài)：
css：樣式
1、默認狀態(tài)：沒有訪問、點擊
a:link{ color:blue; }
2、已訪問過的狀態(tài)
a:visited{ color:green; }
3、懸停狀態(tài)
a:hover{ color:red; }
4、激活，當鼠標點擊壓下去的時候
a:active{ color:yellow; }

二、表單

html:

<form action="">
    <p>用戶名：<input type="text" readonly autofocus></p>
</form>

css:
input:read-only{ background-color:linghtgreen; }

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

html:

<form action="">
    <h2 class="on" id="foo">選擇器優(yōu)先級</h2>
</form>

1、當選擇器相同時，與書寫順序有關，后面的樣式覆蓋前面的
css：
h2{ color:gold; }
h2{ color:blue; }
顯示：藍色

2、當選擇器不同時與優(yōu)先級相關，級別高的覆蓋級別低的。如果仍想提升選擇器的優(yōu)先級，此時到了 class 我們應該用 Id 級
css:
#foo{ color:gold; }
.on{ color:blue; }

結論： ID > class 類 > tag 標簽

選擇器的優(yōu)先級的提權方式

選擇器的類型對優(yōu)先級的影響
css:
.on{ color:gold; }
h2{ color:blue; }
顯示：金色

原因：ID > class 類 > tag 標簽
實際工作中，應該用一系列的選擇器組合來靈活的設置優(yōu)先級
大家都是標簽級，為什么寫到后面的無效，一定有一個規(guī)則
css:
body h2{ color:gold; }
h2{ color:blue; }
顯示：金色

原因：有一個計算公式：[id 選擇器的數(shù)量，class 選擇器的數(shù)量，tag 選擇器的數(shù)量]

body h2 的權重[0,0,2]
h2 的權重[0,0,1] 這個的標簽權重少（低）

具體標準：
[1,0,0]>[0,1,1]>[0,1,0]>[0,0,3]

注意：如果想繼續(xù)提權，選擇一個比 body h2 權重級別高的組合就可以。

書寫順序 tag/class/id {…}

元素屬性的簡寫

1、字體屬性

h2{
    font-style: italic;
    font-variant: small-caps; 
    font-weight: bold;
    font-size: 12px;
    font-weight: bold;
    line-height: 140%;
    font-family: arial;
}

簡寫：
h2{font:italic small-caps bold 12px/140% arial }

h2{
    background-color: #FFF0000;
    background-image: url(../img/1.png);
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-position: 0 0; 
}

簡寫：
h2{background:#FFF0000 url(../img/1.png) no-repeat fixed }

盒模型的屬性縮寫

.box{
    width:200px
    height:200px
    background-color:violet;
    box-sizing:border-box;
}

.box{
    邊框\每個可以設置三個屬性：寬度，樣式，顏色
    border-top-width:5px;
    border-top-color:red;
    border-top-style:solid;
}

簡寫:
.box{border-top:5px red solid}

內(nèi)邊距 padding：上右下左；順時針方向

簡寫:
{padding: 5px 10px 15px 20px;}

{padding:10px 20px 15px} (上左右下)
{padding:10px 20px} （上下左右）
{padding:10px } （上下左右）

外邊距 margin: 上右下左；順時針方向

簡寫:
{margin: 5px 10px 15px 20px}

{margin: 5px 10px 15px} （上左右下）
{margin: 5px 10px} （上下左右）
{margin：5px} （上下左右）

批改老師：

天蓬老師

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

老師批語：

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

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

0條評論

作者最新博文

Markdown 語法簡介

2020-12-10 08:35:25

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