致自己：CSS学习笔记四

最新推荐文章于 2023-09-03 14:05:10 发布
最新推荐文章于 2023-09-03 14:05:10 发布
阅读量2.3k 收藏 12
点赞数 11
分类专栏： CSS学习笔记 文章标签： css 学习 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42285508/article/details/123457849
版权

浮动

1、结构伪类选择器

1、作用：

  • 根据元素在HTML中的结构关系查找元素
  • 减少对于HTML中类的依赖，有利于保持代码整洁
  • 常用于查找父级选择器中的子元素

2、选择器：

选择器说明
E:first-child {}匹配父元素中的第一个子元素，并且是E元素
E:last-child {}匹配父元素中的最后一个子元素，并且是E元素
E:nth-child(n) {}匹配父元素中的第n个子元素，并且是E元素
E:nth-last-child(n) {}匹配父元素中的倒数第n个子元素，并且是E元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
    <style>
        li:first-child {
            /* 找到第一个 */
            background-color: red;
        }
        li:last-child {
            /* 找到最后一个 */
            background-color: green;
        }
        li:nth-child(3) {
            /* 找到第n个 */
            background-color: blue;
        }
        li:nth-last-child(5) {
            /* 找到倒数第n个 */
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1个元素</li>
        <li>第2个元素</li>
        <li>第3个元素</li>
        <li>第4个元素</li>
        <li>第5个元素</li>
        <li>第6个元素</li>
        <li>第7个元素</li>
        <li>第8个元素</li>
        <li>第9个元素</li>
        <li>第10个元素</li>
        <li>第11个元素</li>
        <li>第12个元素</li>
        <li>第13个元素</li>
    </ul>
</body>
</html>

3、n可以是0,、1、2、3、…，也可以是公式

功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前五个-n+5
找到第五个之后的n+5
找到4的倍数4n
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
    <style>
        li:nth-child(even) {
            /* 找到偶数元素：2n/even */
            background-color: red;
        }
        li:nth-child(odd) {
            /* 找到奇数元素：2n+1/2n-1/odd */
            background-color: blue;
        }
        li:nth-child(4n) {
            /* 找到4的倍数 */
            background-color: skyblue;
        }
        li:nth-child(-n+5) {
            /* 
            找到前五个	
            -n+10-->找到前10个 
            */
            background-color: pink;
        }
        li:nth-child(n+5) {
            /* 
            找到第5个之后的，包括第五个	
            n+10-->找到第10个之后的 
            */
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1个元素</li>
        <li>第2个元素</li>
        <li>第3个元素</li>
        <li>第4个元素</li>
        <li>第5个元素</li>
        <li>第6个元素</li>
        <li>第7个元素</li>
        <li>第8个元素</li>
        <li>第9个元素</li>
        <li>第10个元素</li>
        <li>第11个元素</li>
        <li>第12个元素</li>
        <li>第13个元素</li>
    </ul>
</body>
</html>

4、nth-of-type结构伪类选择器

选择器说明
E:nth-of-type(n) {}只在父元素的同类型（E）子元素范围内，匹配第n个

与:nth-child的区别：

  • :nth-child → 直接在所有孩子中数个数
  • :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
    <style>
        li:nth-child(3) {
            background-color: red;
        }
        li:nth-of-type(2) {
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1个元素</li>
        <ul>
            <li>第1个元素</li>
            <li>第2个元素，我变橘</li>
            <li>第3个元素，我变红</li>
            <li>第4个元素</li>
            <li>第5个元素</li>
            <li>第6个元素</li>
            <li>第7个元素</li>
            <li>第8个元素</li>
        </ul>
        <li>第2个元素，我变橘</li>
        <li>第3个元素</li>
        <li>第4个元素</li>
        <li>第5个元素</li>
        <li>第6个元素</li>
    </ul>
</body>
</html>
2、伪元素

1、伪元素：一般页面中的非主体内容可以使用伪元素

2、特点：是CSS模拟出的标签效果

3、种类

伪元素作用
::before在父元素内容的最前面添加一个伪元素
::after在父元素内容的最后面添加一个伪元素

4、注意点：

  • 必须设置content属性才能生效
  • 伪元素默认是行内元素

5、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            color: red;
            width: 300px;
            height: 300px;
            background-color: orchid;
        }
        .father::before {
            /* content属性必须添加, 否则伪元素不生效 */
            content: '我是伪元素最前面的内容';
            color: pink;
            /* 默认行内元素，宽高不生效，设置为块元素 */
            display: block;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .father::after {
            content: '在不在';
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="father">div标签</div>
</body>
</html>
3、标准流

1、标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
2、 常见标准流排版规则：

  • 块级元素：从上往下，垂直布局，独占一行
  • 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
4、浮动

1、属性名：float

2、属性值：

属性名效果
left左浮动
right右浮动

3、浮动特点：

  • 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中

  • 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

  • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

  • 浮动元素有特殊的显示效果：一行可以显示多个、可以设置宽高

  • 浮动的元素不能通过text-align:center或者margin:0 auto

4、浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        浏览器解析行内块或行内标签的时候, 
        如果标签换行书写会产生一个空格的距离 
        */
        div {
            display: inline-block;
            height: 100px;
            width: 100px;
        }
        .one {
            background-color: pink;
        }
        .two {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kJtVFyU-1647147833521)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647139084902.png)]

5、使用浮动的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
        }
        .one {
            background-color: pink;
            float: left;
        }
        .two {
            background-color: skyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ll9IaGmH-1647147833522)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647139196445.png)]

