- :enabled與 :disabled選擇器
在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復(fù)選框等。在默認(rèn)情況之下，這些表單元素都處在可用狀態(tài)。要使用“:disabled”選擇器，需要在表單元素的HTML中設(shè)置“disabled”屬性。
例如為所有 type="text" 的被禁用的 input 元素設(shè)置背景色：
html代碼
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled"
value="Disneyland" /><br>
</form>
CSS代碼
input[type="text"]:enabled
{
background:#ffff00;
}
input[type="text"]:disabled
{
background:#dddddd;
}
運(yùn)行結(jié)果：
- checked選擇器
在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)。:checked 選擇器匹配每個(gè)已被選中的 input 元素（只用于單選按鈕和復(fù)選框）。在CSS3中，我們可以通過(guò)狀態(tài)選擇器“:checked”配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。
例如通過(guò)“:checked”狀態(tài)來(lái)自定義復(fù)選框效果。
html代碼
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
<lable for="usename">我是選中狀態(tài)</lable>
</div>
<div class="wrapper">
<div class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</div>
<label for="usepwd">我是未選中狀態(tài)</label>
</div>
CSS代碼
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}
.wrapper {
margin-bottom: 10px;
}
.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.box input {
opacity: 0;
position: absolute;
top:0;
left:0;
}
.box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
input[type="checkbox"] + span {
opacity: 0;//沒(méi)有被選中的input將span設(shè)置為透明的
}
input[type="checkbox"]:checked + span {
opacity: 1;//將選中的input的span設(shè)置為不透明的
}
運(yùn)行結(jié)果
- ** ::selection選擇器**
注意，“::selection選擇器”是雙冒號(hào)。其實(shí)雙冒號(hào)往往都是“偽元素”，而單冒號(hào)往往都是“偽類(lèi)”。
“::selection”偽元素是用來(lái)匹配突出顯示的文本(用鼠標(biāo)選擇文本時(shí)的文本)。瀏覽器默認(rèn)情況下，用鼠標(biāo)選擇網(wǎng)頁(yè)文本是以“深藍(lán)的背景，白色的字體”顯示的，效果如下圖所示：
用鼠標(biāo)選中“運(yùn)行結(jié)果”文本時(shí)，默認(rèn)顯示樣式為：藍(lán)色背景、白色文本。
有的時(shí)候設(shè)計(jì)要求,不使用上圖那種瀏覽器默認(rèn)的突出文本效果，需要一個(gè)與眾不同的效果，此時(shí)“::selection”偽元素就非常的實(shí)用。不過(guò)在Firefox瀏覽器還需要添加前綴。
示例：將鼠標(biāo)選中的文本時(shí)的背景變成 orange，文本變成 white。
html代碼
<body>
<p>“::selection”偽元素是用來(lái)匹配突出顯示的文本。瀏覽器默認(rèn)情況下，選擇網(wǎng)站文本是深藍(lán)的背景，白色的字體，
有的設(shè)計(jì)要求不使用上圖那種瀏覽器默認(rèn)的突出文本效果，需要一個(gè)與眾不同的效果，此時(shí)“::selection”偽元素就非常的實(shí)用。不過(guò)在Firefox瀏覽器還需要添加前綴。</p>
</body>
css代碼
::selection{
background: orange;
color: white;
}
//火狐瀏覽器
::-moz-selection{
background: orange;
color: white;
}
運(yùn)行結(jié)果
- ** :read-only選擇器**
“:read-only”偽類(lèi)選擇器用來(lái)指定處于只讀狀態(tài)元素的樣式。簡(jiǎn)單點(diǎn)理解就是，元素中設(shè)置了“readonly=’readonly’”
舉例設(shè)置textarea的只讀樣式
html代碼
<div>
<label for="comment">評(píng)論：</label>
<textarea name="comment" id="" cols="30" rows="10" readonly="readonly"></textarea>
</div>
css代碼
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
//火狐使用
textarea:-moz-read-only{
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
}
//其它使用
textarea:read-only {
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
}
運(yùn)行結(jié)果
- :read-write選擇器
“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來(lái)指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。
示例演示
使用“:read-write”選擇器來(lái)設(shè)置不是只讀控件的文本框樣式。
html代碼
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中國(guó)上海" readonly="readonly" />
</div>
css代碼
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
input[type="text"]:-moz-read-only{
border-color: orange;
}
input[type="text"]:read-only{
border-color: orange;
}
input[type="text"]:-moz-read-write{
border:2px solid red;
}
input[type="text"]:read-write{
border:2px solid red;
}
運(yùn)行結(jié)果
- ** ::before和::after選擇器**
這兩個(gè)選擇器也是雙冒號(hào)，這是CSS3為了區(qū)別偽元素和偽類(lèi)而使用的，單冒號(hào)(:)用于CSS3偽類(lèi)，雙冒號(hào)(::)用于CSS3偽元素。具體的區(qū)別請(qǐng)參考這個(gè)網(wǎng)頁(yè)
before用雙冒號(hào)與單冒號(hào)的區(qū)別
::before和::after這兩個(gè)主要用來(lái)給元素的前面或后面插入內(nèi)容，這兩個(gè)常和"content"配合使用，使用的場(chǎng)景最多的就是清除浮動(dòng)。
示例插入內(nèi)容
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
div::before
{
content:"CSS3教程";
}
</style>
</head>
<body>
<div>選擇器</div>
</body>
</html>
運(yùn)行結(jié)果
清除浮動(dòng)
清除浮動(dòng)是一個(gè)時(shí)常會(huì)遇到的問(wèn)題，不少人的解決辦法是添加一個(gè)空的 div 應(yīng)用 clear:both; 屬性?，F(xiàn)在，無(wú)需增加沒(méi)有意義的元素，僅需要以下樣式即可在元素尾部自動(dòng)清除浮動(dòng)：簡(jiǎn)單又不會(huì)增加元素。
.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: block; content: ""; height: 0; clear: both; visibility:hidden;}
關(guān)于clearfix清除浮動(dòng)也有其他版本的寫(xiě)法，具體了解可以看下clearfix清除浮動(dòng)進(jìn)化史
clearfix清除浮動(dòng)進(jìn)化史
想一想
| 選擇器 | 作用 |
|---|---|
| :enabled與 :disabled選擇器 | |
| checked選擇器 | |
| ::selection選擇器 | |
| :read-only選擇器 | |
| :read-write選擇器 | |
| ::before和::after選擇器 |
參考：慕課網(wǎng)
最近在忙畢業(yè)論文開(kāi)題，更文較慢，請(qǐng)見(jiàn)諒
