CSS常用选择器

基本选择器

外部样式

<link rel="stylesheet" href="CSS选择器.css">

内部样式

<style>

    p {

        background:rgb(76, 34, 41);

        color:yellow;

    }

</style>

行内样式

<span style="color: blue;">aaa</span>

 

当三者同时使用时，

行内样式>内部样式=外部样式（后两者谁优先看谁在上面）

CSS的语法

selector{

    property:value;

    property:value;

}

元素选择器

直接用元素名称做选择 E{}

比如：

div {

    background:pink;

    color:yellow;

}

选择div元素

特例：选择所有元素 *

* {

    background:pink;

    color:yellow;

}

属性选择器

E[att()]{}

有id属性的div元素

div[id]

有id属性且id属性值为xx的div元素

div[id=xx]

有id属性且id属性值以xx开头的div元素

div[id^=xx]

有id属性且id属性值以xx结尾的div元素

div[id$=xx]

有id属性且id属性值包含xx的div元素

div[id*=xx]

id选择器

#bb{

    background:pink;

    color:yellow;

}

特例：结合选择器

p标签中id=bb的元素(中间不要有空格)

p#bb{

    background:pink;

    color:yellow;

}

class选择器

.xx{

    background:pink;

    color:yellow;

}

特例：结合选择器

div.xx{

    background:pink;

    color:yellow;

}

包含选择器

selector1 selector2{}

空格表示后代

div .xx{

    background:pink;

    color:yellow;

}

    <div>

        <p class="xx">oo</p>

    </div>

子选择器

父亲是div，后代（孩子，孙子…..）的class=xx

只选儿子

div>.xx{

    background:pink;

    color:yellow;

}

兄弟选择器

selector1~selector2{}

.aa~li{

    background:pink;

    color:yellow;

}

id为aa的弟弟们（下行）

特例：所有弟弟用*

选择器组合

selector1,selector2,selector3….{}

(只要符合其中一个即可)

span,.aa,p{

    background:pink;

    color:yellow;

}

伪元素选择器

首字母选择器

div::first-letter{

    background-color:pink;

    color: blue;

}

first-letter只能用于块级元素（竖着布局的元素）

首行选择器 first-line

浏览器对于中英文理解不同，中文任意一个汉字后都可换行，但英文只能在一个单词后换行。全是字母的话可以用空格隔开字母分割处。

单词是否裂开：

word-break: break-all;

word-break: keep-all;

在元素前后添加选择器

div::befor{

    content: "aaaaa";

    background-color:pink;

    color: blue;

}

div::after{

    content: "aaaaa";

    background-color:pink;

    color: blue;

}

伪类选择器

结构性伪类选择器

:nth-child(n) 其中的n可以是数字（1，2，3）也可以是英文单词（odd 奇数 even 偶数），也可以是表达式（2n+1….）

第一个元素：first-child

最后一个元素：last-child

:nth-last-child(n) 倒着数第n个

<ul>

        <li>hello1</li>

        <li>hello2</li>

        <li>hello3</li>

</ul>

ul li:nth-child(1){

    background-color:pink;

    color: blue;

}

如果ul里的第二行刚好是li元素，则被选中

如果要找li的第二个，则写为

ul li:nth-of-type(2)

第一个写为:first-of-type

最后一个写为：last-of-type

倒着数：:nth-last-of-type(2)

UI状态伪类选择器

鼠标悬停：hover

ul li:hover{

    background-color:pink;

    color: blue;

}

焦点状态：focus

input:focus{

    background-color:yellow;

    color: blue;

}

选中状态：checked

比如：

input:checked{

    background-color:yellow;

    color: blue;

}

其他伪类选择器

not():过滤掉某些元素

ul li:not(.aa):not(#bb){

    background-color:pink;

    color: blue;

}

除去class=aa和id=bb的li

CSS选择器优先级

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

2.优先级高低，id选择器>class选择器>元素选择器

3.同级别长度，CSS代码按照顺序执行，后面的代码会把前边的覆盖掉，即样式覆盖

4.以上场景使用绝大部分场景，若特殊场景不使用自行测试