简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS样式来源和层叠规则探讨
Blogger Information
Blog 54
fans 6
comment 31
visits 106619
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS样式来源和层叠规则探讨
吾逍遥
Original
742 people have browsed it

一、学习的新知识

这节课知识在我作业https://www.php.cn/blog/detail/24407.html基本都已经讲过了，本文在基础上更详细分析了层叠规则和源码顺序的影响，算是对那个作业的补充和完善。

二、样式来源

首先更正上次作业中样式来源的说法，它应该包括：用户代理样式(浏览器样式或默认样式)、继承样式和用户自定义样式三个部分。

  • 用户代理样式(user agent stylesheet) 目前用户代理主要是浏览器，也可以称其为浏览器样式或默认样式。可在chrome开发者工具中Elements面板的Styles和Computed查询。关键字initial。
  • 继承样式 样式分为可继承和不可继承，如font-size、color都是可继承，而margin和padding是不可继承，是否继承可通过mdn查询(技巧:属性 mdn可快速查询)。关键字inherit。
  • 用户自定义样式 所谓用户就是开发者定义的样式，包括引用优秀样式和自定义样式。
  1. <style>
  2.   body { font-size: 20px; color: red; }
  3.   /* 1. 继承样式 */
  4.   p { font-size: inherit; color: inherit; }
  5.   /* 2. 用户代理样式 */
  6.   p { font-size: initial; color: initial; }
  7.   /* 3. 用户自定义样式 */
  8.   p { font-size: 22px; color: green; }
  9. </style>
  10. <body>
  11.   <p>元素属性值的来源的总结</p>
  12. </body>

三、层叠规则探讨

1、基本选择器层叠规则

基本选择器主要是指单选择器，常见有:标签选择器tag 、 类选择器class 、id选择器和属性选择器[]。

  • 基本选择器优先级:tag < class或属性 < id。经测试属性选择器和类选择器是相同优先级。
  • 仅仅是在覆盖元素样式时考虑优先级，叠加时不考虑优先级,全部有效 !!!
  • 优先级高覆盖优先级低的，相同优先级时后写覆盖前写 !!!
  • 伪类是class级别，计算优先级时按类来看待。
  • 伪元素是tag级别，但它是定义伪元素的样式，目前伪元素访问只能通过伪元素，它没有class和id。
  1. <style>
  2.   #page-title { color: red; }              /* ID选择器 */
  3.   .title { color: green; }                 /* 类选择器 */
  4.   [class='title'] { color: slateblue; }    /* 属性选择器 */
  5.   h1 { color: skyblue; font-size: 2rem; }  /* 标签选择器 */
  6. </style>
  7. <body>
  8.   <h1 id="page-title" class="title">CSS选择器和优先级</h1>
  9. </body>

2、复合选择器层叠规则

复合选择器是由多个单选择器组成的，主要包括:

  1. 后代选择器,以空格隔开，代表子元素、孙元素…
  2. 子选择器，以>连接，代表子元素
  3. 兄弟选择器，以+连接，代表兄弟后一个元素；若~表示所有兄弟元素
  4. 群组选择器，以逗号隔开，表示多个元素
  5. x-child或x-of-type的复合选择器

复合选择器优先级规则:

计算格式: id的个数,class或属性的个数,tag的个数
判别规则: 从id开始比较，若相等则依次向后比较，不等时大者为高，比较结束。
覆盖规则: 优先级高覆盖优先级低的，相同优先级时后写覆盖前写!!!

  1. /* 0,1,3  因0,1,3>0,0,4，前者优先级高生效  */
  2. :root body header h1 { color: red; }
  3. /* 0,0,4 */
  4. html body header h1 { color: skyblue; }
  5. /* 0,1,3 相同优先级时，后写覆盖前写的 */
  6. body header.page-header h1 { color: green; }

3、源码顺序

前面已经介绍了顺序是在优先级相同时，后写的覆盖前写的，而这里要说的源码顺序是指元素有多态时，定义其多态样式有时要有一定顺序，否则会导致有些状态样式不生效。这里介绍以链接元素a的四个状态:访问link、已经访问visited、停留hover和点击未释放active。它们样式源码顺序要按link、visited、hover和active顺序。这个要写出来，是因为我以前以为它们只是伪类，表示状态，不用管顺序，今天听老师讲课后，经过测试的确如此。

  1. <style>
  2.   .nav a { color: initial; text-decoration: none; }
  3.   a:link { color: skyblue; }
  4.   a:visited { color: red; }
  5.   a:hover { color: violet; }
  6.   a:active { color: orange; text-decoration: underline; }
  7. </style>
  8. <body>
  9.   <nav id="page-nav" class="nav">
  10.     <li><a href="">首页</a></li>
  11.     <li><a href="">公司简介</a></li>
  12.     <li><a href="">主要特色</a></li>
  13.     <li><a href="">登录</a></li>
  14.   </nav>
  15. </body>

四、学习后总结

  • 学习前端要多访问MDN，查询技巧是： 关键字 mdn ,可快速找到自己需要查询的知识。
  • 样式来源可分为默认样式、继承样式和自定义样式。
  • 层叠时，元素的不同声明直接叠加，不需要考虑优先级，相同声明时要考虑优先级。
  • 覆盖时，优先级高覆盖优先级低的，相同优先级时后写覆盖先写的
  • 元素有多态时，要注意顺序，若是要特定顺序则必需按顺序定义样式。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：学习css,一定要有格局, 要有高度, 站在人性的角度来看, 就全明白了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
吾逍遥 2020-10-22 17:49:45
受教了，感谢
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！