【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )

news2024/12/24 9:16:58

文章目录

  • 一、并集选择器
    • 1、语法说明
    • 2、代码示例
  • 二、并集选择器与后代选择器示例
    • 1、添加注释
    • 2、HTML 结构
    • 3、后代选择器 1
    • 4、后代选择器 2
    • 5、并集选择器
    • 6、完整代码示例
    • 7、显示效果





一、并集选择器




1、语法说明


并集选择器 可以选择 若干 基础选择器 选择出的 并集元素集合 ;


并集选择器语法 : 若干 基础选择器 可以写在一起 , 基础选择器之间使用 , 逗号隔开 ;

基础选择器1,基础选择器2,基础选择器3 {
	属性名称1:属性值1;
	属性名称2:属性值2;
	属性名称3:属性值3;
}

注意 : 基础选择器可以是任何类型的基础选择器 ;

子选择器 只能 从 父选择器 选择出的元素的 亲儿子 元素 中选择 , 孙子元素 和 重孙子元素 选择不到 ;


CSS 基础选择器 :

  • 标签选择器
  • 类选择器
  • ID 选择器
  • 通配符选择器

2、代码示例


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>并集选择器</title>
	<base target="_blank"/>
    <style>
		/*并集选择器, 选择 p 标签, h1 标签 以及 .red 类标签*/
		p, h1, .red {
			color: red;
		}
    </style>
</head>
<body>
	<p>p标签</p>
	<span>span标签</span>
	<div class="red">div标签 red类</div>
	<div>div标签</div>
	<h1>h1标签</h1>
</body>
</html>

执行效果 :

在这里插入图片描述





二、并集选择器与后代选择器示例




1、添加注释


CSS 中的注释 :

/* CSS 注释 */

HTML 中的注释 :

<!-- HTML 注释 -->

2、HTML 结构


下面使用 CSS 为该 HTML 结构添加样式 ;

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>并集选择器和后代选择器</title>
	<base target="_blank"/>
    <style>
		
    </style>
</head>
<body>
	<!-- 主导航栏 -->
	<div class="main">   
	  <ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">简介</a></li>
	  </ul>
	</div>
	<!-- 侧导航栏 -->
	<div class="register-login">    
	  <div class="register">注册</div>
	  <div class="login"><a href="#">登录</a></div>
	</div>
</body>
</html>

3、后代选择器 1


将上述网页中的 登录 链接 设置为 红色 , 使用后代选择器 ,

<div class="login"><a href="#">登录</a></div>

先使用 .login 类选择器 , 选择出指定的类标签 ,

然后使用 a 标签选择器, 选择 .login 类标签下的 a 标签 ;

/* 1. 登录设置为红色 */
.site-r login {
	color: red;
}

4、后代选择器 2


将 主导航 栏中的链接 设置为 蓝色 ;

<!-- 主导航栏 -->
<div class="main">   
  <ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">简介</a></li>
  </ul>
</div>

上述 主导航栏 的结构为 ,

最外层是 div 标签 , 类名是 main ,

第二层是 ul 标签 ,

第三层是 li 标签 ,

第四层是 a 链接标签 ,

因此使用后代选择器, 需要使用四层 选择器 进行选择 ;

/*2. 主导航栏 链接设置为蓝色  */
.main ul li a {
	color: blue;
}

5、并集选择器


将 主导航栏 和 侧导航栏 的文字都 设置成 20 像素 , 黑体 样式 ;

使用 并集选择器 , 若干 基础选择器之间 , 使用逗号隔开 ;

/*3. 主导航栏和侧导航栏 文字 设置 20 像素 黑体*/
.main, .register-login {
	font: 20px "黑体";
}

6、完整代码示例


<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>并集选择器和后代选择器</title>
	<base target="_blank"/>
    <style>
		/* 1. 后代选择器 登录设置为红色 */
		.login a {
			color: red;
		}
		/*2. 主导航栏 链接设置为蓝色  */
		.main ul li a {
			color: blue;
		}
		/*3. 主导航栏和侧导航栏 文字 设置 20 像素 黑体*/
		.main, .register-login {
			font: 20px "黑体";
		}
    </style>
