简单详细css介绍——选择器

目录

css选择器：基本选择器（8种），伪元素选择器，伪类选择器大三类

1、基本选择器

2、伪元素选择器（适用于选中一段话的中的部分）    

3、伪类选择器（适用于同级中选择一个）

css选择器优先级规则

---

css选择器：基本选择器（8种），伪元素选择器，伪类选择器大三类

1、基本选择器

        1、元素选择器：元素名{} 例如 div{}，*{}：元素选择器中的特例，针对所有元素（ *一般用于设置padding、margin）

        例如：一般用于开头，取消浏览器自带的设置

*{

    padding: 0;

    margin: 0;

}

        2、属性选择器： 元素名[atdr]{} ^=：前缀、$=：后缀、*=：包含、=：值为

        其中

div[id=zz]{} 

        可以简化为

#zz

        例如：设置了id(或者 设置的id前缀为 zz )的使用本样式

设置了id的
div[id]{
        color: red;
       }

设置的id值前缀为a的
div[id^=a]{
       color:red; 
    }

        3、ID选择器：#id值{} 元素选择器，当与ID选择器结合时没有空格 如 div#zz

1、结合
div#as{
        color: aqua;
    }
2、不结合
#as{
        color: aqua;
    }

        4、class选择器：.class值{} 元素选择器，当与class选择器结合时没有空格 div.zz

1、结合
div.as{
        color: aqua;
    }
2、不结合
.as{
        color: aqua;
    }

        5、包含选择器：上层组件+空格+#(.)ID值（class值） selector1 selector2 ...{}

                例如：对div内的 a标签进行装饰

div .zz{
        color: blue;
    }

        6、子元素选择器：严格父辈关系：selector1>selector2>selector3....{}

                例如：只对红框内的a标签进行选择

最外部有一层body 没有截图截到
body>ul>li>a{
        color: red;
    }

        7、兄弟元素选择器：selector1~selector2（） 从selector1向下查找selector2的元素（具有共同的父级）

        例如：只对id为c的耳机进行选择

.b~#c{
            color: aqua;
        }

 

2、伪元素选择器（适用于选中一段话的中的部分）    

        1、首字母伪元素选择器

        用法：

::first-letter()

        使用前提 依附元素必须是块级元素

        块级元素转化

display：block；

        使用环境举例：

        <div>1234</div> 使1与234 颜色不一样

div::first-letter{
            color: blueviolet;
        }

        只能设置首字母

        2、首行伪元素选择器

        用法：

::first-line()

        使用前提 依附元素必须是块级元素 块级元素转化

display：block；

        3、自定义内容前置伪元素选择器

        用法：

        在div的内容前加上“abcd”  不要忘记 引号

div::before{
            content: "abcd";
            color: blueviolet;
        }

        使用前提：不管需不需要自定义内容，必须使用content属性

        4、自定义内容后置伪元素选择器

        用法：在div的内容前加上“abcd”  不要忘记 引号

div::after{
            content: "eeee";
            color: aqua;
        }

        使用前提：不管需不需要自定义内容，必须使用content属性

3、伪类选择器（适用于同级中选择一个）

        1、结构性伪类选择器：

:nth-child()

        括号中可以放数字，1234、odd（奇数）、even（偶数）；加法表达式 2n+1； 侧重于位置 若排序的里面不只有li，则排序时其它部件也会被计数

        例如：下面ul中还有div 想要选择li-1 就不能用 :nth-child(1) 而是:nth-child(2)

 

        :nth-child(1)等价于:first-child() 查找第一个元素

        :nth-last-child(1)等价于:last-child()查找最后一个元素

        例如：选择第一个 li

 ul li:nth-child(1){
            color: aqua;
        }

:nth-of-type()

        侧重于类型括号中可以放数字，1234、odd（奇数）、even（偶数）；加法表达式 2n+1；

        这样设置就只按li计数，无视其他元素

        :nth-of-type(1)等价于:last-of-type查找第一个元素

        :nth-last-of-type(1)等价于:last-of-type找最后一个元素

        2、UI状态伪类选择器

                :hover 悬停状态

               :focus 焦点状态（选中状态）

                :checked 选中状态

                :disabled 不可用状态

        3、其他伪类选择器

                :not() 过滤掉某个或者某些元素

                例如：过滤掉：class为pk的

ul li:not(.pk){
            color: aquamarine;
        }

                连续过滤：用逗号隔开

ul li:not(.pk,.pd){
            color: aquamarine;
        }

css选择器优先级规则：

        1、选择器写的越准确（越长），优先级越高

        2、ID选择器＞class选择器>元素选择器

        3、同级别同长度下，css代码按照顺序执行，后面的会覆盖前面的代码

        4、自行测试，两行代码位置互换