CSS 的虚伪总结

最新推荐文章于 2023-08-24 13:03:21 发布

小树需要灌溉-涛

最新推荐文章于 2023-08-24 13:03:21 发布

阅读量197

点赞数

分类专栏： css CSS3 文章标签： css css3 html5

本文链接：https://blog.csdn.net/qq_39858588/article/details/110136635

版权

css 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

CSS 的虚伪总结

** 前序：css三大特性**
1.层叠性：css样式冲突采取的原则（后者覆盖前者)
2.继承性：对于部分属性样式会有天生的继承
3.优先级：选择器优先级算法

层叠性

所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：
样式冲突，遵循的原则是「就近原则。」那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠
在这里插入图片描述

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。简单的理解就是：子承父业

可继承的属性
在这里插入图片描述
控制继承

inherit: 被应用属性继承父级的该属性（默认就是该值）
initial初始化，把应用属性初始为它默认的样式，并且排除继承的干扰（默认会继承的属性也不在默认继承，而是表现出没有任何设置时候的默认样式）
unset：意思是恢复其原本的继承方式。对color属性而言，就相当于inherit；而对于诸如border这样默认不继承的属性，就相当于initial。
revert: 效果等同于unset且浏览器支持有限

上代码：

<ul style="color: green;">
    <li class="default">Default <a href="#">link</a> color</li>
    <li class="inherit">Inherit the <a style="color: inherit;" href="#">link</a> color</li>
    <li class="initial">Reset the <a style="color: initial;" href="#">link</a> color</li>
    <li class="unset">Unset the <a style="color: unset;" href="#">link</a> color</li>
</ul>

效果图

在这里插入图片描述

选择器

分为三个大类：
1.基本选择器

类名：.box
标签: div
属性: input[type=“eamil”] | a[href*=“http://www.beige.world”]
ID: #box
2.伪类选择器
结构伪类: :nth-child(n) | :nth-of-type(n) | :hover
伪元素: ::before | ::after
3.组合选择器
相邻兄弟 A + B
普通兄弟 A ~ B
子选择器 A > B
后代选择器 A B

基本选择器

容易忽略的用法

在这里插入图片描述

伪类选择器

在这里插入图片描述
重点说下这两比较作用类似的：nth-child(n) | nth-of-type(n)
html：

<ul>
  <li>1</li>
  <li>
    <p>a1</p>
    <div>b1</div>
    <p>a2</p>
    <div>b2</div>
  </li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

css：

ul li:first-child { background-color: lightseagreen;} // 第一个li  =>  <li>1</li>
ul li:last-child { background-color: lightcoral;} // 最后一个li =>  <li>5</li>
ul li:nth-child(3) { background-color: aqua; } // 第三个li => <li>3</li>
uk li:nth-child(2) > div:nth-of-type(1) {background-color: red} // 第二个li下的第一个div(不是div标签的都不算) => <div>b1</div>

看完代码是不是恍然大悟了！！
区别：

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素

组合选择器
组合选择器本质上就是通过连接符来对两个选择器进行组合

子选择器 A > B
后代选择器 A B
相邻兄弟 A + B
普通兄弟 A ~ B

优先级

权重计算公式
在这里插入图片描述
权重叠加
一个简单的加法计算奉献上：

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1

上点试题测试一下哈

<style type="text/css">
  .c1 .c2 div{  
    color: blue;
  }
  div #box3 {  
    color:green;
  }
  #box1 div { 
    color:yellow;
  }
</style>
</head>
<body>
<div id="box1" class="c1">
  <div id="box2" class="c2">
    <div id="box3" class="c3">
      文字
    </div>
  </div>
</div>
</body>

答案：yellow

再来一题：

<body>
  <style>
    div.parent {
      width: 300px;
      height: 300px;
      border: 10px solid #000;
      font-size: 46px;
      text-shadow: 3px 13px 4px green;
      box-sizing: border-box
    }
    div.child {
      width: 200px;
      height: 200px;
      background-color: brown;
      border: 5px solid #000;
      width: inherit;
      box-sizing: inherit;
      font-size: 80px;
    }
  </style>
</head>
  <div class="parent">
    <div id="child" class="child">123</div>
  </div>

  <!-- 
    child: 字体多大? 有没有文字阴影? 真实内容的宽高是多少?
   -->
</body>

答案是：字体：80，有文字阴影，真实内容的宽：290px 高190px

再说说项目中常问的属性，但总是百度的，希望看一次就记得了，从此用这几个属性不百度。

常问的属性

flex(弹性布局）
transform: translate3D rodate3D
animation(设定动画)
3D or 透视(perspective)

flex
父项常用属性：

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction和 flex-wrap

子项常见属性：

flex(复合属性): 默认: flex: 0 1 auto;
flex-grow
flex-shrink
flex-basis
align-self：控制子项自己在侧轴的排列方式
order：定义子项的排列顺序(前后顺序), 0是第一个

transform

2D的属性相信大家都会用了, 本文主要深究transform的3D属性：

透视：perspctive
3D呈现：transfrom-style
3D 位移：translate3d(x, y, z)
3D旋转：rotate3d(x, y, z)

animation

动画常见属性
在这里插入图片描述
动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

小树需要灌溉-涛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的虚伪总结

CSS 的虚伪总结** 前序：css三大特性**1.层叠性：css样式冲突采取的原则（后者覆盖前者)2.继承性：对于部分属性样式会有天生的继承3.优先级：选择器优先级算法层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉原则：样式冲突，遵循的原则是「就近原则。」那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠继承性子标签会继承父标签的某些样式，如文本颜色和字号
复制链接

扫一扫

专栏目录