css知识分享——谁有优先权？

最新推荐文章于 2024-07-15 14:54:05 发布

凌一

最新推荐文章于 2024-07-15 14:54:05 发布

阅读量251

点赞数

分类专栏： CSS 文章标签： css html html5 css3 前端

本文链接：https://blog.csdn.net/A_FLY_User/article/details/107586660

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

话题引导

在这里插入图片描述
在设计页面中，我们通常都会有如上的类似需求，一个大盒子里面装有数个合作，而每个盒子之间有相同的空隙。这种效果的实现方法有很多，flex布局可以轻易实现，float同样可以实现，在这里，我们用float来实现一下试试。
我们采用一个大盒子装有四个小盒子的结构方式，这里空隙的宽度是20px，大盒子宽度是1200px，那么计算之后的小盒子宽度应该是285px，我们采用浮动布局，每个小盒子进行左浮，而每个小盒子右边有一个20px的外边距即可，但我们只需要三个空隙，所以最好一个合作的外边距应该为0，于是我们有如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <style>
    /* 这里的样式是水平居中大盒子 */
    .box{
      width: 1200px;
      height: 500px;
      margin: 0 auto;
      background: red;
    }
    .box div{
      float: left;
      width: 285px;
      height: 500px;
      margin-right: 20px;
      background: green;
    }
    .last-one{
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div class="last-one"></div>
  </div>
</body>
</html>

但效果是这样的
初步效果图
按道理应该的话，我们是思路是正确的吧？那么就是代码问题了，代码中也显然选择了最好一个div啊，为什么会这样呢？
我们来看一下浏览器内部的显示：
浏览器内部信息
被划掉了？原因是为什么呢？
我们稍微改动一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <style>
    /* 这里的样式是水平居中大盒子 */
    .box{
      width: 1200px;
      height: 500px;
      margin: 0 auto;
      background: red;
    }
    .box div{
      float: left;
      width: 285px;
      height: 500px;
      margin-right: 20px;
      background: green;
    }
    .box .last-one{
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div class="last-one"></div>
  </div>
</body>
</html>

效果图就做到了。有没有发现改动了哪里？
这里我们在选择last-one这个类时，为其定位了一个父类，由父类选择器通过子元素选择器再来定位last-oen这个类。
具体原因是怎么回事呢？接下来我们来讲讲。

CSS三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级。

层叠性

相同选择器设置相同的样式，此时一个样式就好覆盖（层叠）另一个冲突的样式。
层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会产生层叠

继承性

子标签会继承父标签的某个样式，例如文本颜色和字号。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同时，将会执行层叠性。
选择器不同时，则根据选择器权重执行。

选择器权重如下：
选择器权重表 通用选择器（*），子选择器（>）和相邻同胞选择器（+）相邻后代选择器（~）并不在表中，他们的权值都为0。
需要特别说明一点的便是继承之后的样式的权重，永远是0，即其权重永远最低。最好的说明就是a标签的样式问题，如果你给a标签的父标签写了自定义字体颜色，那么a标签将不会有任何变化，原因是浏览器默认给a标签写了一个样式，而元素选择器的权重是大于继承的，所以从父标签继承的字体颜色因权重过小而无法渲染。
在实际开发中，CSS选择器有时并不是单纯的一个元素选择器或者类选择器，我们编写选择器的时候往往结合后代选择器、子元素选择器等复合选择器来实现更为精准的选择。这个时候，该综合选择器的权值便是上表基础选择器权值的叠加（可以认为是求和）。
例如某个选择器是这样的，.content div ul li.active，这个时候的权值如何计算呢？其实很简单，.content是类选择器，权重为0,0,1,0，div是元素选择器，权重为0,0,0,1，这两者叠加后则是0,1,0,1，以此类推，最后该选择器的总权重为0,0,2,3。而在权重判断的环节，则是从左到右逐位判断，如果某一位数值相同，则判断下一位数值。这里需要特别说明一点的是，权重的叠加中不存在进位，这里注意区分于普通数学运算。
这里同时介绍CSS3新增的一些选择器的权重计算：

属性选择器，例如：input[type="text"]，属性选择器的权重与类选择器一样，属于0,0,1,0，需要注意的是，[type=“text”]部分才是属性选择器，input仍然属于元素选择器，因此上例中的复合选择器叠加后的权重是0,0,1,1。
这里再举一些例子，供大家记忆。
伪元素选择器，例如：div::after，伪元素选择器权重与元素选择器一致，属于0,0,0,1，同样的，这里的伪元素指的是::after部分，并不是整体，整体选择器的叠加结果是0,0,0,2。
CSS3新增的结构伪类选择器同样参考伪类选择器权重计算。

下图再举一些选择器叠加例子供大家参考。
复合选择器叠加聚类
以开局问题CSS编写为例，对于同一个标签的CSS选择器权重排列，浏览器中帮我们很好的进行了排序：
在这里插入图片描述

有时我们开发时，对于权重不小心忽视了，合理的运用浏览器来调试，查看自己编写的CSS权重排序，就知道问题出在哪了。（这里的element.style对应的是行内样式选择器，再排查!important的情况下，其权重一般最大，故排第一）
那么这里再回到开头我们用来引导的问题，大家应该明白为什么我们加了一个.box之后，这个样式就起效了吧。