Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 权重与伪类作业
Blogger Information
Blog 50
fans 0
comment 0
visits 31433
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
权重与伪类作业
手机用户1580651468
Original
307 people have browsed it

权重与伪类

一. 实例演示权重的原理与计算方式

一） css用3个正整数，来表示选择器的权重 权重的表示方法如下面的实例：

1、html代码如下：

  1. <h1>我的权重是（0，0，1）</h1>
  2. <h1 class="title">我的权重是（0,1,1）</h1>
  3. <h1 id="active" class="title">我的权重是（1,1,1）</h1>
  4. <header class="top">
  5. <h1 class="title">
  6. <div id="active">我的权重是（1,2,3）</div>
  7. </h1>
  8. </header>

2、css代码如下：

  1. 1、（0,0,1）
  2. h1{
  3.     color: red;
  4. }
  5. 2、 (0,1,1)
  6. h1.title{
  7.     color: aquamarine;
  8. }
  9. 3 、（1,1,1）：
  10. h1#active.title{
  11.     color: blue;
  12. }
  13. 4、（1,2,3）：
  14. header.top h1.title div#active{
  15.     color: red;
  16. }

3效果图如下：

二）.权重优先级提升（0,0,1）提升到（0,0,2）

1、html代码：

  1. <body>
  2.     ...
  3.    <h2>我的权重是（0，0，1）</h2>
  4.    <h2>我的权重提升到（0，0，2）</h2>
  5. </body>

2、css代码：

  1. h1{
  2.     color: red;
  3. }
  4. body h1{
  5.     color: blue;
  6. }

3、运行的效果对比图


三）利用权重的提升有下面的好处

1.摆脱对选择器位置的限制
2.不需要去修改html的源代码

四）权重的注意事项

1.尽量不要再html中使用id属性
2.因为权重过大，后期不利于调试

五）经典实例如下：

.col-md-6 {
height: 2em;
border: thin solid;
}要修改.col-md-6样式 发现只能去修改html源码，最后只要用最小代价去修改达到目的(只有增加一个class)：

1、html代码：

  1. <div class="col-md-6">Header</div>
  2.    <div class="col-md-6 bgc">Header</div>
  3.     <div class="col-md-6 bgc yellow">Header</div>

2、css代码：

  1.  .col-md-6 {
  2.     height: 2em;
  3.     border: thin solid;
  4. }
  5. .col-md-6.bgc {
  6.    color: blue;
  8. }
  9. .col-md-6.yellow {
  10.   color: red;
  11.  }

3、运行的效果图：

2. 实例演示结构伪类,通过位置关系匹配子元素

一） 结构伪类：用来匹配子元素，给一个起点，然后采用nth-of-type（an+b） 语法计算

  1. 1）a：系数，[0,1,2,3,...]
  2. 2）n：参数，[0,1,2,3,...]
  3. 3）b：偏移量，从0开始
  4. 4）规则：计算出来的索引，必须是有效的（从1开始）
  5. 5）伪类匹配有两种场景1.匹配个2.匹配组

1、匹配第几个实例

  1.   匹配第一个的css
  2.  .list>li:nth-of-type(0n+1)
  3. {
  4.     background-color: aqua;
  5. }
  6.  匹配第3个的css
  7.  .list>li:nth-of-type(0n+3)
  8. {
  9.     background-color: red;
  10. }

效果图如下：

2、匹配一组是的实例

  1. 1、a=1 匹配一组全选css:
  2. .list>li:nth-of-type(1n+0)
  3. {
  4.     background-color: aqua;
  5. }
  6. 2、匹配邻居css:
  7. .list>li:nth-of-type(1n+3)
  8. {
  9.     background-color: red;
  10. }
  11. 3、匹配前三个css:
  12.  .list>li:nth-of-type(-1n+3)
  13. {
  14.     background-color: red;
  15. }

效果图如下：


Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：很好，条理清晰，效果完整，继续加油
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
0 comments
Author's latest blog post