【前端学习笔记】(四)（选择器、背景相关属性、元素显示模式、CSS特性）

已于 2022-05-02 21:01:48 修改
阅读量635 收藏 2
点赞数 1
分类专栏： 前端 文章标签： 前端
于 2022-04-04 21:23:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48650082/article/details/123950147
版权
本文详细介绍了CSS中选择器的进阶用法，包括后代选择器、子代选择器、并集选择器、交集选择器、hover伪类选择器以及VSCode中Emmet语法。此外，还探讨了背景颜色、背景图片、背景平铺、背景位置等属性，以及元素显示模式转换和居中方法。内容深入浅出，适合前端开发者学习和参考。
摘要由CSDN通过智能技术生成

目录

一、选择器进阶

1、复合选择器

1.1 后代选择器：空格

➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
➢ 选择器语法：选择器1 选择器2 { css }
➢ 结果：
• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
➢ 注意点：
（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>
        .father .son {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <p>爸爸</p>
        <div class="son">
            <p>儿子</p>
        </div>
    </div>
</body>
</html>

效果展示：
后代选择器

1.2 子代选择器：>

➢ 作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素
➢ 选择器语法：选择器1 > 选择器2 { css }
➢ 结果：
• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
➢ 注意点：
（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>
        .father>.son {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <p>爸爸</p>
        <div class="son">
            <p>儿子</p>
        </div>
    </div>
</body>
</html>

效果展示：
子代选择器

2、并集选择器

并集选择器：,
➢ 作用：同时选择多组标签，设置相同的样式
➢ 选择器语法：选择器1 ， 选择器2 { css }
➢ 结果：
• 找到 选择器1 和 选择器2 选中的标签，设置样式
➢ 注意点：
（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>
        h1,
        p,
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <h1>h1标签</h1>
    <p>p标签</p>
    <div>div标签</div>
</body>
</html>

效果展示：
并集选择器

3、交集选择器

交集选择器：紧挨着
➢ 作用：选中页面中 同时满足 多个选择器的标签
➢ 选择器语法：选择器1选择器2 { css }
➢ 结果：
• （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
➢ 注意点：
（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>
        p.red{
            color: red;
        }
    </style>
</head>
<body>
    <p class="red">p标签</p>
</body>
</html>

效果展示：
交集选择器

4、hover伪类选择器

➢ 作用：选中鼠标悬停在元素上的状态，设置样式
➢ 选择器语法：选择器:hover { css }
➢ 注意点： 伪类选择器选中的元素的某种状态

例子：

<!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>
        a {
            text-decoration: none;
        }
        a:hover {
            color: pink;
        }
    </style>
</head>
<body>
    <a href="#">鼠标悬停</a>
</body>
</html>

效果展示：
鼠标未悬停于标签上时：
鼠标未悬停
鼠标悬停于标签上时：
鼠标悬停

5、VS Code中的Emmet语法

➢ 作用：通过简写语法，快速生成代码
➢ 语法：
• 类似于选择器的写法

名称示例效果
标签名div< div >< /div >
类选择器.red< div class=“red”>< /div >
id选择器#one< div id=“one”>< /div >
交集选择器p.red#one< p class=“red” id=“one”>< /p >
子代选择器ul>li< ul >< li >< /li >< /ul >
内部文本ul>li{我是li的内容}< ul >< li >我是li的内容< /li >< /ul >
创建多个ul>li*3< ul >< li >< /li >< li >< /li >< li >< /li >< /ul >

二、背景相关属性

1、背景颜色

➢ 属性名：background-color（bgc）
➢ 属性值：
• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
➢ 注意点：
• 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

例子：

<!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: aqua;
         }
    </style>
</head>
<body>
    <div class="one">div</div>
</body>
</html>

效果展示：
设置背景颜色

2、背景图片

➢ 属性名：background-image（bgi）
➢ 属性值：background-image: url(图片路径);
➢ 注意点：
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

例子：

<!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: 200px;
             height: 200px;
             background-image: url(images/bg/bg1.jpg);
         }
    </style>
</head>
<body>
    <div class="one">div</div>
</body>
</html>

效果展示：
设置背景图

3、背景平铺

➢ 属性名：background-repeat（bgr）
➢ 属性值：

取值效果
repeat（默认值）水平和垂直方向都平铺
no-repeat不平铺
repeat-x沿水平方向（x轴）平铺
repeat-y沿垂直方向（y轴）平铺

例子1：

