CSS学习第二天（1）-复合选择器、CSS元素分离

最新推荐文章于 2024-01-28 16:44:35 发布

陈平安_码来

最新推荐文章于 2024-01-28 16:44:35 发布

阅读量113

点赞数

分类专栏： css html 文章标签： html css

本文链接：https://blog.csdn.net/qq_45898579/article/details/114544969

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

CSS学习第二天（1）-复合选择器、CSS元素分离

1.Emmet语法

Emmet语法是集成好的，快捷输入代码的写法
1.1快速生成HTML结构语法
在这里插入图片描述

1.2快速生成CSS样式语法
没必要

2.快速规格化文档

对齐文档，是代码更加规整
快捷键 Shift+Alt+F
具体方法查看：[https://www.bilibili.com/video/BV1pE411q7FU?p=95]

3.复合选择器

在这里插入图片描述
3.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>复合选择器</title>
    <style>
        ol li {
            color: pink;
        }

        ol li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        <li>我很帅</li>
        <li>我很帅</li>
        <li>我很帅</li>
        <li><a href="#">我是最帅的</a></li>
    </ol>
    <ul>
        <li>我超级帅</li>
        <li>我超级帅</li>
        <li>我超级帅</li>
    </ul>
</body>

</html>

效果图：
在这里插入图片描述

3.2子选择器
在这里插入图片描述

3.3并集选择器
在这里插入图片描述

3.4伪类选择器
在这里插入图片描述
3.4.1 链接伪类选择器
有一下四种方式

代码示例：

a:link {
            color: blue;
            text-decoration: none;
        }

        /* 2.a:visited选择过的 */
        a:visited {
            color: darkgreen;
        }

        /* 3.a:hover鼠标经过 */
        a:hover {
            color: darkorchid;
        }

        /* 4.a:active鼠标长按 */
        a:active {
            color: palegreen;
        }

注意事项！
在这里插入图片描述
1·为确保伪类链接选择器生效，尽量按照LVHA的顺序书写，即link，visited，hover，active
2·由于现实中经常只要用到鼠标经过时改变属性，即使用Hover，故现实中经常只使用Hover
代码举例：

		a {
            color: gray;
        }

        a:hover {
            color: blue;
        }

3.4.2 focus伪类选择器
用于选取获得焦点的伪类元素
焦点即光标，一般情况类表单元素才能获取，因此该选择器主要针对表单元素来说的
代码示例：

		/* 4.focus选择器 */
        input:focus {
            background-color: blueviolet;
        }

谁获得光标，则谁被选出
3.5 复合选择器总结
在这里插入图片描述

4 CSS的元素显示模式

什么是元素的显示模式
在这里插入图片描述
4.1 块元素
代码：

display: block;

常见的块元素，以及块元素的特点
在这里插入图片描述
4.2 行内元素
常见的行内元素，以及行内元素的特点
代码：

display: inline;

在这里插入图片描述
4.3 行内块元素
代码：

display: inline-block;

常见的行内块元素，以及行内块元素的特点在这里插入图片描述
4.4 元素显示模式总结

4.4 元素显示模式的转化

转换为块级元素

display:block

块级元素转化为行内元素

display:inline

转化为行内块元素

display:inline-block

4.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>小米侧边案例</title>
    <style>
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #838788;
            font-size: 14px;
            color: white;
            text-decoration: none;
            text-indent: 2em;
            /* 让行高等于盒子的高度即可实现字体在盒子中垂直居中的效果 */
            line-height: 40px;
        }

        a:hover {
            background-color: orangered;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>

</body>

</html>

效果图：
在这里插入图片描述

陈平安_码来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习第二天（1）-复合选择器、CSS元素分离

CSS学习第二天1.Emmet语法Emmet语法是集成好的，快捷输入代码的写法1.1快速生成HTML结构语法1.2快速生成CSS样式语法没必要2.快速规格化文档对齐文档，是代码更加规整快捷键 Shift+Alt+F具体方法查看：[https://www.bilibili.com/video/BV1pE411q7FU?p=95]3.复合选择器3.1后代选择器（重要）代码示例：<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