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;
所以权重高的生效了。
也就是说 写的越详细的 它的权重就高。
如果有不对的地方 请大家指正。