6、浮动特点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-top: 50px;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            /* 浮动之后不会生效 */
            margin: 0 auto;
        }
        .three {
            width: 300px;
            height: 300px;
            background-color: yellow;
            
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

7、网页导航书写步骤

  • 清除默认的margin和padding

  • 找到ul，去除小圆点

  • 找到li标签，设置浮动让li一行中显示

  • 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？

    • 方法一：给a标签设置 display : inline-block
    • 方法二：给a标签设置 display : block
    • 方法三：给a设置 float : left
5、清除浮动
1、介绍

1、含义：清除浮动带来的影响

  • 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

2、原因：子元素浮动之后脱离标准流，不再占用位置

3、目的：需要父元素有高度，从而不影响其他网页元素的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
2、清除浮动的方法1：直接设置父元素的高度

1、特点：方便，但是有些布局中不能固定父元素高度，比如新闻列表等等

2、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
            /*方法1：给父元素设置高度*/
            height: 300px;
        }
        .bottom {
            height: 100px;
            background-color: rebeccapurple;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: bisque;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: burlywood;
        }
    </style>
</head>
<body>
     <!-- 
         父子级标签, 子级浮动, 父级没有高度, 
         后面的标准流盒子会受影响, 显示到上面的位置 
    -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
3、清除浮动的方法2：额外标签法

1、步骤：

  • 在父元素内容的最后添加一个块级元素
  • 给添加的块级元素设置clear:both

2、特点：会在页面中添加额外标签，让页面中的html结构变复杂

3、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: rebeccapurple;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: bisque;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: burlywood;
        }
        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
     <!-- 
         父子级标签, 子级浮动, 父级没有高度, 
         后面的标准流盒子会受影响, 显示到上面的位置 
    -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 方法2：添加额外标签，设置clear：both -->
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
4、清除浮动的方法3：单伪元素清除法

1、使用伪元素替代额外元素

//方法1
.clearfix::after {
	content:'';
	display:block;
	clear:both;
}

//方法2
.clearfix::after {
	contebt:'';
	display:block;
	clear:both;
	/*补充代码，在网页中看不到伪元素*/
	height:0;
	visibility:hidden;
}

2、特点：项目中优先使用，直接给标签加类即可清除浮动

