13、css3选择器和新增标签

第一节 CSS3选择器

1、属性选择器

2、伪类选择器

3、层级选择器

1、第一种语法：

E[att]{sRules}

2、第二种语法：

E[att="val"]{sRules}

3、第三种语法：（少用）

E[att~="val"]{sRules}

上面中的
div[class~="layout"]{margin: 0 auto;}，相当于，
.layout{margin: 0 auto;}

4、第四种语法：

E[att|="val"]{sRules}

上面的img[class|="b"]{}中的b是需要特别注意的，如果下面的

中的class="b-img"没有"-"连接，那么上面的img[class|="b"]{}属性选择器的用法会失效。

5、第五种语法：

E[att^="val"]{sRules}

这种语法相比较于第四种，更加人性化，

这句代码不需要添加"-"，上面的

img[class^="b"]{border:5px #f00 solid;}

就可以匹配到这张图片。

6、第六种语法：

E[att$="val"]{sRules}

如上图的代码中，[class$="b"]选择的是第三张图片，即6.jpg。

因为E[att$="value"]匹配属性值以指定值结尾的每个元素。以b结尾的元素，只有第三张图片。

7、第七种语法：

E[att*="val"]{sRules}

E[att*="val"]{sRules}

这个语法的作用是属性值中包含指定值的每个元素。
比如，这里

img[class*="b"]{border:5px #f00 solid;}

观察下面标签的属性值，发现所有的属性值中都含有“b”，所以，三张图片都匹配了相同的样式。

    
    
    


    
列表A
    

        
列表项目1
列表项目2
        
列表项目3
列表项目4
        
列表项目5
列表项目6
        
列表项目7
列表项目8
列表项目9
列表项目10
    

上面的代码效果如下：

具体应用例子如下：

    
    
    


    
列表A
    

        
列表项目1
列表项目2
        
列表项目3
列表项目4
        
列表项目5
列表项目6
        
列表项目7
列表项目8
列表项目9
列表项目10
    
    
列表B
    

        
列表项目1
列表项目2
        
列表项目3
列表项目4
        
列表项目5
列表项目6
        
列表项目7
列表项目8
列表项目9
列表项目10
    

效果如下：

    
    
    


    
列表A
    

        
列表项目1
        
列表项目
        
列表项目
        
列表项目2
        
列表项目
        
列表项目3
        
列表项目
        
列表项目4
        
列表项目
        
列表项目5
        
列表项目
        
列表项目6
        
列表项目
        
列表项目7
        
列表项目
        
列表项目8
        
列表项目
        
列表项目9
        
列表项目
        
列表项目10
        
列表项目
    

需要注意：nth-child是先对nav1中的所有元素标签进行标号，如果有不同的标签，同样算一个标签，计入标号里面。

下面这种情况与上面这种情况相反，先定类，再计数标号。

    
    
    


    
列表A
    

        
列表项目1
        
列表项目
        
列表项目
        
列表项目2
        
列表项目
        
列表项目3
        
列表项目
        
列表项目4
        
列表项目
        
列表项目5
        
列表项目
        
列表项目6
        
列表项目
        
列表项目7
        
列表项目
        
列表项目8
        
列表项目
        
列表项目9
        
列表项目
        
列表项目10
        
列表项目
    

nth-child(an+b)

    
    
    


    
列表A
    

        
列表项目1
        
列表项目2
        
列表项目3
        
列表项目4
        
列表项目5
        
列表项目6
        
列表项目7
        
列表项目8
        
列表项目9
        
列表项目10
        
列表项目11
        
列表项目12
        
列表项目13
        
列表项目14
    

only-child

    
    
    


    
列表A
    

        
列表项目1
        
列表项目2
        
列表项目3
        
列表项目4
        
列表项目5
        
列表项目6
        
列表项目7
        
列表项目8
        
列表项目9
        
列表项目10
    
    
列表B
    

        
列表项目1
    

    
    
    


    
列表A
    

        
列表项目1
        
列表项目2
        
列表项目3
        
列表项目4
        
列表项目5
        
列表项目6
        
列表项目7
        
列表项目8
        
列表项目9
        
列表项目10
    
    
列表B
    

        
列表项目1
    

上面这两种用法，都是让nav2中的唯一元素背景色变红。

    
    
    


    示例文字1|示例文字2
    

        
示例文字1
        
此处放内容......
    
    

        
示例文字2
        
此处放内容......
    

每点击一下，如最上面的“示例文字1”或者“实例文字2”，那么就会激活它对应的跳转链接，此时，就会出现“突出显示”，比如这里突出显示的“背景色”。

下面这里点击了最上面的“实例文字1”，结果目标跳转到下面这里，并且出现高亮的情况。

具体解释看下面这个网址的15分钟左右的（层级选择器）。
https://ke.qq.com/webcourse/index.html#cid=258410&term_id=100304681&taid=1870814739951978&vid=s14227r241o