<!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 {
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: rgb(190, 255, 245);
            background-image: url(images/MH/pic3_2.jpg);
        }
         .one {
             background-repeat: repeat;
         }
         .two {
             background-repeat: no-repeat;
         }
    </style>
</head>
<body>
    <div class="one">div1</div>
    <div class="two">div2</div>
</body>
</html>

效果展示：
平铺于不平铺
例子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>
        div {
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: rgb(190, 255, 245);
            background-image: url(images/MH/pic1_2.jpg);
        }
         .one {
             background-repeat: repeat-x;
         }
         .two {
             background-repeat: repeat-y;
         }
    </style>
</head>
<body>
    <div class="one">div1</div>
    <div class="two">div2</div>
</body>
</html>

效果展示：
x轴与y轴的平铺

4、背景位置

➢ 属性名：background-position（bgp）
➢ 属性值：background-position:水平方向位置 垂直方向位置；
背景位置
➢ 注意点：
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

水平方向例子：

<!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 {
            width: 200px;
            height: 200px;
            margin: 10px;
            display: inline-block;   /* div标签是块级元素，将其改成行内块元素可实现一行排列 */
            background-color: rgb(190, 255, 245);
            background-image: url(images/MH/pic1_2.jpg);
            background-repeat: no-repeat;
        }
         .one {
             background-position: left;
         }
         .two {
             background-position: center;
         }
         .three {
             background-position: right;
         }
    </style>
</head>
<body>
    <div class="one">div1</div>
    <div class="two">div2</div>
    <div class="three">div3</div>
</body>
</html>

效果展示：
背景位置水平方向

垂直方向例子：

<!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 {
            width: 200px;
            height: 200px;
            margin: 10px;
            display: inline-block;   /* div标签是块级元素，将其改成行内块元素可实现一行排列 */
            background-color: rgb(190, 255, 245);
            background-image: url(images/MH/pic1_2.jpg);
            background-repeat: no-repeat;
        }
         .one {
             background-position: top;
         }
         .two {
             background-position: center;
         }
         .three {
             background-position: bottom;
         }
    </style>
</head>
<body>
    <div class="one">div1</div>
    <div class="two">div2</div>
    <div class="three">div3</div>
</body>
</html>

效果展示：
背景位置垂直方向
坐标表示例子：

<!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 {
            width: 200px;
            height: 200px;
            margin: 10px;
            display: inline-block;   /* div标签是块级元素，将其改成行内块元素可实现一行排列 */
            background-color: rgb(190, 255, 245);
            background-image: url(images/MH/pic1_2.jpg);
            background-repeat: no-repeat;
        }
         .one {
             background-position: 20px 20px;
         }
         .two {
             background-position: 50px,50px;
         }
         .three {
             background-position: 88px,88px;
         }
    </style>
</head>
<body>
    <div class="one">div1</div>
    <div class="two">div2</div>
    <div class="three">div3</div>
</body>
</html>

效果展示：
背景位置坐标表示

5、背景相关属性连写

➢ 属性名：background（bg）
➢ 属性值：
• 单个属性值的合写，取值之间以空格隔开
➢ 书写顺序：
• 推荐：background：color image repeat position
➢ 省略问题：
• 可以按照需求省略
• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
➢ 注意点
• 如果需要设置单独的样式和连写
• ① 要么把单独的样式写在连写的下面
• ② 要么把单独的样式写在连写的里面

例子：

<!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: 200px;
             height: 200px;
             background: pink url(images/MH/pic1_2.jpg) no-repeat center;
         }
    </style>
</head>
<body>
    <div class="one">div1</div>
</body>
</html>

效果展示：
背景位置属性连写

6、img标签和背景图片的区别

➢ 需求：需要在网页中展示一张图片的效果？
➢ 方法一：直接写上 img 标签即可
• img标签是一个标签，不设置宽高默认会以原尺寸显示
➢ 方法二：div标签 + 背景图片
• 需要设置 div 的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

例子：

<!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: 200px;
             height: 200px;
             background-image: url(images/MH/pic3_1.jpg);
         }
    </style>
</head>
<body>
    <img src="images/MH/pic7_1.jpg" alt="就是一张图">
    <div class="one">div</div>
</body>
</html>

效果展示：
img与div背景图

三、元素显示模式

1、块级元素

➢ 显示特点：
（1）独占一行（一行只能显示一个）
（2）宽度默认是父元素的宽度，高度默认由内容撑开
（3）可以设置宽高
➢ 代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

例子：

<!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 {
             width: 60px;
             height: 50px;
             background-color: aqua;
         }
         p {
             width: 70px;
             height: 60px;
             background-color: lightpink;
         }
         h3 {
             width: 80px;
             height: 70px;
             background-color: mediumpurple;
         }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h3>h3</h3>
