css选择器归纳

1.通配选择器(设置整个页面)

* {
    background-color: red;
}

2.元素选择器
标签名{ }

        div {
            width: 100px;
            height: 100px;
        }

3.id选择器
#id{ }

        #box {
            color: blue
        }

<div id="box">id选择器</div>

4.类选择器
.class{ }

        .box {
            color: gold
        }

<div class="box">类选择器</div>

5.并集选择器（同时操作多个选择器）
语法： 选择器1，选择器2，选择器3 …{}

        div,
        p {
            color: red
        }

    <div>div-div</div>
    <p>p-p-p</p>

效果：

6.交集选择器（同时满足多个选择器条件的元素）
语法： 选择器1选择器2选择器3 …{}
注意：之间是没有空格隔开，紧挨着的【一般是 标签+class类/id】

        p.box {
            color: red
        }

        <p class="box">div-p1-div-p1</p>
        <p>div-p2-div-p2</p>

效果：
只对p标签里面 类名是box的进行操作

7.后代选择器（指中元素的后代元素）
语法：a b
选择器之间用空格隔开, 表明选中a的后代b【b 可以是子，孙…】
eg1：

        div p {
            color: red
        }

    <div>div-div</div>
    <p>p-p-p</p>
    <div>
        <p>div-p-div-p</p>
    </div>

效果：

eg2:

        div p {
            color: red
        }

 <div>
        <p>div-p-div-p</p>
        <ul>
            <li>
                <p>li-p</p>
            </li>
        </ul>
    </div>

效果：

8.子元素选择器
语法：a>b
选择器 之间用 >, 表明直接是选中a的子元素b，不会影响到孙辈的元素

        div>p {
            color: red
        }

<div>
        <p>div-p-div-p</p>
        <ul>
            <li>
                <p>li-p</p>
            </li>
        </ul>
    </div>

效果：

这个子元素选择器和后代选择器区别在这边就可以体现出来

9.伪类选择器
都以冒号 ： 开头
①动态伪类

1. :link 【匹配a标签，未被访问，链接点击之前】
2. :visited【匹配a标签，访问之后】
3. :hover【一般匹配a标签，也可用在其他元素，鼠标悬停】
4. :active【一般匹配a标签，也可用在其他元素，链接在被点击的那个时候】
   注意：编写顺序
   :link——》:visited——》:hover——》:active
   个别的没按这个顺序，不会生效
5. :focus 【用于拥有输入焦点的元素】

②元素状态伪类

1. :enabled 【匹配启用的表单元素】
2. :disabled 【匹配所有禁用的表单元素】
3. :checked 【匹配选中的按钮 表单元素】

③结构伪类

1. :first-child 【选择父元素的第1个子元素】
2. :last-child【选择父元素的最后一个子元素】
3. :nth-child(n) 【选择父元素的第n个子元素】
   注意：结构伪类的特殊点
   eg:

        ul li:first-child {
            color: rebeccapurple
        }

		<ul>
            <li>
                <p>li-p1</p>
            </li>
            <li>
                <p>li-p2</p>
            </li>
        </ul>

li:first-child,是指ul里面的第一个li,其他结构伪类也类似该情况。
等，还有其他分类