1、属性选择器 E[att^=val] 选择匹配元素E,且E元素定义了属性att,其属性值以val开头的任何字符串。 E[att$=val] 选择匹配元素E,且E元素定义了属性att,其属性值以val结尾的任何字符串。 E[att*=val] 选择匹配元素E,且E元素定义了属性att,其属性值任意位置包含了val。 换句话说,字符串与属性值的任意位置相匹配。 2、结构性伪类选择器——root :root 选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。 :root 选择器等同于<html>元素,简单点说: 如::root {background:orange} html {background:orange} 得到的效果等同。 建议使用:root方法。另外在IE9以下还可以借助“:root”实现hack功能。 3、结构性伪类选择器——not :not 选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。 就拿form元素来说,比如说你想给表单中出submit按钮之外的input元素添加红色边框,CSS代码可以写成: form {width: 200px; margin: 20px auto;} input:not([type='submit']) {border: 1px solid red;} 4、结构性伪类选择器——empty :empty 选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。 5、结构性伪类选择器——target :target 选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。 6、结构性伪类选择器——first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。 如:通过“:first-child”选择器定位列表中的第一个列表项,并将序列号颜色变为红色。 ol > li:first-child{ color: red; } 7、结构性伪类选择器——last-child “:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-chil”选择器选择的是元素的最后一个子元素。 例如:需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器。 如:ul>li:last-child{background:blue;} 8、结构性伪类选择器——nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4), 也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时, 选择器将不选择到任何匹配的元素。 如:选择偶数行 ol>li:nth-child(2n) {background:orange;} 选择奇数行 ol>li:nth-child(2n+1) {background:orange;} 9、结构性伪类选择器——nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)” 选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。 10、first-of-type选择器 “:first-of-type”选择器似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的 第一个子元素。 如:通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。 /*我要改变第一个段落的背景为橙色*/ .wrapper > p:first-of-type { background: orange; } 11、nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。 当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。 在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。 如:通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。 .wrapper > p:nth-of-type(2n){ background: orange; } 12、last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素。 如:通过“:last-of-type”选择器,将容器“div.wrapper”中最后一个段落元素背景设置为橙色 (提示:这个段落不是“div.wrapper”容器的最后一个子元素)。 .wrapper > p:last-of-type{ background: orange; } 13、nth-last-of-type(n)选择器 “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型, 但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。 如:通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。 .wrapper > p:nth-last-of-type(3){ background: orange; } 14、only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元 素中仅有一个子元素,而且是一个唯一的子元素。 15、only-of-type选择器 “:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用 “:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 如:通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。 .wrapper > div:only-of-type { background: orange; }
CSS3选择器(上)
最新推荐文章于 2023-06-22 15:09:42 发布