</body>
</html>

效果展示：
块级元素

2、行内元素

➢ 显示特点：
（1）一行可以显示多个
（2）宽度和高度默认由内容撑开
（3）不可以设置宽高
➢ 代表标签：
• a、span 、b、u、i、s、strong、ins、em、del……

例子：

<!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 {
             width: 60px;
             height: 50px;
             background-color: aqua;
         }
         p {
             width: 70px;
             height: 60px;
             background-color: lightpink;
         }
         h3 {
             width: 80px;
             height: 70px;
             background-color: mediumpurple;
         }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h3>h3</h3>
</body>
</html>

效果展示：
行内元素
由图可见，样式中设置的宽高对行内元素无效。

3、行内块元素

➢ 显示特点：
（1）一行可以显示多个
（2）可以设置宽高
➢ 代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

例子：

<!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>
         input {
             width: 100px;
             height: 40px;
         }
         button {
             width: 80px;
             height: 40px;
             background-color: aquamarine;
         }
    </style>
</head>
<body>
    <input type="text">
    <button>按钮</button>
</body>
</html>

效果展示：
行内块元素

4、元素显示模式转换

➢ 目的：改变元素默认的显示特点，让元素符合布局要求
➢ 语法：

属性效果使用频率
display:block转换成块级元素较多
display:inline-block转换成行内块元素较多
display:inline转换成行内元素极少

例子：

<!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>
         a {
             width: 100px;
             height: 40px;
             background-color: pink;
             display: inline-block;
         }
         span {
             width: 80px;
             height: 40px;
             background-color: aquamarine;
             display: block;
         }
    </style>
</head>
<body>
    <a href="#">这是链接</a>
    <span>span</span>
</body>
</html>

效果展示：
行内元素变行内块或块

5、HTML嵌套规范注意点

（1）块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
➢ 但是：p标签中不要嵌套div、p、h等块级元素
（2）a标签内部可以嵌套任意元素
➢ 但是：a标签不能嵌套a标签

6、居中方法总结

居中方法
margin: 0 auto; 可实现网页的版心居中（版心：网页的有效内容）。

四、CSS 特性

1、继承性

1.1 继承性的介绍

➢ 特性：子元素有默认继承父元素样式的特点（子承父业）
➢ 可以继承的常见属性(文字控制属性都可以继承)
（1）color
（2）font-style、font-weight、font-size、font-family
（3）text-indent、text-align
（4）line-height
（5）……
➢ 注意点：
• 可以通过调试工具判断样式是否可以继承

1.2 继承的应用

➢ 好处：可以在一定程度上减少代码
➢ 常见应用场景：
（1）可以直接给 ul 设置 list-style:none 属性，从而去除列表默认的小圆点样式
（2）直接给 body 标签设置统一的 font-size，从而统一不同浏览器默认文字大小

1.3 继承失效的特殊情况

➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
（1）a标签的 color 会继承失效
• 其实 color 属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
（2）h系列标签的 font-size 会继承失效
• 其实 font-size 属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

2、层叠性

➢ 特性：
（1）给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
（2）给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点：
• 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3、优先级

3.1 优先级的介绍

➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点：
（1）!important写在属性值的后面，分号的前面！
（2）!important不能提升继承的优先级，只要是继承优先级最低！
（3）实际开发中不建议使用 !important 。

3.2 权重叠加计算

➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
权重计算
➢ 比较规则：
（1）先比较第一级数字，如果比较出来了，之后的统统不看
（2）如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
（3）如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
➢ 注意点：!important如果不是继承，则权重最高，天下第一！

