CSS中选择器的用法（含视频链接）

1.ID选择器

css: #elem{...}             html: id="elem"

注：

1.ID是唯一值，在一个页面中只能出现一次

2.命名规范，第一个字符不能为数字

 

2.CLASS选择器

css:  .elem{...}                html: class="elem"

注：

1.class选择器可以复用

2.可以添加多个class样式

.box{background:red}
.content{font-size:20px}

<div class="box content"></div>

 

3.多个样式的时候，样式的优先级根据css决定(后面的语句会覆盖前面的)，而不是class属性中的顺序

4.标签+类的写法

<div class="box">这是一个盒子</div>
<div class="box">这也是一个盒子</div>
<p class="box">这是一个盒子</p>

p.box{ background:red}

只有p标签的盒子被渲染。

 

3.标签选择器

css: div{}             html:<div></div>

4.群组选择器

    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>

div,#text,.title{background:red}

5.通配选择器

*{}

给所有标签都添加样式

6.层次选择器

后代: M N{...}

父子: M>N{...}

兄弟: M~N{...}  当前M下面所有兄弟N标签才会被选中（上面的不会被选中）

相邻: M+N{...}  当前M下面相邻的N标签（上面的不会选中）

详细讲解：

https://www.bilibili.com/video/BV1gt4y1m7Eo?p=106

7.属性选择器

M[arrt]{}

=:完全匹配

*=:部分匹配

^=:起始匹配

$=:结束匹配

[ ][ ][ ]:组合匹配

    <div>aaaa</div>
    <div class="bb">bbbb</div>
    <div class="cc">cccc</div>

div[class] {background:red}

选中所有带有class属性的才添加样式。

https://www.bilibili.com/video/BV1gt4y1m7Eo?p=107

8.伪类选择器

M：伪类{}

：link      访问前的样式（只能添加给a标签）

：visited 访问后的样式（只能添加给a标签）

：hover  鼠标移入时的样式

：active  鼠标按下时的样式

.....

https://www.bilibili.com/video/BV1gt4y1m7Eo?p=108