【CSS3】選擇器（表單元素選擇器 & 其他）--慕課網【學習總結】
1.表單元素選擇器
(１):enabled選擇器
在Web的表單中，有些表單元素有可用狀態（“:enabled”）和不可用狀態（“:disabled”），比如輸入框，密碼框，複選框等。我們可以通過偽選擇器“:enabled”對這些表單元素設定樣式。
- 在預設情況之下，這些表單元素都處在可用狀態。
【例如】
修改文字輸入框的邊框為2畫素的紅色邊框，並設定它的背景為灰色。
<!--html程式碼-->
<form action="#">
<div>
<label for="name">Text Input:</label /*css程式碼*/
div 效果：
（2）:disabled選擇器
“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設定“disabled”屬性。
（3）:checked選擇器
在表單元素中，單選按鈕和複選按鈕都具有選中和未選中狀態。在CSS3中，我們可以通過狀態選擇器“:checked”配合其他標籤實現自定義樣式
“:checked”表示的是選中狀態。
【例如】
通過“:checked”狀態來自定義複選框效果。
<!--html程式碼-->
<form action="#">
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
<lable for="usename">我是選中狀態</lable>
</div>
<div class="wrapper">
<div class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</div>
<label for="usepwd">我是未選中狀態</label>
</div>
</form>
/*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; /*不顯示√*/
}
input[type="checkbox"]:checked + span {
opacity: 1; /*顯示√*/
}效果：
（4）:read-only選擇器
“:read-only”偽類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設定了“readonly=’readonly’”。
【例如】
通過“:read-only”選擇器來設定地址文字框的樣式。
<!--html程式碼-->
<form action="#">
<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="中國上海" readonly="readonly" />
</div>
</form> /*css程式碼*/
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
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;
}效果：
（5）:read-write選擇器
“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。
2.其他選擇器
（1）::selection選擇器
“::selection”偽元素是用來匹配突出顯示的文字(用滑鼠選擇文字時的文字)。
瀏覽器預設情況下，用滑鼠選擇網頁文字是以“深藍的背景，白色的字型”顯示的，效果：
從上圖中可以看出，用滑鼠選中“專注IT、網際網路技術”、“純乾貨、學以致用”、“沒錯、這是免費的”這三行文字中，預設顯示樣式為：藍色背景、白色文字。
有的時候設計需要一個與眾不同的效果，此時“::selection”偽元素就非常的實用。不過在Firefox瀏覽器還需要新增字首。
【例如】
將Web中選中的文字背景變成紅色，文字變成綠色。
<!--html程式碼-->
<p>“::selection”偽元素是用來匹配突出顯示的文字。瀏覽器預設情況下，選擇網站文字是深藍的背景，白色的字型，</p>/*css程式碼*/
::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}效果：
（2）::before和::after選擇器
::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
【例1】
清楚浮動：
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}【例2】
關鍵程式碼分析：
/*css程式碼*/
.effect::before, .effect::after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}上面程式碼作用在class名叫.effect上的div的前（before）後(after)都新增一個空元素，然後為這兩個空元素新增陰影特效。
效果：
