《CSS选择器(课外)》由会员分享，可在线阅读，更多相关《CSS选择器(课外)（5页珍藏版）》请在装配图网上搜索。
1、伪类选择器总汇伪类选择器分为四种类型结构性伪类、UI伪类、动态伪类和其他伪类选择器具体如下:选择器名称说明CSS版本:root根兀素选择器选择文档中的根兀素3:first-child子兀素选择器选择兀素中第一个子兀素2:last-child子兀素选择器选择兀素中最后一个子兀素3:only-child子兀素选择器选择兀素中唯一子兀素3:only-of-type子兀素选择器选择指定类型的唯一子兀素3:nth-child(n)子兀素选择器选择指定N个子兀素3:enabledUI选择器选择启用状态的兀素3:disabledUI选择器选择禁用状态的兀素3:checkedUI选择器选择被选中input勾选
2、兀素3:defaultUI选择器选择默认兀素3:validUI选择器验证有效选择input兀素3:invalidUI选择器验证无效选择input兀素3:requiredUI选择器有required属性选择兀素3:optionalUI选择器无required属性选择兀素3:link动态选择器未访问的超链接兀素1:visited动态选择器已访问的超链接兀素1:hover动态选择器悬停在超链接上的兀素2:active动态选择器激活超链接上的兀素2:foucs动态选择器获取焦点的兀素2:no t其他选择器否定选择的兀素3:empty其他选择器选择没有任何内容的兀素3:lang其他选择器选取包含lang
3、属性的元素2:target其他选择器选取URL片段标识指向兀素3结构性伪类选择器结构性伪类选择器能够根据元素在文档中的位置选择元这素类。元素都有一 个前（缀:）。1.根元素选择器:rootborder:1pxsolidred;解释：匹配文档中的根元素，基本不怎么用，因为总是返回ht ml元素。2.子元素选择器ulli:first-childcolor:red;解释：选择第一个子元素。ulli:last-childcolor:red;解释：选择最后一个子元素。ulli:only-childcolor:red; 解释：选择只有一个子元素的那个子元素。divp:only-of-typecolor:r
4、ed; 解释：选择只有一个指定类型的子元素的那个子元素。3. :nthchild(n) 系列 ulli:nth-child(2)color:red;解释：选择子元素的第二个元素。ulli:nth-last-child(2)color:red;解释：选择子元素倒数第二个元素。divp:nth-of-type(2)color:red;解释：选择特定子元素的第二个元素。divp:nth-last-of-type(2)color:red;解释：选择特定子元素的倒数第二个元素。UI 伪类选择器UI伪类选择器是根据元素的状态匹配元素。1. :enabled:enabled border:1pxsolidr
5、ed; 解释：选择启用状态的元素。2. :disabled:disabled border:1pxsolidred; 解释：选择禁用状态的元素。3. :checked:checked display:none;解释：选择勾选的 input 元素。4. :default:default display:none;解释：从一组类似的元素中选择默认元素。比如input被勾选的即默认的。5 ：valid 和：invalidinput:valid border:1pxsolidblue;input:invalid border:1pxsolidgreen;解释：输入验证合法与不合法显示时选择的元素。6：
6、required 和：optionalinput:required border:1pxsolidblue;input:optional border:1pxsolidgreen; 解释：根据是否具有 required 属性选择元素。三动态伪类选择器动态伪类选择器根据条件的改变匹配元素。1:link和visiteda:linkcolor:red;a:visited color:orange;解释：link表示未访问过的超链接，：visited表示已访问过的超链接。2:hovera：hovercolor：blue; 解释：表示鼠标悬停在超链接上。3:activea：activecolor：gre
7、en; 解释：表示鼠标按下激活超链接时。4:focusinput：focusborder：1pxsolidred;解释：表示获得焦点时。四其他伪类选择器1. :nota:not(href*=baidu)color:red; 解释：否定选择器，反选。2. :empty:emptydisplay:none; 解释：匹配没有任何内容的元素。3. :lang:lang(en)color:red;解释：选择包含lang属性，属性值前缀为en的元素。和属性选择器匹配结果一致。4. :target:targetcolor:red; 解释：定位到锚点时，选择此元素。5. :selection:selectioncolor:red;解释：这是一个伪元素选择器，当选择文字时触发选择CSS3版本下的选择器
CSS选择器(课外)
