036-UI伪类选择器（I） | css3

liuzhengyuan

《零基础入门学习web开发》第37讲 初学CSS的噩梦III | 学习笔记

---

伪类选择器：


UI伪类选择器：


1, :enable / disable

就是，设置必填/选填元素样式

stlye:

1. :enabled {
   
2.             outline: 1px solid green;
   
3.         }
   
4.         :disabled {
   
5.             outline: 1px solid red;
   
6.         }

复制代码

main:

1. <label>enable: <input type="text" name="enable"></label> <br><br>
   
2.     <label>disable: <input type="text" name="disable" disabled></label><br><br>
   
3. 
   
4.     <button>enable</button>
   
5.     <button disabled>disable</button>

复制代码

就是这样：


2,:checked

被选中元素样式，（ + ... 就是设置 cheked 之后的元素）

stlye:

1. :checked + span {
   
2.             background-color: cornflowerblue;
   
3.             color: blue;
   
4.         }

复制代码

main:

1. <br><br><br>
   
2.     <input type="radio" name="numbers" value="first"><span>1</span><br>
   
3.     <input type="radio" name="numbers" value="second"><span>2</span><br><br>
   
4. 
   
5.     <input type="checkbox" name="fruits" value="watermelon"><span>西瓜</span><br>
   
6.     <input type="checkbox" name="fruits" value="stawberry"><span>草莓</span><br>
   
7.     <input type="checkbox" name="fruits" value="apple"><span>苹果</span><br>

复制代码

效果：


3,:optional / :required

设置可选/不可选元素的样式

stlye:

1. :optional {
   
2.             background-color: cornflowerblue;
   
3.         }
   
4.         :required {
   
5.             background-color: lightcoral;
   
6.         }

复制代码

main:

1. <form>
   
2.         <label>optianal: <input type="text" name="optional"></label><br><br>
   
3.         <label>required: <input type="text" name="required" required></label><br><br>
   
4.         <button type="submit">submit</button><br><br>
   
5.     </form>

复制代码

效果：


4,:default

默认元素的样式，比如按钮之类的（实在想不出还有什么别的~）

stlye:

1. :default {
   
2.             background-color: black;
   
3.             color: white;
   
4.         }

复制代码

main:

1. <form>
   
2.         <label>optianal: <input type="text" name="optional"></label><br><br>
   
3.         <label>required: <input type="text" name="required" required></label><br><br>
   
4.         <button type="submit">submit</button><br><br>
   
5.     </form>

复制代码

效果：