css样式优先级

最新推荐文章于 2024-08-31 12:30:41 发布

Mao_2017

最新推荐文章于 2024-08-31 12:30:41 发布

阅读量592

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Mao_2017/article/details/80582730

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css引入样式优先级和选择器优先级

css样式分类：外联样式，内部样式，内联样式，行内样式(标签属性)
优先级：行内样式(标签属性)<外联样式<内部样式<内联样式，

    这里的图片高度为110px
    <div class="login" >
        <img src="icon-ext.png" border="1" width="100px"  style="width: 110px;" class="imgs"/>
    </div>

多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式

选择器	权值
内联样式表的权值最高	1000
ID 选择器的权值	100
Class 类选择器的权值	10
HTML 标签选择器的权值	1

权值越大越优先

    这里的我是好孩子显示为蓝色
    <html>    
  <head>    
    <style type="text/css">    
        #textCon p {    
             /* 权值 = 100+1=101 */    
             color:red;  /* 红色 */    
        }    
        #textCon .red font {    
             /* 权值 = 100+10+1=111 */    
             color:blue; /* 蓝色 */    
        }    
        #textCon p span font {    
             /* 权值 = 100+1+1+1=103 */    
             color:green;/*绿色*/    
        }    
    </style>    
  </head>    
  <body>    
     <div id="textCon">    
        <p class="red">red    
           <span><font>我是好孩子<font></span>    
        </p>    
        <p>red</p>    
     </div>    
  </body>    
</html>

css选择器：1、标签选择器 2、类选择器 3、id选择器 4、分组选择器
5、通配符选择器* 6、派生选择器（） 7、伪类选择器（超链接）
派生选择器的使用方式|：
1、“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写
如：h3.class{color:red;font-size:23px;}
后代选择器：
2、后代选择器书写方法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了
CSS 选择器优先级：

A 选择器都有一个权值，权值越大越优先；

B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

D 继承的CSS 样式不如后来指定的CSS 样式；

E 在同一组属性设置中标有“!important”规则的优先级最大
注意：！important可以提升权重，但是它不影响继承性。它所在选择器权重为0的话，加上它权重还是为0，不影响已经选中的选择器样式。不影响就近原则，远的那个写上！important也没用（其实还是选择器权重值得问题）
```
         <html>  
    <style type="text/css">    
           div{   
                 color:red !important;     
              }
              p{    
                 color:green;  
              }
        </style>    
      <body>    
          <div>    
            <p>伟大的毛毛 </p>           
         </div>    
      </body>  
      </html>
      没有p选择器时 文字为红色------！important 没有继承性
```
css三大特性：继承性、层叠性、优先级
1、继承性：指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性
–a标签的字体的颜色不能被继承，它有一个默认的color：-webkit-link;
–h标签字体的大小也不能被继承，他有自己默认大小
–div标签的高度如果不设置有内容来决定，宽度默认继承父元素

2、层叠性：叠性就是浏览器处理冲突的一个特性，如果一个属性通过多个选择器设置到同一个元素上面，那么这个时候就会只有一个选择器起作用，而其他的选择器都将背层叠掉，前提是选择器的权重一样也就是优先级一样。