CSS(十一)——CSS分组和嵌套,尺寸(Dimension)

CSS 分组 和 嵌套 选择器

分组选择器

举个例子,多个标签有同一个样式,就可以不一个一个分开写,使用分组选择器

比如:
 

h1 {color:green;
}
h2 {color:green;
}
p {color:green;
}

就可以写为:
 

h1,h2,p
{color:green;
}

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式:

p{ }: 为所有 p 元素指定一个样式。

.marked{ }: 为所有 class="marked" 的元素指定一个样式。

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

最后两个注意区分

CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。

所有CSS 尺寸 (Dimension)属性

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1488833.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

<数据集>水果识别数据集<目标检测>

数据集格式:VOCYOLO格式 图片数量:10012张 标注数量(xml文件个数):10012 标注数量(txt文件个数):10012 标注类别数:7 标注类别名称:[Watermelon, Orange, Grape, Apple, peach, Banana, Pineapple] 序…

Redis常用指令(不定期更新)

Redis常用指令(不定期更新) 查询指定前缀key的数量查看键空间事件开启键空间通知 查询指定前缀key的数量 查询【TEST前缀】的key数量 EVAL "return #redis.call(keys,TEST:*)" 0返回信息 查看键空间事件 config get notify-keyspace-even…

Python | Leetcode Python题解之第284题窥视迭代器

题目: 题解: class PeekingIterator:def __init__(self, iterator):self.iterator iteratorself._next iterator.next()self._hasNext iterator.hasNext()def peek(self):return self._nextdef next(self):ret self._nextself._hasNext self.itera…

AI绘画美女图如何带货? 分享最容易的起号方式,一定别错过!!

学习AI绘画最好的工具有两种。 一个是Midjourney,新手只需要知道提示词怎么写就可以了。 不懂得写,就直接去抄,去复制粘贴,AI绘画最值得鼓励的就是抄。 先学会抄,再考虑改,国外有很多设计师赚钱的方式就…

sql注入的专项练习 sqlilabs(含代码审计)

在做题之前先复习了数据库的增删改查,然后自己用本地的环境,在自己建的库里面进行了sql语句的测试,主要是回顾了一下sql注入联合注入查询的语句和sql注入的一般做题步骤。 1.获取当前数据库 2.获取数据库中的表 3.获取表中的字段名 一、sql…

原型图设计指南:从基础到精通

用户体验设计师和原型设计的主要功能 PM、网站开发工程师通过展示产品内容、结构和粗略布局来沟通最初产品设想的重要工具,说明用户将如何与产品互动,而不是视觉设计。在大厂中,岗位分工更加细致明确,大部分原型都是产品经理做的&…

【Linux】线程互斥和同步

目录 线程互斥 相关概念 互斥量mutex 互斥量的接口 初始化互斥量 销毁互斥量 互斥量加锁/解锁 可重入VS线程安全 概念 可重入与线程安全的联系 可重入与线程安全的区别 死锁 死锁的四个必要条件 避免死锁 避免死锁的算法 线程同步 条件变量 条件变量函数 初始…

Stable Diffusion WebUI本地环境搭建

一、项目代码下载 git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui 二、环境配置 conda create --n stafu python3.10.6 实际上跟自己创建的环境没有关系,项目启动会自动复制这个环境,之后项目根据这个基础环境构建 也可以在自己…

UE5.4内容示例(1)- 学习笔记

https://www.unrealengine.com/marketplace/zh-CN/product/content-examples 《内容示例》是学习UE5的基础示例,可以用此示例熟悉一遍UE5的功能 模型与材质部分 StaticMeshes FBX_Import_Options Material_Advanced Material_Decals Material_Instances Material_N…

5G智能防爆手持终端在石油化工行业中扮演着什么角色?

5G智能防爆手持终端在石油化工行业中扮演着至关重要的角色,主要体现在以下几个方面: 一、确保安全生产 防爆设计:石油化工行业的工作环境往往存在易燃易爆的危险,5G智能防爆手持终端采用特殊材料和设计,能够在这些极端…

华为交换机SSH配置

华为交换机SSH配置 一、 简介 1、SSH概念 SSH是一种用于通过网络连接到远程计算机并执行命令的协议。它提供了加密的通信会话,使得用户可以在不安全的网络中安全地传输数据。SSH协议最初由芬兰的Tatu Ylnen在1995年创建,旨在解决Telnet和非加密的远程…

C++内存管理和模板/stl初识

前言 c兼容C语言,但它因为有类和对象的概念,C语言原生的那套内存管理函数在特定场景下还是有些捉襟见肘的,为此c在C语言的基础上引入新的内存管理方案,今天我们就来简单的认识一下c的内存管理。除此之外,模板也是c引入…

unity2D游戏开发03状态控制

多态和动画 建立player-idle动画,取玩家最后两个图片 选中playcontroller控制器 将玩家动画拖进去 右键player-idle,选择set as layer Default state 右键点击Any State ,点击Make Transition 结果 动画参数 动画参数是动画控制器定义的变量,点击Param…

【leetcode 详解】生成特殊数字的最少操作【中等】(C++思路精析)

题目见下: 测试数据: 解题思路笔记: 最初拿到这道题是很蒙的,联想不到什么数据结构的模型(肯定是笔者积累太少了),甚至惯性地想怎么实现“删除数字”的操作:在原字符串中抽出一个字符然后将剩…

js轮播图制作

实现一个简单的JavaScript轮播图可以通过以下步骤完成: 创建HTML结构,包括轮播图容器和图片列表。 使用CSS进行样式设置,包括隐藏多余的图片。 使用JavaScript编写函数来控制图片的切换。

异常处理和swagger使用

全局异常处理类 定义全局异常处理类,会将错误全部提交到这个异常处理类中进行处理,这个类会将处理的统一结果响应给前端,如果不添加异常处理类,异常不会按照统一的响应格式进行,前端无法识别,当然也可以在…

vue3 常用的知识点

setup:容许在script当中书写组合式API 并且vue3的template不再要求唯一的根元素 <script setup>const name app; </script>组合式API的用法&#xff1a; 可以直接在script标签中定义变量或者函数&#xff0c;然后直接在template当中使用 <template>{{mes…

文件上传总结

一、原理 通过界面上的上传功能上传了一个可执行的脚本文件&#xff0c;而WEB端的系统并未对其进行检测或者检测的逻辑做的不够好&#xff0c;使得恶意用户可以通过文件中上传的一句话木马获得操控权 二、绕过方法 1>前端绕过 1.删除前端校验函数 checkFile() 2.禁用js…

如何实现ECharts图表根据屏幕大小自适应?

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vue篇专栏内容:Vue-ECharts自适应 目录 前言 1920*1080分辨率示图 8184*2432分辨率示图 以vue3ts开发为例 (…

高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图

目录 高效工作流&#xff1a;用Mermaid绘制你的专属流程图 一、流程图的使用场景 1.1、流程图flowChart 1.2、使用场景 二、如何使用mermaid画出优雅的流程图 2.1、流程图添加图名 2.2、定义图类型与方向 2.3、节点形状定义 2.3.1、规定语法 2.3.2、不同节点案例 2.…