CSS选择器

选择器：帮助你精准的选中想要的元素

 

简单选择器

1.ID选择器:

选中的是对应的id值的元素 id="";

2.元素选择器:

style中直接以元素名定义

3.类选择器:

class="";

4.通配符选择器

*，选中所有元素

5.属性选择器

/* 全部类型 */

*{

    color: #008c8c;

}

/* 属性一样的 */

[href="https://www.sina.com"]{

    color: crimson;

}

/* 空格独立出，[class="bsb"]可改为.bsb */

[class~="bsb"]{

    color: rgb(6, 167, 68);

}

/* 任意连续为"XXXXX" */

[class*="fll"]{

    color: coral;

}

/* 结尾为"XXXXX"的 */

[class$="KUYdU"]{

    color: darkolivegreen;

}

6.伪类选择器

状态：

1) link：超链接未访问时的状态

2) visited：超链接访问过后的状态

3) hover：鼠标移动上去，鼠标悬停的状态

4) active: 激活状态下，鼠标按下状态

/* link：超链接未访问时的状态 */

a:link{

    color: turquoise;

}

/* visited：超链接访问过后的状态 */

a:visited{

    color: teal;

}

/* 选中鼠标悬停时候的元素 */

[class="asd"]:hover{

    color: magenta;

}

/* 鼠标按下去时候的元素 */

[class="anxia"]:active{

    color: yellow;

}

7.伪元素选择器

生成并选中某个元素内部的第一个子元素或者最后一个子元素

span::before{

    content: "《";

    color: tomato;

}

span::after{

    content: "》";

    color: tomato;

}

选择器组合

1.后代元素 —— 空格

/* p.arr也可以 */

.arr{

    color: saddlebrown;

}

.bcc li{

    color: slateblue;

}

/* 必须有空格 */

.abc .qwq{

    color: red;

}

2.子元素 —— >

/* div ul li

div>ul>li

div ul>li

div>ul li

div li

以上都可以 */



/* div>不可以 */



div li{

    color: springgreen;

}

3.相邻兄弟元素 —— +

.ull{

    color: slategrey;

}

.ull+li{

    color: yellow;

}

4.后面出现的所有兄弟元素 —— ~

.wcl{

    color: violet;

}

.wcl~li{

    color: rgb(179, 29, 29);

}

选择器的并列

多个选择器，用逗号分隔

语法糖

div>p,div li{

    color: midnightblue;

}