关于css里的class和id

id 是唯一的 权重100 相当于身份证 只能有一张。

class 可以多个元素都拥有 权重10 就相当于电影票 你有我也有。

用法如下

<divid="box">变颜色</div>
<divclass="box">变颜色</div>
<divclass="box">变颜色</div>

写在元素的行内里 id就是简单的一个 id=“id的名字” class也是一个 class=“class的名字”

 

在style里该怎么写呢？

/*在style里写的时候 id变为 一个  #    也就是#box{}然后后面跟一对大括号  class也要变 class变为     .   就是.box{} 然后一对大括号 元素的样式就写在大括号里面 */
#box{color:red};
.box{color:green};

跟我们写的一样#box变为了红色 .box都变为了绿色 

 

id也可以用中文 但是不推荐。 id也可以给多个元素 也不推荐 那样还不如用class

 

 

假如说一个元素同时有class和id那么谁的样式会生效呢？

<div class="boxa" id="boxa">谁会改变我的颜色?</div>

想一想说的权重 

对没错就是

.boxa{color:orange;}
#boxa{color:pink;}

id

没错就是id 在给class和id设置了相同样式的时候 生效的时候是 id设置的 因为id的权重是100 class的10 所以id生效了。

如果是这样呢?

<div class="container"><div id="boxb">我会成为什么颜色?</div><div>

#boxb{color:blue;}
.container #boxb{color:orange;}

这样会是什么颜色呢？

答案就是

变成了 详细设置的那个颜色。

也就是.container #boxb

因为他们的权重一共是110；

而#boxb只有一个id 所以权重是100;

所以权重高的生效了。

也就是说 写的越详细的 它的权重就高。

 

如果有不对的地方 请大家指正。