CSS学习中|CSS三大特性（代码+样例）

最新推荐文章于 2022-07-20 19:34:12 发布

美女变成老太婆✿

最新推荐文章于 2022-07-20 19:34:12 发布

阅读量205

点赞数

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47788265/article/details/107244965

版权

CSS基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.层叠性

概念：

所谓层叠性是指多种CSS样式的叠加

如果一个属性通过两个相同选择器设置到同一个元素上时，后面的会把前面的层叠掉

注意：

样式冲突，就近原则

样式不冲突，不会层叠

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>层叠性</title>
  <style>
    /* 给div了两个颜色，后面的样式层叠了前面的样式 */
    div {
      color: blue;
    }
    div {
      color: chocolate;
    }
  </style>
</head>
<body>
  <div>
    长江后浪推前浪，前浪死在沙滩上
  </div>
</body>
</html>

样例：

2.继承性

概念：

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

想要设置一个可继承性的属性，只要将它应用于父元素即可

注意：

恰当的使用继承性可以简化代码，降低CSS样式的复杂性，比如有很多子级元素都需要某个样式

可以直接给父级一个，孩子继承即可

子元素可以继承父元素某些样式（text font line-这些元素开头的可以继承以及color）

代码：

<p>作为子级元素继承了<div>的文字颜色，蓝色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>继承性</title>
  <style>
   div {
     color: blue;
   }
  </style>
</head>
<body>
  <div>
    <p>早上好</p>
  </div>
</body>
</html>

样例：

3.优先级（重点）

选择器不同，就会出现优先级的问题

举例：

一个为标签选择器div 另一个为类选择器，这种情况就要考虑优先级

因此我们要弄清楚不同选择器的权重

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优先级</title>
  <style>
   div {
     color: yellow;
   }
   .one {
     color: blue;
   }
  </style>
</head>
<body>
  <div class="one" >权重</div>
</body>
</html>

样例：

权重计算公式（每个）

继承或者* 0，0，0，0 （没有权重）

标签选择器 0，0，0，1

类，伪类（如：hover） 0，0，1，0

ID 0，1，0，0

行内样式style=“ ” 1，0，0，0

important 重要的无穷大

举例：

因tomato后有important加持，所以显示为番茄色

若没有important加持，此时应该显示黑色，行内样式的权重较高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优先级</title>
  <style>
   div {
     color: yellow;
   }
   .one {
     color: blue;
   }
   #two {
     color: tomato!important;
   }

  </style>
</head>
<body>
  <div class="one" id="two" style="color: black;">权重</div>
</body>
</html>

样例：

权重叠加（多个）

举例：

.nav a 其中.nav为类选择器，所以为0，0，1，0

a为标签选择器，所以为 0，0，0，1

那么.nav a 加在一起，所以为0，0，1，1，显示为绿色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>权重叠加</title>
  <style>
    .nav a {
      color:green;
    }
  </style>
</head>
<body>
  <div>我爱吃的</div>
  <div class="nav">
    <a href="#">烤冷面</a>
    <a href="#">烤香肠</a>
    <a href="#">烤鸡头</a>
    <a href="#">烤鸡肝</a>
  </div>
</body>
</html>

样例：

通过简单的加法来计算多个选择器

如 div ul li ------>0，0，0，3

.nav ul li------>0，0，1，2

a:hover ----->0，0，1，1

小练习：

要求：

将图片中第一个<a>标签变为其他颜色

代码：

利用 .nav .one 叠加两个类选择器 0，0，2，0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>权重叠加</title>
  <style>
    .nav a {
      color:green;
    }
    .nav .one {
      color: hotpink;
    }
  </style>
</head>
<body>
  <div>我爱吃的</div>
  <div class="nav">
    <a href="#" class="one">烤冷面</a>
    <a href="#">烤香肠</a>
    <a href="#">烤鸡头</a>
    <a href="#">烤鸡肝</a>
  </div>
</body>
</html>

样例：

特殊：

0，0，0，5 + 0，0，0，5 = 0，0，0，10 不会向前进位

继承的权重是0

代码:

错误思维是有类选择器，文字应该跟随类选择器为蓝色

但因为这里p是div的子类，demo是div的类，所以无效，仍跟随子类<p>标签选择的颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>071301</title>
  <style>
    div {
      color: red;
    }  
    p {
      color: yellow;
    }
    .demo {
      color: blue;
    }
  </style>
</head>
<body>
  <div class="demo">
    <p>继承的权重是0</p>
  </div>
</body>
</html>

样例：

注意：

当标签被选中了，那么以公式来进行权重计算后，谁大听谁的

如果没有被选中，那么权重就是0，因为继承的权重就是0

举例：

div div和div均选中了<div>标签，因此要通过公式来对比权重

div div权重是2 div是1 2>1 因此显示蓝色（即使加important也不好使）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01</title>
  <style>
    div div {
      color: blue
    }
    div {
      color: chocolate
    }
  </style>
</head>
<body>
  <div>
    <div>
      <div>1</div>
    </div>
</div>
</body>
</html>

样例：

美女变成老太婆✿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习中|CSS三大特性（代码+样例）

1.层叠性概念：所谓层叠性是指多种CSS样式的叠加如果一个属性通过两个相同选择器设置到同一个元素上时，后面的会把前面的层叠掉注意：样式冲突，就近原则样式不冲突，不会层叠代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
复制链接

扫一扫