香蕉卟NaNa
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
联及选择器前端显示数据
weixin_57166067的博客
02-23 275
sql WITH RECURSIVE cte AS ( SELECT a.id, a.pid,a.name FROM fries_system_constant a WHERE a.flag='PROFESSIONAL_TYPE' UNION ALL SELECT k.id,k.pid,k.name FROM fries_system_constant k INNER JOIN cte c ON c.id = k.pid )SELECT id, pid,name FROM cte 前端转换为树形结构的
前端开发学习笔记 3 (Chrome浏览器调试工具、Emmet语法、CSS复合选择器、CSS元素选择模式、CSS背景）
hanmo22357的博客
04-05 1282
元素显示模式概述：元素以什么样的方式进行显示，是独占一行或一行显示多个；HTML元素标签分类：HTML标签可以分为块标签和行内标签。
前端学习笔记（二）CSS（选择器、文本属性、显示模式）
m0_56413004的博客
05-28 321
CSS（层叠样式表） 是一种样式表语言，用来描述HTML 文档的呈现。 CSS选择器 CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。 标签选择器 语法格式 <style> 标签名{ 属性:属性值； 属性:属性值; } </style> 标签选择器主要针对的是...
前端学习笔记：CSS的引入，元素选择器
sinat_38393872的博客
04-27 715
w2这是本人学习的总结，主要学习资料如下马士兵教育。
【整理+总结】pink老师前端三件套之CSS笔记（二）CSS属性 & 元素显示模式 & 引用方式 & 三大特性
weixin_42771853的博客
12-08 2657
1. CSS属性：字体属性、文本属性、背景属性 2. 元素显示模式：块元素、行内元素、行内块元素 3. CSS 引用方式：行内样式表、内部样式表、外部样式表 4. CSS 三大特性：层叠性、继承性、优先级
CSS复合选择器，元素的显示模式，CSS背景设置
冰山一树Sankey的博客
03-11 477
CSS复合选择器，元素的显示模式，CSS背景设置 欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可 博客园主页：博客园主页-冰山一树Sankey CSDN主页：CSDN主页-冰山一树Sankey 前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动，下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也愿每个前端爱好者学有所成 一. Emmet语法 Emmet语法前身是Zen coding,它使用缩写来提高h
web前端css学习笔记(2)——选择器
m0_52353966的博客
03-24 1050
本篇学习CSS选择器，内容比较复杂易混。本篇学习CSS选择器：通配选择器，元素原则器，类选择器，ID选择器；通过不同的组合我们得到交集选择器、并集选择器、后代选择器、子代选择器、兄弟选择器和属性选择器。伪类选择器将单独放到下篇笔记中。
web前端css学习笔记(3)——伪类选择器、选择器优先级
m0_52353966的博客
04-01 1059
本节学习伪类、伪类选择器。本节接上一节，学习了最后的伪类选择器和伪元素选择器。选择器优先级有自己的计算方式，从左往右计算。
前端开发学习笔记2 （CSS简介、CSS基础选择器、CSS字体属性、CSS文本属性和CSS引入方式）
hanmo22357的博客
04-01 890
基本作用：CSS主要是对网页进行布局和美化。HTML语言中只关注内容的语义，而忽略了网页的布局和外观，因此我们需要使用CSS。CSS可以设置HTML中的文本样式、图片样式、版面布局和外观显示样式。名称介绍：CSS是层叠样式表的简称，有时候也会被称为CSS样式表或级联样式表。
〖大前端 - 基础入门三大核心之CSS篇④〗- CSS选择器之元素关系选择器、序号选择器与属性选择器
热门推荐
易编橙 · 终身成长社群，相遇已是上上签！
03-12 2万+
CSS3相比CSS2.1又新增和很多实用的选择器和伪类，`从IE7开始兼容`，兼容性也很好。下面就介绍一下CSS3新增的选择器。
JQuery 学习笔记 选择器之四
10-29
在本篇JQuery学习笔记中，标题“选择器之四”暗示着我们将继续深入探讨JQuery选择器的使用。选择器是JQuery中用于选取HTML元素的工具，它们根据特定的规则来选取符合条件的元素。本篇内容着重于四种特定的选择器，...
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS CSS 是一种标记语言，主要用于美化页面，美化 HTML，让画面更美观。总结来说，HTML 主要做结构，显示元素内容，而 CSS 负责美化，让结构（HTML）与样式（CSS）相分离。 一、CSS 语法...
jquery CSS选择器笔记
10-29
本篇笔记中，作者整理了44个CSS选择器，涵盖了CSS 2和CSS 3的所有规定，是学习和工作中的宝贵资料。 首先，通用元素选择器“*”可以匹配页面上的任意元素，它通常用于重置默认的CSS样式。标签选择器使用元素的标签...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
CSS选择器是其核心，例如类选择器（`.class`）、ID选择器（`#id`）和元素选择器（`element`），掌握这些选择器的用法能帮助我们更精准地定位并美化网页元素。 JavaScript是一种强大的客户端脚本语言，它使得网页...
css经典学习笔记.zip
11-01
CSS选择器种类繁多，包括类型选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。层叠原则（Cascading）决定了当多个规则应用于同一元素时，哪个规则优先级更高。一般情况下，更具体的选择器优先级更高，ID...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 390
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 346
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
最新发布
weixin_65767506的博客
08-22 217
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 454
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值