css选择器详解

news2024/11/25 4:35:19
  1. 简单选择器(根据名称、id、类来选取元素)
  2. 组合器选择器(根据它们之间的特定关系来选取元素)
  3. 伪类选择器(根据特定状态选取元素)
  4. 伪元素选择器(选取元素的一部分并设置其样式)
  5. 属性选择器(根据属性或属性值来选取元素)

1、简单选择器

.class.intro
#id#firstname
#id#firstname
elementp
element,element,…div, p

2、组合选择器

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

后代选择器(常用)
!](https://img-blog.csdnimg.cn/10858694282847c495d801f128f6f181.png)

子选择器
在这里插入图片描述
相邻兄弟选择器:父级一样,选择div后面的p标签,只选择相邻的
在这里插入图片描述
在这里插入图片描述
通用兄弟选择器(少用):
通用兄弟选择器匹配属于指定元素的同级元素的所有元素

在这里插入图片描述

3、伪类选择器

图片来源:w3school
在这里插入图片描述

4、伪元素选择器

图片来源:w3school
在这里插入图片描述
选择器执行顺序
!important
行内样式
选择器

id>class/伪类选择器/属性选择器 >
后代选择器/伪元素选择器 >
子选择器/相邻元素选择器 >
通配符

继承样式
浏览器默认样式

扩展:
1、浏览器默认样式
例如在Microsoft Edge浏览器中body默认样式
在这里插入图片描述
所以一般用*{margin:0;padding:0}来解决页面中文字不会直接顶到浏览器边框
2、可以继承的样式
(1)所有元素可继承
cursor鼠标样式和visibility是否可见
(2)内联元素可继承
letter-spacing或word-spacing(字符间距)、
white-space(规定段落中的文本换行)、
line-height(行高)、
文本属性(color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform)、direction
(3)块状元素可继承:text-indent和text-align

(4)列表元素可继承:list-style、list-style-type、list-style-position、list-style-image

(5)表格元素可继承:border-collapse

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

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

相关文章

第六讲:ambari-web 模块二次开发

上述图片为 Ambari 部署及操作 hdp 集群相关的部分界面截图。这些页面如果想调整的话,比如汉化,二次开发等,则可以修改 ambari-web 模块的源码来实现。 一、介绍 ambari-web 模块涉及到的界面有: HDP 集群部署向导已安装服务的仪表板、配置界面等主机列表及详细信息告警列…

【Opencv项目实战】图像的像素值反转

文章目录一、项目思路二、算法详解2.1、获取图像信息2.2、新建模板2.3、图像通道顺序三、项目实战:彩图的像素值反转(方法一)四、项目实战:彩图的像素值反转(方法二)五、项目实战:彩图转换为灰图…

Java中class文件的格式

常见的class文件格式如下图所示,下面我将对一下格式一一作出解释。 一、magic 该部分主要是对语言类型的规范,只有magic这个部分是CAFEBABE时才能被检测为Java语言,否则则不是。 二、minor version和major version minor version主要表示了…

【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)

需在实现列表的基础上开发 【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)_朝阳39的博客-CSDN博客 https://sunshinehu.blog.csdn.net/article/details/129356909 效果预览 …

【计算机网络】数据链路层可靠传输机制的三大协议:停止等待协议SW、后退N帧协议GBN、选择重传协议SR

一、可靠传输实现机制 1.停止等待协议SW case1、确认与否认 在发送端发送数据出现误码时,接收端回复一个NAK否认码,并要求发送端再发送一次。 case2、超时重传 接收端接收不到数据分组时,发送端就会一直处于等待接受端回复ACK或NAK的状态…

32 文件操作

目录 一、文件的概念 二、文件的分类(分类依据:能否使用文本编辑器打开文件) 1、文本文件 2、二进制文件 三、文件操作的步骤 1、打开文件:open()函数 2、打开文件的另一种写法(推荐):with open…

21- PyTorch通过CNN实现手写数字识别 (PyTorch系列) (项目二十一)

项目要点 torch 版本: torch.__version__ # 1.13.1cpu 设置GPU: device torch.device(cuda:0 if torch.cuda.is_available() else cpu) train_ds datasets.MNIST(./, train True, transformtransformation, download True) # 数据导入 transformation transforms.…

Spring高频面试问题汇总

1 什么是spring?Spring是一个轻量级Java开发框架,最早有Rod Johnson创建,目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。它是一个分层的JavaSE/JavaEE full-stack(一站式)轻量级开源框架,为开发Jav…

Day909.MySQL 不同的自增 id 达到上限以后的行为 -MySQL实战