</head>
<body>
	<!-- 主导航栏 -->
	<div class="main">   
	  <ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">简介</a></li>
	  </ul>
	</div>
	<!-- 侧导航栏 -->
	<div class="register-login">    
	  <div class="register">注册</div>
	  <div class="login"><a href="#">登录</a></div>
	</div>
</body>
</html>

7、显示效果


在这里插入图片描述

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

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

相关文章

【亲测】Centos7系统非管理(root)权限编译NCNN

前言 由于使用的是集群&#xff0c;自己不具有管理员权限&#xff0c;所以以下所有的情况均在非管理员权限下进行安装&#xff0c;即该安装策略仅适用于普通用户构建自己的环境。 什么是NCNN ncnn是一款非常高效易用的深度学习推理框架&#xff0c;支持各种神经网络模型&#x…

文件异步多备常用方案

业务需求上经常存在需要对同一个文件进行双上传&#xff0c;上传到不同云存储桶&#xff0c;以防出现某一个云厂商因各种意外导致自身服务出现不可用的情况&#xff0c;当然&#xff0c;还有其他措施可以避免&#xff0c;现在只针对通过程序业务代码而双写存储的这个场景。 业务…

Java分布式解决方案(三)

文章目录&#x1f525;MySQL事务-MySQL中锁的分类&#x1f525;MySQL事务-MySQL中的死锁问题&#x1f525;MySQL事务-MySQL中锁的分类 MySQL中锁的分类 从本质上讲&#xff0c;锁是一种协调多个进程或多个线程对某一资源的访问的机制&#xff0c;MySQL使用锁和MVCC机制实现了…

了解基本的html和javascript

用记事本编辑一个文本文件&#xff0c;代码如下&#xff0c; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>my name is bo</title> <script>alert(hello); </script> </head> <body>&…

实验2 设计模式实验1

实验内容: 1. 使用简单工厂模式设计一个可以创建不同几何形状(Shape)&#xff0c;例如圆形 (Circle)、矩形(Rectangle)和三角形(Triangle)等的绘图工具类&#xff0c;每个几何图形均具 有绘制方法draw()和擦除方法erase()&#xff0c;要求在绘制不支持的几何图形时&#xff…

Android 基础知识4-3.6 ToggleButton(开关按钮)Switch(开关)详解

一、ToggleButton(开关按钮) 1.1、简介 ToggleButton 类似开关有开和关两种状态&#xff0c;不同的状态下可以有不同的文本。 public class ToggleButton extends CompoundButton Displays checked/unchecked states as a button with a "light" indicator …

CNN基础

Tip&#xff1a;仅供自己学习记录&#xff0c;酌情参考 1. 前馈与反馈神经网络 神经网络有前馈神经网络和反馈神经网络&#xff0c;前向神经网络也就是前馈神经网络。 前馈型神经网络各神经元接收前一层的输入&#xff0c;并输出给下一层&#xff0c;没有反馈。节点分为两类…

nacos-sdk-rust binding to NodeJs

广告时间 nacos-sdk-rust-binding-node : nacos-sdk-rust binding to NodeJs with napi. Tip: nacos-sdk-nodejs 仓库暂未提供 2.x gRPC 交互模式&#xff0c;为了能升级它&#xff0c;故而通过 node addon 方式调用 nacos-sdk-rust npm 包 -> https://www.npmjs.com/packa…

Spring系列-8 AOP使用与原理

背景 按照软件重构的思想&#xff0c;当多个类中存在相同的代码时&#xff0c;需要提取公共部分来消除代码坏味道。Java的继承机制允许用户在纵向上通过提取公共方法或者公共部分(模版方法方式)至父类中以消除代码重复问题&#xff1b;日志、访问控制、性能监测等重复的非业务…

GO的IO接口和工具