3、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: rebeccapurple;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: bisque;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: burlywood;
        }
         /* 单伪元素清除浮动 和 额外标签法原理是一样的 */
        .clearfix::after {
            content: '';
            /* 伪元素是行内元素，要求设置为块级元素 */
            display: block;
            clear: both;
            /* 为了兼容性，可以设置如下属性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
     <!-- 
         父子级标签, 子级浮动, 父级没有高度, 
         后面的标准流盒子会受影响, 显示到上面的位置 
    -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
5、清除浮动的方法4：双伪元素清除法

1、操作代码：

.clearfix::bofore,
.clearfix::after {
	content:'';
	display:table;
}
.clearfix::after {
	clear:both;
}

2、特点：项目中优先使用，直接给标签加类即可清除浮动

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: rebeccapurple;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: bisque;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: burlywood;
        }
         /* 
            clearfix::before作用：解决外边距塌陷问题
            外边距塌陷：父子标签都是块级元素，
            子标签设置margin影响父元素的位置
          */

          /* 清除浮动 */
          .clearfix::before,
          .clearfix::after {
              content: '';
              display: table;
          }
          /* 真正清除浮动 */
          .clearfix::after {
              clear: both;
          }
    </style>
</head>
<body>
     <!-- 
         父子级标签, 子级浮动, 父级没有高度, 
         后面的标准流盒子会受影响, 显示到上面的位置 
    -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
6、清除浮动的方法5：给父元素设置overflow:hidden

1、操作步骤：直接给父元素设置 overflow : hidden

2、特点：方便

3、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            background-color: pink;
            /* 父元素设置：overflow: hidden; */
            overflow: hidden;
        }
        .bottom {
            height: 100px;
            background-color: rebeccapurple;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: bisque;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            background-color: burlywood;
        }
    </style>
</head>
<body>
     <!-- 
         父子级标签, 子级浮动, 父级没有高度, 
         后面的标准流盒子会受影响, 显示到上面的位置 
    -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

.bottom {
        height: 100px;
        background-color: rebeccapurple;
    }
    .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: bisque;
    }
    .right {
        float: left;
        width: 200px;
        height: 300px;
        background-color: burlywood;
    }
