常用的CSS选择器的优先级是怎样的

发布时间:2022-03-07 10:49:35 作者:小新
来源:亿速云 阅读:201

这篇文章主要介绍常用的CSS选择器的优先级是怎样的,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

遇到这种问题,就按照平时写的答,从全局、局部(标签、标签属性、伪元素、伪类等)入手。

这样记住:每一个标签都有默认的样式以及继承的样式。写一个标签,尝试如何给它设置样式,你用过,总能够想出来好几个:

  1. id (#box):唯一的

  2. class(.box):选择所有class属性的属性值为 box的元素

  3. 标签 (div,p):选择所有的div和p元素

  4. 所有指定的后代(div p):选择div元素内的所有的p元素

  5. 相邻(div+p): 选择所有紧接在div元素后的p元素

  6. 兄弟(div~p): 选择所有跟div同级的p元素

  7. 通配符 * :选择所有的元素

  8. 属性选择(a[target=_blank]):选择所有a标签的target属性为_blank的a标签

  9. 伪元素选择器(::before、::after):创建DOM树结构中不存在的元素,并为其增加样式

  10. 伪类选择器(a:hover、a:active):用于处理某个已有的元素的某个状态

!important(权重:无限大) > 行内样式(权重:1000) > ID选择器(权重:100) > 类选择器=属性选择器(权重:10) > 元素选择器=伪元素(权重:1) > 通配符选择器(权重:0) > 继承(没有权值) > 浏览器默认属性

以上是“常用的CSS选择器的优先级是怎样的”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. CSS选择器分类与优先级
  2. css优先级是怎么计算的

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:在html5中怎样使用js的方法

下一篇:自动售货机小程序开发需要注意什么问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》