19 CSS3选择器——伪类选择器二

1、::selection

::selection匹配被⽤户选中或处于⾼亮状态的元素
该选择器只可以应⽤于少数的css属性：color，background，cursor和outline

<h1>html5</h1>
   <h2>jjjjj</h2>
   <p>html5111........</p>
   <p>html5........</p>
   <h1>1111</h1>
   <p>html5111........</p>
   <p>html5........</p>

::selection {
  color: red;
}

2、el:out-of-range

el:out-of-range匹配值在指定区间外的input元素
注意： 该选择器只作⽤于能指定区间之外值得元素，例如input元素的min和max属性

<input type="number" max="10" min="2" value="11">

input:out-of-range {
  border: 1px solid red;
}

3、el:in-range

el:in-range匹配值在指定区间内的input元素
html代码如上所示：

input:in-range {
  border: 1px solid blue;
}

4、el:read-write

el:read-write匹配可读及可写的元素，一般就是input元素

5、el:read-only

el:read-only匹配设置了readonly属性的元素

	<form action="">
	  <input type="text">用户名
	  <input type="text" readonly="readonly">账号
	  <p><input type="radio" checked="checked" value="html5" name="test"><label>html5</label></p>
	  <p><input type="radio" value="css3" name="test"><label>css3</label></p>
	 <input type="email">
	</form>

input:read-write {
  border: 1px solid red;
}

input:read-only {
  border: 1px solid blue;
}

6、el:optional

el:optional匹配可选的输⼊元素（可以不输入的元素）

• optional选择器只适⽤于表单元素：input、select和textarea

7、el:required

el:required匹配设置了required属性的元素
required选择器只适⽤于表单元素：input、select和textarea

<form action="">
   <input type="text" >用户名
   <input type="text" required>账号
   <p><input type="radio" checked="checked" value="html5" name="test"><label>html5</label></p>
   <p><input type="radio" value="css3" name="test"><label>css3</label></p>
  <input type="email">
 </form>

input:optional {
  border: 1px solid green;
}

input:required {
  border: 1px solid blue;
}

8、el:valid

el:valid匹配输⼊值为合法的元素
注意： :valid 选择器只作⽤于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

9、el:invalid

el:invalid匹配输⼊值为⾮法的元素。

<form action="">
	  <input type="email">
</form>

input:valid {
  border: 1px solid blue;
}

input:invalid {
  border: 1px solid red;
}