非常全的HTML+CSS+JS学习记录（六：CSS复合选择器+元素显示模式）

最新推荐文章于 2023-06-04 13:24:44 发布
最新推荐文章于 2023-06-04 13:24:44 发布
阅读量880 收藏 6
点赞数 1
分类专栏： 前端 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_YJX/article/details/123281530
版权

CSS复合选择器


本节目标：

  • 能使用emmet语法

  • 能够使用CSS复合选择器

  • 能够写出伪类选择器的使用规范

  • 能够说出元素有几种显示模式

  • 能够写出元素显示模式的相互转换代码

  • 能够写出背景图片的设置方式

  • 能够计算CSS的权重

Emmet 语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.

  1. 快速生成HTML结构语法
  2. 快速生成CSS样式语法

在这里插入图片描述
打这些符号的时候不要有空格！
第五条默认是div生成的在这里插入图片描述
实例代码：

<body>
    <div></div>
    <table></table>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <div><span></span></div>

    <div></div>
    <p></p>
    <div class="nav"></div>
    <div class="nav"></div>
    <div id="banner"></div>
    <p class="one"></p>
    <span class="gray"></span>
    <ul>
        <li id="two"></li>
    </ul>
    <div class="demo"></div>
     <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- 我们想生成的标签里面默认显示几个文字  div{文字}-->
    <div>pink老师不是gay</div>     
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>   
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

复合选择器

在这里插入图片描述
在这里插入图片描述

<!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>复合选择器之后代选择器</title>
    <style>
        /* 我想要把ol里面的小li选出来改为pink */
        ol li {
            color: pink;
        }
        /* 中国 山东 济南 蓝翔 */
        ol li a {
            color: red;
        }
        .nav li a { /* 用类选择器也行 */
            color: yellow;
        }
    </style>
</head>
<body>
    <ol>
        变态写法
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>
</body>
</html>

在这里插入图片描述
在制作下拉菜单的时候经常使用。

   <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>复合选择器之并集选择器</title>
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

像这种网页上鼠标碰到后出现的样式。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
代码：

<!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>复合选择器之链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
</html>

在这里插入图片描述


<!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>focus伪类选择器</title>
    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

在这里插入图片描述

CSS 的元素显示模式

1.什么是元素的显示模式

在这里插入图片描述
在这里插入图片描述


