gavincz的博客

:focus定义：获得焦点的元素，一般用于表单（input、textarea）；触发条件：当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发兼容：Opera7以下 及 IE8以下不兼容举个栗子：html代码： <p><input type="text" name=""></p> <p><input...

:optional定义：指任意没有required属性的 <input>，<select> 或 <textarea> 元素，修改其样式。触发条件：只针对没有required属性的 <input>，<select> 或 <textarea> 元素，修改样式兼容：IE10以下、Opera10以下不支持举个栗子...

:only-child官方定义：当当前元素的父元素，有且只有它本身一个子元素（DOM节点）时，修改其样式:only-of-type官方定义：当当前元素在其父元素的子元素序列中，没有其它相同兄弟元素（唯一的，有且只有一个它本身）时，修改其样式注意：在官方文档中，这两个伪类的定义如上所述（在我理解中），但亲自测试后，发现，这两个伪类所实现的效果竟然一样（见下面案例），因此这里特别记...

之前写系列时漏掉了，这个很简单，容易理解，话不多说，直接看吧:nth-last-child定义：匹配当前元素及与之相同的所有兄弟元素（从后往前），修改其样式。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处。触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇...

:nth-of-type()定义：在拥有同一父元素的情况下（前提），匹配一组相同的兄弟元素，修改其样式触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式兼容：IE8及8以下不支持Opera9.5以下不支...

:nth‐child()定义：匹配当前元素及与之相同的所有兄弟元素，修改其样式触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式兼容：IE8及8以下不支持Opera9.5以下不支持:first‐ch...

:required定义：指选择器在表单元素是必填项时设置指定样式。只适用于表单元素: input, select 和 textarea。触发条件：当设置表单元素为必填项时，修改样式兼容:IE10、Opera10以下不支持举个栗子html代码：<form> <label for="url_input">非必填项:</label> ...

:valid定义：针对任意内容通过验证的 <input> 或其他 <form> 元素，修改样式触发条件：当用户输入的值通过验证（有效）时，修改其样式兼容：IE11以下不支持Edge12以下不支持:invalid定义：针对任意内容未通过验证的 <input> 或其他 <form> 元素，修改样式触发条件：当用户输入的值未通过验...

:empty定义：只针对没有子元素的元素进行样式修改。(子元素可以是元素节点或文本、空格；注释或处理指令都不会产生影响)。触发条件：当当前元素不存在任何子元素（DOM节点）及空格时，可以使用:empty修改其自身样式。兼容：IE8及8以下不支持Opera9.5以下不支持举个栗子html代码： <div></div><!-- 我没有子节点（...

:target定义：指一个唯一的页面元素(目标元素)，其id与当前URL片段匹配。一般结合锚点链接使用触发条件：当当前页面存在被指定的目标元素时，可修改目标元素的样式兼容：IE8及8以下不支持、Opera9.5以下不支持举个栗子html代码： <div style='width:50%;margin:0 auto'> <h3>目录<...

:in-range定义：针对一个 <input> 元素type=number，如果其当前值处于属性min 和max 限定的范围之内，修改样式.触发条件：只有在该元素指定了取值范围，并且元素值处于指定范围内时才有效兼容：IE不支持:out-of-range定义：针对一个 <input> 元素type=number，如果其当前值超出属性min 和max 限定...

:enabled定义：用来修改任何处于启用状态的元素的样式。触发条件：如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。一般用在input元素的radio、checkbox属性和select元素下的option子元素以及button元素中。兼容：Opera8及8以下 IE8及8以下 不支持举个栗子html代码： <p>启用...

:disabled定义：用来修改任何被禁用的元素的样式。触发条件：如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。一般用在input元素的radio、checkbox属性和select元素下的option子元素以及button元素中。兼容：Opera8及8以下 IE8及8以下 不支持举个栗子html代码： <p> ...

:checked定义：用来修改任何处于选中状态的HTML元素的样式，一般用在input元素的radio、checkbox属性和select元素下的option子元素中触发条件：当元素的可选项中存在已被选中的情况，修改这些被选中的样式兼容：基本全兼容举个栗子html代码：...

:link定义：用来选中所有尚未访问的链接添加样式。触发条件：用来规定当连接未被选中时（初始状态）的样式兼容：全部兼容:visited定义：用来选中所有已被访问的链接添加样式。触发条件：当链接已被访问时（最终状态）的样式兼容：全部兼容:hover定义：当鼠标悬停在当前元素上时需要添加的样式触发条件：当鼠标悬停在当前链接上时（浮于元素上方）的样式兼容...

:read-write定义：当一个元素（例如可输入文本的 input元素）可以被用户编辑时，修改样式。触发条件：当一个元素是可编辑元素时，可以修改其样式兼容：IE不支持:read-only定义：当一个可编辑元素（例如可输入文本的 input元素）不可被用户编辑，即只读时（具有readonly属性时），修改样式。触发条件：只针对当一个可编辑元素被赋予readonly（只读）属...