viki-119 commented 8 years ago

1.属性选择器在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示： rrr9

html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a>

css代码： a[class^=icon]{background: green;color:#fff;} a[href$=pdf]{background: orange; color: #fff;} a[title*=more]{background: blue; color: #fff;}

2.结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

:root{background:orange} 等价于 html {background:orange;}

3.结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：input:not([type="submit"]){ border:1px solid red;}

4.结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。示例显示：比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

5.结构性伪类选择器—target :target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。 <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand">content for Brand</div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake">content for jake</div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron">content for aron</div>

brand:target {background: orange;color: #fff;}

    #jake:target {background: blue;color: #fff;}
    #aron:target {background: red;color: #fff;}

viki-119 commented 8 years ago

first-of-type与first-child last-child的区别： first-of-type强调的是某一类子元素的第一次，而frist-child 与last-child强调的是第一个和最后一个。

6.结构性伪类选择器—first-child //只有ul下的第一个标签是li才能起到作用。强调的是第一个 ol > li:first-child{ color: red; }

7.结构性伪类选择器—last-child //只有最ul下的最后一个标签是li才能起到作用。强调的是最后一个 ul > li:last-child { border-bottom: none; }

8.结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示： rrr9

9.结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

viki-119 commented 8 years ago

10.first-of-type选择器 //强调的是第一次 //ul>p:first-of-type 选择ul下子元素中的第一次出现p元素的地方.不管该子元素在什么位置。 “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

示例演示：

通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 .wrapper > p:first-of-type { background: orange; }

11.last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素

12.nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

13.nth-last-of-type(n)选择器 “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

viki-119 commented 8 years ago

14.only-child选择器 //可以和first-child比较起来学习 // 强调只有一个子元素 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

li:only-child { background: orange; }

15.only-of-type选择器 //可以和 first-of-type比较起来学习 //强调某种类型的元素的只有一个 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

viki-119 / Html5-css3-viki

css3选择器上 #6

brand:target {background: orange;color: #fff;}