CSS3选择器A:empty: 选中没有任何子元素（包括text节点）的元素A。 A:enabled: 选中可以用状态的

关系选择器

A+B: 选择A元素之后的B元素元素A与B必须同属一个父元素

<style>
    .list+li{
        color: red;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="list">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

A~B: 选择A元素之后的所有B元素，必须同属一个父元素

<style>
    .list~li{
        color: red;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="list">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

属性选择器

A[att]: 选中带有value属性的A元素

<style>
    li[class]{
        color: red;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="list">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

A[att="value"]: 选中带有属性值等于value的A元素

<style>
    li[class="list"]{
        color: red;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="list">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

并且只选择属性只为value的A元素

<ul>
    <li>1</li>
    <li>2</li>
    <li class="list">3</li>
    <li class="list aaaa">4</li>
    <li>5</li>
    <!--选中3-->
</ul>

A[att~="value"]: 选中带有属性值包含或等于value的A元素并且只选择属性只为value的A元素

<ul>
    <li>1</li>
    <li>2</li>
    <li class="list">3</li>
    <li class="list aaaa">4</li>
    <li>5</li>
    <!--选中3 4-->
</ul>

A[att^=value]: 选中以value字母开头的A元素

<style>
    li[class^="a"]{
        color: red;
    }
</style>
<body>
    <ul>
        <li class="abc">1</li>
        <li>2</li>
        <li class="aaa">3</li>
        <li class="acb">4</li>
        <li>5</li>
    </ul>
    <!--选中 1 3 4 -->
</body>

A[att$=value]: 选中以value字母末尾的A元素

<style>
    li[class$="c"]{
        color: red;
    }
</style>
<body>
    <ul>
        <li class="abc">1</li>
        <li>2</li>
        <li class="aac">3</li>
        <li class="acb">4</li>
        <li>5</li>
    </ul>
    <!--选中 1 3  -->
</body>

A[att=value]:* 选中包含value字符串的A元素

<style>
    li[class*="cc"]{
        color: red;
    }
</style>
<body>
    <ul>
        <li class="cbc">1</li>
        <li>2</li>
        <li class="aacc">3</li>
        <li class="accb">4</li>
        <li>5</li>
    </ul>
    <!--选中 3 4  -->
</body>

A[att|=value]: 选中att的值为value或以value-开头的A元素

<style>
    li[class|="cc"]{
        color: red;
    }
</style>
<body>
    <ul>
        <li class="cc-bc">1</li>
        <li>2</li>
        <li class="cc">3</li>
        <li class="accb">4</li>
        <li>5</li>
    </ul>
    <!--选中 1 3  -->
</body>

伪类选择器

A:foucus: A元素成为输入焦点时的样式

<style>
    input:focus{
        border: 2px solid #000;
    }
</style>
<body>
    <input type="text">
    <!--成为焦点时，边框变粗-->
</body>

A:not(): 选中不含括号内选择符的A元素

<style>
    li:not(.abc){
        background: red;
    }
</style>
<body>
   <ul>
        <li class="aaa">1</li>
        <li class="abc">2</li>
        <li>3</li>
        <li class="abc">4</li>
        <li>5</li>
    </ul>
    <!--选中 1 3 5-->
</body>

A:nth-child(n): 父元素的第n个子元素A

<style>
    li:nth-child(3){
        color: red;
    }
</style>
<body>
   <ul>
        <li>1</li>
        <li2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <!--选中 3-->
</body>

A:empty: 选中没有任何子元素（包括text节点）的元素A。

A:enabled: 选中可以用状态的A元素。

A:disabled: 选中不可用状态的A元素。

<style>
   input:disabled{
        background: red;
    }
    input:enabled{
        background: blue;
    }
</style>
<body>
  <ul>
        <li><input type="text"></li>
        <li><input type="text"></li>
        <li><input type="text" disabled="disabled"></li>
        <li><input type="text" disabled="disabled"></li>
        <!--1 2 蓝 3 4 红-->
    </ul>
</body>

A:disabled: A::before/A:before:设置在对象前面发生的内容 A::after/A:after:谁知在对象后面发生的内容

<style>
   div::before{
        content:'￥';
    }
    div::after{
        content:'元';
    }
</style>
<body>
   <div>1000</div>
   <!--￥1000元-->
</body>