GO的IO接口和工具 文章目录GO的IO接口和工具一、io包中接口的好处和优势1.1拷贝数据的函数二、 在io包中&#xff0c;io.Reader 的扩展接口和实现类型都有哪些2.1 io.Reader的扩展接口2.2 io.Reader接口的实现类型2.3 示例三、io包的接口&#xff0c;以及它们之间的关系3.1 读操…

Raki的读paper小记:Forget-free Continual Learning with Winning Subnetworks

Abstract&Introduction&Related Work 研究任务 用子网络做CL已有方法和相关工作 彩票假说&#xff08;LTH&#xff09;证明了稀疏子网络&#xff08;称为中奖彩票&#xff09;的存在&#xff0c;这些子网络保持了密集网络的性能&#xff0c;然而使用迭代修剪方法在持续…

Splunk 的一个Bug (Events from tracker.log have not been seen)

1:背景:Splunk version: 8.2.4 splunk 的一个alert: Events from tracker.log have not been seen for the last 47 seconds, which is more than the yellow threshold (45 seconds). This typically occurs when indexing or forwarding are falling behind or are blocked…

【15】linux命令每日分享——head命令查看文件

大家好&#xff0c;这里是sdust-vrlab&#xff0c;Linux是一种免费使用和自由传播的类UNIX操作系统&#xff0c;Linux的基本思想有两点&#xff1a;一切都是文件&#xff1b;每个文件都有确定的用途&#xff1b;linux涉及到IT行业的方方面面&#xff0c;在我们日常的学习中&…

德鲁特金属导电理论(Drude)

德鲁特模型的重要等式 首先我们建立德鲁特模型的重要等式 我们把原子对于电子的阻碍作用&#xff0c;用一个冲量近似表示出来 在式子 首先定义一个等效加速度 由于 我们可以得到电导率的微观表达式 在交流电环境中 电场的表达式 借鉴上一问的公式 我们可以列出这样的表达式…

1.5 全概率公式和贝叶斯公式

1.5.1 全概率公式在处理复杂事件的概率时&#xff0c;我们经常将这个复杂事件分解为若千个互不相容的较简单的事件之和&#xff0c;先求这些简单事件的概率&#xff0c;再利用有限可加性得到所求事件的概率,这种方法就是全概率公式的思想方法全概率公式是概率论中的一个非常重要…

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

文章目录一、子元素选择器1、语法说明2、代码分析3、代码示例二、交集选择器1、语法说明2、代码示例一、子元素选择器 1、语法说明 子元素选择器 可以选择 某个基础选择器 选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选…

【JAVA程序设计】(C00112)基于Springboot+Thymeleaf的在线购物商城——有文档

基于SpringbootThymeleaf的在线购物商城——有文档项目简介项目获取开发环境项目技术运行截图运行视频项目简介 基于Springbootthymeleaf框架的在线购物商城系统&#xff0c;本系统共分为二个角色&#xff1a;管理员和用户 管理员角色包含以下功能&#xff1a; 商品管理、商品…

DELL-Vostro-5468电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。硬件型号驱动情况主板DELL-Vostro-5468处理器Intel Core i3-7100U 2.40 GHz, 3M Cache已驱动内存Samsung 8GB DDR4-2133MHz已驱动硬盘TOPMORE CAPRICORNUS NVMe 1TB已驱动显卡Intel HD Graphics 620已驱动声卡Realtek ALC2…

Linux指令——文件与权限

一&#xff0c;文件目录管理命令 ls 命令描述&#xff1a; ls命令用于显示指定工作目录下的内容。 命令格式&#xff1a;ls [参数] [目录名]。 参数说明&#xff1a; 参数 说明 -a 显示所有文件及目录&#xff08;包括隐藏文件&#xff09; -l 将文件的权限、拥有者、…

详解七大排序算法

对于排序算法&#xff0c;是我们在数据结构阶段&#xff0c;必须要牢牢掌握的一门知识体系&#xff0c;但是&#xff0c;对于排序算法&#xff0c;里面涉及到的思路&#xff0c;代码……各种时间复杂度等&#xff0c;都需要我们&#xff0c;记在脑袋瓜里面&#xff01;&#xf…