MySQL 不同的自增 id 达到上限以后的行为 Hi,我是阿昌,今天学习记录的是关于MySQL 不同的自增 id 达到上限以后的行为的内容。 MySQL 里有很多自增的 id,每个自增 id 都是定义了初始值,然后不停地往上加步长。 虽然自然数是没有…

TSP 问题求解的最好方法 LKH

目前可以查到的最好的方法求解TSP问题是 LKH,所以本篇文章介绍如何使用Matlab 调用LKH 参考文档:用matlab调用迄今为止最强悍的求解旅行商(TSP)的算法-LKH算法_wx6333e948c3602的技术博客_51CTO博客 【LKH算法体验】用matlab调用…

游戏玩的多,陪玩你了解的多吗?用Python来采集陪玩数据,看看行情和美照

前言 (。・∀・)ノ゙嗨 大家好 现在应该每个人都玩过游戏吧,有些的上瘾,天天玩停不下来,有些的倒是没啥感觉 有游戏就肯定有陪玩啊,毕竟当朋友忙的时候,自己一个…

天琊超级进程监视器的应用试验(19)

实验目的 1、了解进程概念及其基本原理; 2、掌握天琊超级进程监视器的安装与使用。预备知识 本实验要求实验者具备如下的相关知识。 操作系统的安全配置是整个系统安全审计策略核心,其目的就是从系统根源构筑安全防护体系,通过用户的一…

Linux系统安装Tomcat

(1)登录Tomcat网址 https://tomcat.apache.org/,下载Tomcat安装包(2)登录我们的虚拟机,使用Linux系统中的“rz”命令上传压缩包(注意:如果使用“rz”上传压缩包出现错误时&#xff0…

STM32模拟SPI时序控制双路16位数模转换(16bit DAC)芯片DAC8552电压输出

STM32模拟SPI时序控制双路16位数模转换(16bit DAC)芯片DAC8552电压输出 STM32部分芯片具有12位DAC输出能力,要实现16位及以上DAC输出需要外挂DAC转换ASIC。 DAC8552是双路16位DAC输出芯片,通过SPI三线总线进行配置控制输出。这里…

苹果新卫星专利公布,苹果Find My功能知多少

根据美国商标和专利局(USPTO)公示的清单,苹果公司获得了一项新的卫星专利,可在非地面网络(Non-Terrestrial Networks,NTN)中定位用户设备(iDevice、MacBook 等)。 在专利…

Docker(六)--Docker网络--单机与跨主机(macvlan)容器通信

文章目录一、本地节点通信1.DNS2.joind网络模式3.端口映射4.跨主机容器通信二、跨主机容器通信1.相同网段进行通信2.不同网段进行通信一、本地节点通信 1.DNS 容器之间除了使用ip通信外,还可以使用容器名称通信。docker 1.10开始,内嵌了一个DNS server。…

【算法进阶】回溯(backtracking)基本逻辑,以及常见回溯问题(全排列、解数独、八皇后)

文章目录一、引言二、回溯法基本逻辑三、回溯法代码模板三、回溯法常见问题3.1 组合逻辑代码3.2 子集逻辑代码3.3 子集Ⅱ(未解答)逻辑代码3.4 分割回文串逻辑代码3.5 组合总和Ⅰ逻辑代码3.6 组合总和Ⅱ(未解答)逻辑代码3.7 组合总…

Mycat

Mycat 1.概述 1.Mycat是数据中间件2.中间件:连接软件组件和应用的计算机软件,便于软件和各部件的交互3.数据中间件:连接Java应用程序与数据库的软件2.适用场景 1.Java与数据库紧耦合(直接连接)2.高访问量高并发对数据库压力(集群)3.读写请求数据不一致(读写分离+主从复制)3.…

关于Gooey复选框CheckBox的使用

折腾了我一下午 官网也没发现具体的使用方法 老是报错 索引超出范围 我就很疑惑 百度也没有答案后来我修改成了非必参 加-- 这是不选中操作这是选中操作他说必须要有一个参数 我有啊 没搞懂 后来 我就这样(根据他报错提示来的)果真就没了问题这样也没问题 具体我还是没搞懂 反正…

K_A16_001 基于STM32等单片机驱动HX711称重模块 串口与OLED0.96双显示

K_A16_001 基于STM32等单片机驱动HX711称重模块 串口与OLED0.96双显示一、资源说明二、基本参数参数引脚说明三、驱动说明对应程序:四、部分代码说明1、接线引脚定义1.1、STC89C52RCHX711称重模块1.2、STM32F103C8T6HX711称重模块五、基础知识学习与相关资料下载六、视频效果展…