Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示CSS优先级权重叠加计算及属性简写
Blogger Information
Blog 6
fans 0
comment 0
visits 6005
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
991 people have browsed it

1. 实例演示选择器组合实现优先级提权方式;

CSS权重计算公式

选择器 权重计算公式
继承或者* 0,0,0,0
标签选择器 0,0,0,1
类选择器，伪类 0,0,1,0
ID选择器 0,1,0,0
行内样式 style=”” 1,0,0,0
!important 最大
  • 从左到右计算，左边最大
  • 没有进制，0,0,0,5+，0,0,0,5=0,0,0,10

例子1：选择器相同，则执行层叠性，最终显示颜色为blue

  1.     <style>
  2.         div {
  3.             color: red;
  4.         }
  6.         div {
  7.             color: blue;
  8.         }
  9.     </style>
  10. </head>
  12. <body>
  13.     <div>实例演示CSS优先级权重叠加计算</div>
  14. </body>

例子2：类选择器权重为0,0,1,0，而标签选择器权重为0,0,0,1，最终显示颜色为blue

  1.    <style>
  2.         .one {
  3.             color: blue;
  4.         }
  6.         div {
  7.             color: red;
  8.         }
  9.     </style>
  10. </head>
  12. <body>
  13.     <div class="one">实例演示CSS优先级权重叠加计算</div>
  14. </body>

例子3：id选择器权重为0,1,0,0，类选择器权重为0,0,1,0，而标签选择器权重为0,0,0,1，最终显示颜色为 violet

  1.   <style>
  2.         .one {
  3.             color: blue;
  4.         }
  6.         #two {
  7.             color: violet;
  8.         }
  10.         div {
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <div class="one" id="two">实例演示CSS优先级权重叠加计算</div>
  18. </body>

例子4：

.nav a权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1；
.nav .one权重为0,0,1,0 + 0,0,1,0 = 0,0,2,0

故最终显示样式为 blue

  1.  <style>
  2.         .nav .one {
  3.             color: blue;
  4.         }
  5.         .nav a {
  6.             color: red;
  7.         }
  9.     </style>
  10. </head>
  12. <body>
  13.     <div class="nav">
  14.         <a href="#" class="one">实例演示CSS优先级权重叠加计算</a>
  15.     </div>
  16. </body>

例子5：

div .one权重为0,0,1,1
div#two 权重为0,1,0,1
html body div 权重为0,0,0,3
故最终显示颜色为blue
  1.     <style>
  2.         div .one {
  3.             color: violet;
  4.         }
  6.         div#two {
  7.             color: blue;
  8.         }
  10.         html body div {
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <div class="one" id="two">实例演示CSS优先级权重叠加计算</div>
  18. </body>

二.实例演示字体图标;

1、访问 https://www.iconfont.cn/ 并登陆
2、挑选字体并加入购物车

3、下载代码

4、引入

字体图标和字体一样可设置大小颜色

3.实例演示盒模型常用属性的缩写方案

一、background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
如：background: transparent url(image.jpg) repeat-y scroll center top ;
二、padding：20px；表示上下左右内边距都是20px

padding：20px 10px；表示上下内边距为20px，左右内边距为10px；

padding：20px 10px 5px;表示上内边距为20px,左右内边距为10px，下内边距为5px。

padding：20px 15px 10px 5px;表示上内边距为20px，右内边距为15px，下内边距为10px，左内边距为5px。

margin同理，一个值代表上下左右；两个值代表上下、左右；三个值代表上、左右、下；四个值代表上、右、下、左

Correcting teacher：天蓬老师天蓬老师

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