這篇和前兩篇內(nèi)容相關(guān)性不大，主要是涉及到一些css3的狀態(tài)選擇器，所以標(biāo)題從一開始。

一、【:enabled】選擇器

一看這個(gè)屬性就知道是專為表單元素提供的。在表單中輸入框，密碼框，復(fù)選框都有可用(:enabled)和不可用（:disabled）狀態(tài)，默認(rèn)情況，這些表單元素都處在可用狀態(tài)?？赏ㄟ^選擇器:enabled為這些表單元素設(shè)置樣式。

舉例：可用輸入框設(shè)置樣式。

<meta charset="utf-8">
<style>
div {
    margin: 30px;
}
input[type="text"]:enabled {
    border: 1px solid #f36;
    box-shadow: 0 0 5px #f36;
}
</style>

<form action="#">
<div>
<label>可用輸入框:<input type="text"/></label>
</div>
<div>
<label>禁用輸入框:<input type="text" disabled="disabled"/></label>
</div>
</form>

二、【：disabled】選擇器

看到有【:enabled】選擇器，就知道肯定有【:disabled】選擇器了?？疵志椭?disabled選擇器和:enabled選擇器相反，用來匹配不可用的表單元素。要使用:disabled選擇器，需要在表單元素中設(shè)置"disbled"屬性。

舉例：

<meta charset="utf-8">
<style type="text/css">
form {
    margin: 30px;
}
div {
    margin: 10px;
}
input {
    padding: 10px;
    border: 1px solid orange;
    background: #fff;
    border-radius: 5px;
}
input[type="submit"] {
    background: orange;
    color: #fff;
}
input[type="submit"]:disabled {
    background: #eee;
    border-color: #eee;
    color: #ccc;
}
</style>

<form action="#">
<div><input type="text"/></div>
<div>
<input type="submit"value="我要回到上一步"/>
<input type="submit"value="禁止點(diǎn)下一步"disabled />
</div>
</form>

三、【:checked】選擇器

在表單元素中，單選按鈕和復(fù)選按鈕都有選中和未選中狀態(tài)。如果有做過嘗試就知道，要設(shè)置這兩個(gè)按鈕默認(rèn)樣式是比較困難的。而在css3中，可以通過:checked選擇器配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。而:checked表示的是選中狀態(tài)。

這個(gè)是個(gè)大招，可以省不少功夫。

舉例：使用:checked選擇器模擬實(shí)現(xiàn)復(fù)選框樣式。【坑：點(diǎn)選框時(shí)無法選中，必須點(diǎn)文字才能選中】update:15/10/23

<meta charset="utf-8">
<style type="text/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;
}

.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;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}
</style>

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="username" /><span>√</span>
    </div>
    <label for="username">我是選中狀態(tài)</label>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="userpwd" /><span>√</span>
    </div>
    <label for="userpwd">我是未選中狀態(tài)</label>
  </div>
</form>

View Code

模擬實(shí)現(xiàn)一個(gè)選中和未選中的樣式。

沒有樣式時(shí)的效果圖如下，

最終添加樣式后效果如下。

舉例：:checked狀態(tài)選擇器模擬單選按鈕樣式。

<meta charset="utf-8">
<style type="text/css">
form {
    border: 1px solid #ccc;
    padding: 20px;
    width: 300px;
    margin: 30px auto;
}
.wrapper {
    margin-bottom: 10px;
}
.box {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    position: relative;
    background: orange;
    vertical-align: middle;
    border-radius: 100%;
}
.box input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;/*使input按鈕在span的上一層，不加點(diǎn)擊區(qū)域會(huì)出現(xiàn)不靈敏*/
}
.box span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    margin: -5px 0  0 -5px;
    z-index: 1;
}
input[type="radio"] + span {
    opacity: 0;
}
input[type="radio"]:checked + span {
    opacity: 1;
}
</style>

<form action="#">
<div class="wrapper">
<div class="box">
<input type="radio" checked="checked" id="male" name="gender"/>
<span></span>
</div>
<label for="male">男</label>
</div>

<div class="wrapper">
<div class="box">
<input type="radio" id="female" name="gender"/>
<span></span>
</div>
<label for="female">女</label>
</div>
</form>

View Code

四、【::selection】選擇器

設(shè)置選中文本樣式，詳情見CSS3 ::selection選擇器，用的好也可以出奇制勝。

五、【：read-only】選擇器

:read-only選擇器用來指定處于只讀狀態(tài)元素的樣式。簡單說就是設(shè)置了“readonly”=readonly的元素。

舉例：

<!DOCTYPE HTML>
<meta charset="utf-8"/>
<style type="text/css">
form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > input {
  margin-bottom: 10px;
}

input[type="text"] {
    border: 1px solid orange;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
}
input[type="text"]:-moz-read-only {
    border-color: #ccc;
}
input[type="text"]:read-only {
    border-color: #ccc;
}
</style>

<form>
姓名:<input type="text"name="fullname"/>
<br />
國籍:<input type="text"name="country"value="China"readonly="readonly"/>
<br />
<input type="submit"value="提交"/>
</form>

</body>
</html>

View Code

六、【:read-write】選擇器

有了【:read-only】，再來個(gè)與之相反的【:read-write】意思很明確，就是即可讀，也可寫的元素設(shè)置樣式。我覺得這個(gè)選擇器可能只是充數(shù)的，為了讓css3選擇器成為一個(gè)體系而加的，因?yàn)槟J(rèn)情況就是可讀可寫的啊。

上面的例子中如果改一點(diǎn)樣式：給input[type="text"]加上:read-write選擇器

input[type="text"]:read-write{
    border: 1px solid orange;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
}

效果如下：

即無法給國籍這個(gè)輸入框添加圓角之類的樣式。

七、【::before】和【::after】

慕課網(wǎng)這樣講：

::before和::after這兩個(gè)偽元素主要用來給元素的前面或者后面插入內(nèi)容，和“content” 配合使用，使用的場(chǎng)景最多的就是清除浮動(dòng)。

其實(shí)::before和::after內(nèi)容還是比較多的，了解更多可參考::before和::after偽元素的用法。

PS:每次看到慕課網(wǎng)這種偶巴，好厲害。的東東，就有種淡淡的憂桑，有木有想過妹子們的感受。

本文作者starof,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請(qǐng)諸位轉(zhuǎn)載注明出處：http://www.rzrgm.cn/starof/p/4717826.html有問題歡迎與我討論，共同進(jìn)步。

posted @ 2015-08-11 20:41 starof 閱讀(2060) 評(píng)論(1) 收藏舉報(bào)

刷新頁面返回頂部

starof

我是你的驕傲嗎？

css3 選擇器（三）

一、【:enabled】選擇器

二、【：disabled】選擇器

三、【:checked】選擇器

四、【::selection】選擇器

五、【：read-only】選擇器

六、【:read-write】選擇器

七、【::before】和【::after】

公告

starof

我是你的驕傲嗎？

css3 選擇器（三）

一、【:enabled】選擇器

二、【：disabled】選擇器

三、【:checked】 選擇器

四、【::selection】 選擇器

五、【：read-only】選擇器

六、【:read-write】選擇器

七、【::before】和【::after】

公告

我是你的驕傲嗎？

二、【：disabled】選擇器

三、【:checked】選擇器

四、【::selection】選擇器

五、【：read-only】選擇器

七、【::before】和【::after】