CSS选择器

我将CSS的选择器记录为五大类:

1、ID选择器;

2、类选择器;

3、标签选择器;

4、后代选择器;

5、伪类选择器。

在写CSS时弄懂CSS选择器的权重最重要,为什么这么说呢?因为就像动物界中的老大,谁的权利大谁说了算,最后的结果就按照谁的方式执行呀 ~

CSS中除了那些选择器之外还有一个行内样式,它可视CSS界的主席,可谓“一人之下,万人之上了”,为啥这样说呢?因为,还有一个!importent呢,可别把它忘了,这可是CSS界的魔王,但凡CSS中被设置成!importent的,想要用其他手段改变它的样式,哼哼!!想都别想~

大佬都介绍完了,来看看选择器们的权限都有多高吧:

有图有真相

啥?看不懂,来解释一下吧:

style attribute代表行内样式即在标签中用style=“”方式设置的样式,设它的权重是1000

ID选择器即样式表中以#ID定义的样式,设它的权重是100

class类选择器,即样式表中以.class定义的样式,设它的权重是10

elements标签选择器,即样式表中以div, img, span定义的样式,设它的权重是1

按照优先级的计算方式看下图:

这样看起来一目了然~

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181209G0N5UM00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券