• css3 选择器 权重问题 (第二部分)


      这篇博文有关css的权重问题,我个人认为这是css知识中很重要的一个知识点。因为在开发的过程能中我们会经常遇到这种问题,特别是如果你使用框架的时候,有些框架的某些标签有一些默认的样式。所以我们可以通过增加权重的方式来使我们所写的样式有效。既然说到权重那就必然要说起权重的等级以及权重值。

      css的权重等级可以分为5个级别:

      1.第一级别:内联样式,详细大家都知道什么是内联样式,既是在标签添加style属性<div style=""></div>,这种方式权重值最高,权重值为1000,但是开发过程中比较少用到这种,因为现在推荐的方式都是将css,js,html写成单独文件。这样子看起来会比较整洁以及方便管理。

      2.第二级别:ID选择器,id选择器就是使用"#"开头选择,大家应该都明白,这种选择方式的权重值为0100。

      3.第三级别:class选择器,class选择器就是使用"."开头的选择器,这种选择方式的权重值为0010.

      4.第四级别:标签选择器以及伪类选择器,就是直接使用标签或者伪类选择器,这种两种选择方式的权重值都为0001.

      5.这里提醒一下通用选择器(*),子选择器(>)和相邻同胞选择器(+)这三种是没有权重的,也就是权重值为0000,虽然没有权重 但是比继承样式权重高;这里值得提醒一下,并非所有的伪类选择器的权重都为i,总一些领导家的孩子,像a:link,a:visited伪类选择器,他们的权重比第三级别class选择器的权重还高。

      这里要提醒一下,这里的权重并不是10进制,不过在比比较的时候可以当作十进制去叠加。

      案例

      测试结果

      这里p.c的权重值为0011,.c的权重值为0010,所以字体会显示蓝色

      当然,如果是从上到下多层次选择也是一样的

      测试结果 

      这里的权重和上面也是一样的div .c权重为0011,.c权重值为10

      案例(测试伪类选择器)

      测试结果

      是不是,对不对,我没有说谎嘛

      其实权重计算方法是这样子大同小异的

       博文最后要讲一个最重量级别权重的东西,这家伙可不止是领导的儿子,简直就是太子来的,这个就是

      !important

     你没有看错,就是楼上的那个  !important 这个家伙,他可以将你所要呈现的样式的权重提的比行内样式还高,我举个例子来说明他的用法

      运行结果

      有木有,有木有,明明使用的是行内样式,但是显示的却是绿色,仿佛被戴了绿帽

      不过这个是样式是的权重,并非是选择器的权重,就是说和上面说的选择器权重不冲突,但是他却可以改变某些你也想要改变的样式。

      好了,上面内容就是css3的权重介绍

      

      

       

  • 相关阅读:
    mysql 之 union 分类: database 测试 2014-02-12 11:59 218人阅读 评论(0) 收藏
    MySql模糊查询like通配符使用详细介绍 分类: database 测试 2014-02-12 10:19 6829人阅读 评论(1) 收藏
    sed(查找替换) 与awk(提取字段) 分类: ubuntu 测试 2014-02-11 12:08 4074人阅读 评论(0) 收藏
    Linux命令行uniq 分类: ubuntu 测试 2014-02-10 17:52 341人阅读 评论(0) 收藏
    n&1判断奇偶 分类: python基础学习 测试 2014-02-10 15:41 636人阅读 评论(0) 收藏
    vue-cli安装
    input事件
    Edusohu搭建
    Ngxin代理服务基本概述
    五种IO模型---转载
  • 原文地址:https://www.cnblogs.com/TzSteady/p/7402511.html
Copyright © 2020-2023  润新知