为了账号安全,请及时绑定邮箱和手机立即绑定

css选择器及优先级(转载)

标签:
Html/CSS

以下内容转载自https://www.cnblogs.com/zxjwlh/p/6213239.html


css选择符分类  

  1. 标签选择器(如:body,div,p,ul,li)

  2. 类选择器(如:class="head",class="head_logo")

  3. ID选择器(如:id="name",id="name_txt")

  4. 全局选择器(如:*号)

  5. 组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

  6. 后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

  7. 群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

  8. 继承选择器(如:div p,注意两选择器用空格键分开)

  9. 伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover)

  10. 字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

  11. 子选择器 (如:div>p ,带大于号>)

  12. CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

css优先级

当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。

不同级别

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

  2. 作为style属性写在元素内的样式

  3. id选择器

  4. 类选择器

  5. 标签选择器

  6. 通配符选择器

  7. 浏览器自定义或继承

      总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
0
获赞与收藏
3

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消