</style>
```
菜鸟自学编程
关注
  • 11
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
四、css选择器
weixin_40976555的博客
04-11 277
一、css选择器 1.class类选择器  .类名{} 一个网页中可以给样式相同的元素设置同样的class类名称； 2.id选择器  #id名{} 一个网页中id选择器的id名是惟一的,不可以使用id选择器同时给很多相同样式的元素设置样式3.标签选择器 标签名{}4.关系选择器：   1)子选择器 父元素&gt;子元素{} 用于选择父元素的第一代子元素;   2)后代选择器    祖辈元素 后代元...
CSS篇 累了，毁灭吧
2302_76746265的博客
05-11 70
CSS 基层代码
【CSS】CSS基础
qq_44314839的博客
03-28 742
选择器 通配选择器：* id选择器：. 类选择器：# 标签选择器：p 属性选择器：p[attr=] p[attr!=] p[attr~=] p[attr|=] p[attr^=] p[attr$=] 包含选择器：div p 子选择器：> 兄弟选择器：~ 相邻选择器：+ 样式表类型： 外部样式表：link 内部样式表：style 内联样式：style=“color:red;” 多重样式优先级 浏览器样式表<外部样式表<内部样式表<内联样式 类型 权重 通配选
CSS伪类选择器nth-child 选择3的倍数个元素写法
热门推荐
kerryqpw的博客
10-14 6万+
CSS伪类选择器nth-child 选择3的倍数个元素写法
【css】css奇数、偶数、指定数选择器：
最新发布
SunPeng的博客
09-03 5928
【css】css奇数、偶数、指定数选择器：
CSSDemo:CSS学习笔记
04-08
【CSSDemo:CSS学习笔记】 在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的重要工具。本学习笔记将深入探讨CSS的基础知识、选择器、盒模型、布局方式以及响应式设计等多个方面，帮助...
学习笔记18:CSS清除浮动
01-08
在CSS布局中，浮动元素（float）经常被用来创建多列布局或使文本环绕图片等效果。然而，浮动元素会带来一个问题，即它们可能会导致其父元素的高度塌陷，也就是父元素不再包含其浮动子元素，这在设计复杂的网页布局时...
CSS 学习笔记
01-19
id的优点（class的缺点）：id写在css用#选择器，class写在css中用.选择器。#选择器的优先级高于.选择器大约10倍，所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的。而class标签，或者...
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
CSS_study:CSS3学习笔记和代码
04-18
CSS3狂神说Java系列-个人学习笔记CSS简介前端3大部分Html - 结构CSS - 表现，表皮JavaScript - 动态交互如何学习CSS是什么CSS怎么用-快速入门CSS选择器（如何定位，重难点）美化网页（文字，阴影，超链接，列表，...
30个CSS选择器
huang714的专栏
12-05 531
学前端，这30个CSS选择器
css 选择器（选择第几倍的元素），nth-child（2n+1）
PrimaryColor
09-18 6136
直接上代码： 选择2倍的第一个元素： div:nth-child(2n+1) 选择2倍的第二个元素： div:nth-child(2n+2) 选择3倍的第一个元素： div:nth-child(3n+1) 选择3倍的第二个元素： div:nth-child(3n+2) 选择3倍的第三个元素： div:nth-child(3n+3) 以此类推。 ...
2020-12-15
Chloe_X的博客
12-15 238
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js"></scri
CSS3:nth-child选择器基本用法简述
02-23 3399
选择器匹配父元素中的第 n 个子元素，元素类型没有限制。n可以是一个数字，一个关键字，或者一个公式。注释：n从1开始p:nth-child(数字)p:nth-child(3)表示给第三个元素（P3）添加背景色接着上面的示例，如果p元素前面还有一个元素,如下图所示，P2被添加了背景色，而不是P3因为这里的p:nth-child(1) 为h1元素，p:nth-child(2)才为p元素首先定位p的父元素，父元素下的第n个元素为当前元素，css才会生效。
css为第几个倍数元素添加样式
weixin_30436101的博客
06-27 4321
//3n就是3的倍数都加这个样式*/.list li:nth-child(3n){ border-bottom:1px;} 转载于:https://www.cnblogs.com/bubuchu/p/7085023.html
这30个CSS选择器，你必须熟记（下）
前端达人
11-04 3579
关注前端达人，与你共同进步21、 X::pseudoElement 伪元素选择器我们可以使用伪元素（用::表示）来定义某些片段元素，比如第一行或第一个字母。要记住的是这只...
4、6、7、8、9、11、13、27的倍数的特征
weixin_30335575的博客
05-23 534
原文链接：http://blog.163.com/godsjk@126/blog/static/172582026201171904015846/ 4的倍数的特征： （1）十位数是奇数且个位数为不是四的倍数的偶数或十位数是偶数且个位数是四的倍数。 （2）若一个整数的末尾两位数能被4整除，则这个数能被4整除,即是4的倍数 。 6的倍数的特征： 各个数位上的数字之和可...
css4—第4代选择器
FE攻城狮
12-20 6771
历史前进的步伐是不会停止的，紧跟着CSS3，新的CSS4也即将问世，它正由W3C编辑团队研发中。从历史的角度看，CSS的发展和web浏览器的发展是相互独立的，它们是并行进步的。这就导致不同的浏览器支持不同的CSS规范。但是回到CSS4中，W3C周期性地更新一个CSS4规范，并且我想第一时间给你提供关于已经包含在CSS4中的一些基本信息。          在CSS4中引进了许多的新变化。
css——奇数、偶数、指定数样式
qq_37916164的博客
01-27 3292
第一种：简单数字序号写法 :nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 /* 把第3个LI的背景设为橙色 */ li:nth-child(3){ background:orange; } 第二种：倍数写法 :nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。 /* 把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色 */ li:nth.
"王道基础：CSS学习笔记与简写技巧分享
在写颜色的时候，如果每两位的值相同，可以缩写一半，比如#ffffff可以缩写为#fff。这样可以帮助减少CSS文件的大小，也更加容易阅读。 1.2：边框当定义边框的...希望通过这些学习笔记，自己能够在CSS编码方面有所进步。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值