CSS3高级选择器

动态伪类选择器

锚点伪类：link、visited
用户行为伪类：hover、active、focus
目标伪类target（IE9及以上）

属性选择器

选择器	描述
E[attr]	有属性att的所有E元素
E[attr='val']	属性att的值是val的元素
E[attr^='val']	属性att的值以val开头的元素
E[attr$='val']	属性att的值以val结尾的元素
E[attr*='val']	属性att的值包含val字符串的元素

状态伪类选择器

选择器	描述
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素

checkbox只能设置宽高，不能设置背景颜色和边框

需要清除默认样式appearance：none（需要兼容）

结构性选择器

选择器	描述
E:first-child	选择第一个子元素E
E:last-child	选择最后一个子元素E
E:nth-child(n)	选择一个或多个特定的子元素（第一个编号为1）
E:nth-last-child(n)	选择一个或多个特定的子元素，从最后一个子元素开始算
E:only-child	匹配父元素下仅有的一个子元素
E:empty	匹配一个不包含任何子元素的元素 ( 文本节点也被看作子元素 )
E:not(s)	匹配不符合当前选择器的任何元素( 反选 )

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺子练习</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .outer{
            margin: 100px;
        }
        .outer>li{
            width: 2px;
            height: 8px;
            background-color: black;
            float: left;
            margin-right: 6px;
            position: relative;

            counter-increment: num;
        }
        .outer>li:nth-child(5n+1){
            width: 3px;
            height: 11px;
        }
        .outer>li:nth-child(10n+1){
            width: 4px;
            height: 14px;
            position: relative;
        }
        .outer>li:nth-child(10n):after{
            content: counter(num);
            position: absolute;
            left: -1px;
            top: 15px;
        }
        .outer>li:nth-child(1):after{
            content: counter(num);
            position: absolute;
            top: 15px;
            left: -3px;
        }
    </style>
</head>
<body>
<!--
    css 自增函数：
        counter-increment：num；
        num是自己命名的
        每次选择器选择到一个元素，num就自加1  从1开始

        当在某个元素上使用 counter（num）  就得到了值
-->
    <ul class="outer">
        li*100
    </ul>
</body>
</html>