<!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>显示模式之块级元素</title>
    <style>
        div {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>比较霸道,自己独占一行</div> 瑟瑟发抖
    <p>
        <div>这里有问题</div>
    </p>
</body>

</html>

在这里插入图片描述
但是最好把a转换一下
在这里插入图片描述
在这里插入图片描述

元素显示模式转换

在这里插入图片描述

<!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>元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

一个小工具的使用 snipaste

在这里插入图片描述

案例：简洁版小米侧边栏

案例的核心思路分为两步:

  1. 把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.
  2. 鼠标经过a 给 链接设置背景颜色

在这里插入图片描述
在这里插入图片描述

<!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>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }

        /* 2 鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </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>

在这里插入图片描述

偏上或偏下的情况。

在这里插入图片描述

<!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>单行文字垂直居中</title>
    <style>
        div {
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>我要居中</div>
</body>

</html>

https://movie.douban.com/top250?start=100&filter=

懒回顾，半缘君
关注
专栏目录
学习记录（Git+gitlab+HTML+css+JavaScript）
shengmustudio的博客
09-14 725
个人学习记录
html+css+js 学习笔记之JS
最新发布
CSDN@YuanDaiMa2048的博客
08-22 69
第三部分 持续记录学习html5+css3+js时的一些课程笔记
HTML，CSS，Js-学习资料
04-25
自己学习时收集的一些参考资料，里面有html,css,js,常用正则表达式
HTML CSS JS 前端学习记录
w1109390306的博客
05-25 634
HTML是什么，HTML5是什么            答：HTML元素标签、属性都是什么概念？文档类型是什么概念，起什么作用？meta标签都用来做什么的？Web语义化是什么，是为了解决什么问题链接是什么概念，对应什么标签？常用标签都有哪些，都适合用在什么场景表单标签都有哪些，对应着什么功能，都有哪些属性ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子...
html、css、javascript简单学习
m0_61454947的博客
04-11 1006
html语言：负责网页上显示的内容 1、html语言是解释型语言，不是编译型。 浏览器是容错的 2、html页面中由一对标签组成：<html></html> <html> 称之为 开始标签 </html>称之为 结束标签 3、title 表示网页的标题 4、可以在meta标签中设置编码方式 5、<br/>表示换行 。br标签是一个单标签。 单标签：开始标签和结束标签是同一个，斜杠放在单词后面 6、p 表示段落标签 7、img 标签图片标签
非常全的HTML+CSS+JS学习记录（七：CSS背景+三大特性）
CSDN_YJX的博客
03-11 1352
七CSS背景 CSS背景 这样插入背景图片的后果是平铺的效果。
Day01 html详解
weixin_30378311的博客
07-25 176
day01 html详解 1、html的简介 1.1 什么是html？ - HyperText Markup Language：超文本标记语言，网页语言 ** 超文本：超出文本的范畴，使用html可以轻松实现这样操作 ** 标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称> ...
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
第6章　级联样式单与CSS选择器 150 6.1　样式单概述 151 6.2　CSS样式单的基本使用 152 6.3　CSS选择器 158 6.4　伪元素选择器 167 6.5　CSS 3新增的伪类选择器 176 6.6　在脚本中修改显示样式 195 6.7　本章小结 ...
《HTML+CSS+JavaScript网页制作案例教程》_教学大纲.docx
12-21
- 内容涵盖CSS样式规则、引入样式表、基础选择器、字体样式、复合选择器、层叠性和继承性等。 - 重点在于CSS的使用，包括复合选择器、层叠性和优先级的理解和应用。 - 学生需要掌握CSS样式规则，控制文本和元素的...
HTML+CSS学习笔记
shsjjjs的博客
10-21 791
HTML+CSS学习笔记
【前端】Html+Css+JavaScript基础知识点
lcukyNwa的博客
07-18 6645
Html+Css+JavaScript基础知识点
HTML搭配JS(JavaScript)实现完全独立的评论组件,可移植,可复用,可读性强（附源码）
热门推荐
qq_42349895的博客
05-05 1万+
导读：如果您正在看这篇文章，想必您正在开发一个多人交互的网站，而踌躇自己写一个评论组件？纵观BAT以及各种电子商务或 博客等网站，无一不使用了评论这个功能。那么如此一般的功能，你能自己实现吗？ 本文的组成部分：探索→ 研究 → 思考 → 整理 → 实现 → 呈现 正文 ↓ 探索（主要以图片和前端源码入手） 图片之【CSDN】 ......
html+js 复用（不使用后端、不使用框架插件，纯html+js）
qq_30975339的博客
03-07 1391
我在网上看到的关于html复用的问题，大多数都是用后端（include）或者是插件（如glup）。 但是我没用过那插件，而且也不想因为这一点问题就再多加载个插件。原本我写的是php、html混写，现在不是追求前后端分类嘛，那没法子了，只好自己写。 一开始我是想着用iframe来引入页面。但是实际上用了，发现，它还得重新设置iframe标签，这样就很麻烦了。还得根据不同的内容进行修改。 接着我...
HTML代码复用
alpha105的博客
06-04 1525
HTML代码复用
HTML+CSS+JS 详细知识（新手向）
Scyth1的博客
07-09 8000
HTML 超文本标记语言标记语言：通过标签的不同来代表不同的意思mac地址是物化在电脑网盘硬件上的地址IP里其实包含着mac的一部分超文本：有文字之外的一些类似连接、按钮等的东西JavaScript让html有交互能力绝对路径< img src="地址" alt="描述 ">加不加span都没什么变化 的作用是形成独立空间style 通用属性形成独立空间 让元素换行在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行 ( )。超链接 文字描述部分可以跳转到其他html文件target属性用于设置打
HTML5（CSS复合选择器）
qq_52638405的博客
11-09 318
1.标签指定式选择器 又叫交集选择器，由两个选择器组成，其中第一个选择器为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one. 2.后代选择器 用来选择元素或元素的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。写法如p strong{color:red;} 3.并集选择器 并集选择器是各个选择器之间通过逗号连接而成的，任何形式的选择器(包括标签选择器、类选择器以及id
什么是HTML复合选择器,CSS样式之复合选择器
weixin_33622555的博客
06-03 486
1.交集选择器交集选择器使用的方法是其中一个为HTML的标签,另外一个是类选择器,示例如下:p.one 解释: p是HTML中的标签 , .one 是一个类选择器的书写方式,使用 1232.并集选择器多个选择器用逗号分开,所有选择器都能实现后面的样式 ,示例如下:a , p , .one , #id {}3.后代选择器外层的标签写在前面,内层标签写在后面 ,示例如下:div p {} 解释 ...
共享对象
ShiXueTanLang的博客
12-04 2043
1. 共享对象 可见性 可见性涉及的方面：   (1) 过期数据 非线程安全的计数器： /**   * @Title: NotThreadSafetyCounter.java   * @Package visibility   * @Description: TODO   * @author 落叶飞翔的蜗牛   * @date 2017年12月3日 下午6:47:35 *
CSS与JavaScript中的选择器详解：定位和操作DOM元素的关键
2. **组合和复合选择器**： - **后代选择器**：`A B`表示B元素位于A元素的任何位置。 - **子选择器**：`A > B`选取A元素的直接子元素B。 - **相邻兄弟选择器**：`A + B`选中紧跟在A元素后面的第一个同级B元素。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒回顾，半缘君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值