Day14_学点CSS_高级选择器Demo

news/2024/5/18 9:33:02/文章来源:https://blog.csdn.net/Mr_Tang4/article/details/137226976

1 后代选择器s1 s2

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/29 下午3:46 ~ 2024/3/29 下午3:47~ Modified date: 2024/3/29 下午3:47--><!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Cssl.html</title><style type="text/css">/* 后代选择器 */.div1 p {color : red;}.div2 p {color : green;}</style>
</head>
<body><div class="div1"><h1>我不是div1 p</h1><p>段落</p><ul><li><p>段落</p></li><li><p>段落</p></li><li><p>段落</p></li><li><p>段落</p></li></ul></div><hr /><div class="div2"><h1>我不是div2 p</h1><ul><li><p>段落</p></li><li><p>段落</p></li><li><p>段落</p></li><li><p>段落</p></li></ul></div>
</body>
</html>

在这里插入图片描述

2 并集选择器(选择器组)s1,s2

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/29 下午3:49~ Modified date: 2024/3/29 下午3:49--><!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>selector_并集选择器.html</title><style type="text/css">/* 并集选择器 */h3,p{color: red;}</style></head><body><h3>我是一个h3啊</h3><h2>我是一个h2啊</h2><h3>我是一个h3啊</h3><p>我是一个段落啊</p><p>我是一个段落啊</p></body>
</html>

在这里插入图片描述

3 交集选择器s1.s2

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Cssl.html</title><style type="text/css">/* 交集选择器 */h3.color_red{color:red;}</style>
</head>
<body><h3>我是一个h3 没有class</h3><h3>我是一个h3 没有class</h3><h3 class="color_red">我是一个h3 class="color_red"</h3>
</body>
</html>

在这里插入图片描述

4 儿子选择器s1>s2

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/29 下午3:51 ~ 2024/3/29 下午3:53~ Modified date: 2024/3/29 下午3:53--><!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>selector6_儿子选择器.html</title><style type="text/css">/* 儿子选择器 *//* div的儿子p(直接儿子)。和div的后代p的截然不同。 */div>p{color: red;} </style>
</head><body><div><p>我是div的儿子</p></div><div><ul>为什么在这里写也不管用 因为不是p标签<li><p>我是div的重孙子</p></li><li><p>我是div的重孙子</p></li><li><p>我是div的重孙子</p></li></ul><p>我也是div的儿子</p></div></body>
</html>

在这里插入图片描述

5 序列选择器

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/29 下午3:54~ Modified date: 2024/1/25 上午9:56--><!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>selector6_儿子选择器.html</title>
<style type="text/css">
</style>
<style type="text/css">ul li:first-child {color: red;}ul li:last-child {color : yellow;}.fist {color : red;}.last {color : yellow;}
</style>
</head><body><ul><li class="first">项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li class="last">项目</li></ul>
</body>
</html>

在这里插入图片描述

6 下一兄弟选择器s1+s2

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/4/1 上午11:54~ Modified date: 2024/4/1 上午11:54--><!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>selector6_儿子选择器.html</title>
<style type="text/css">
</style>
<style type="text/css">/* 下一兄弟选择器 *//* 选择上的是h3元素后面紧挨着的第一个兄弟。 */h3+p{color: red;} 
</style>
</head><body><h3>我是一个标题</h3><p>我是一个段落，也是h3的第一个兄弟</p><p>我是一个段落，也是h3的第二个兄弟</p><p>我是一个段落，也是h3的第三个兄弟</p><h3>我是一个标题</h3><p>我是一个段落，也是h3的第一个兄弟</p><p>我是一个段落，也是h3的第二个兄弟</p><p>我是一个段落，也是h3的第三个兄弟</p><h3>我是一个标题</h3><p>我是一个段落，也是h3的第一个兄弟</p><p>我是一个段落，也是h3的第二个兄弟</p><p>我是一个段落，也是h3的第三个兄弟</p><h3>我是一个标题</h3>
</body>
</html>

在这里插入图片描述

7 属性选择器input[type="text"]

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>input[type="text"]{background-color: red;}input[type="password"]{background-color: blue;}</style></head><body>用户名：<input type="text"/><br/>密码：<input type="password"/></body>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言 | Leetcode C语言题解之3题无重复字符的最长子串

C语言 | Leetcode C语言题解之3题无重复字符的最长子串

题目&#xff1a; 题解&#xff1a; int lengthOfLongestSubstring(char * s) {//类似于hash的思想//滑动窗口维护int left 0;int right 0;int max 0;int i,j;int len strlen(s);int haveSameChar 0;for(i 0; i < len ; i ){if(left < right){ //检测是否出现重…
阅读更多...
OpenHarmony实战开发-图案密码锁组件的使用

OpenHarmony实战开发-图案密码锁组件的使用

介绍 本示例展示了图案密码锁组件的使用&#xff0c;实现了密码设置、验证和重置功能。 图案密码锁组件&#xff1a;以宫格图案的方式输入密码&#xff0c;用于密码验证。手指触碰图案密码锁时开始进入输入状态&#xff0c;手指离开屏幕时结束输入状态并向应用返回输入的密码…
阅读更多...
STM32学习和实践笔记（4）: 分析和理解GPIO_InitTypeDef GPIO_InitStructure (b)

STM32学习和实践笔记（4）: 分析和理解GPIO_InitTypeDef GPIO_InitStructure (b)

继续上篇博文&#xff1a;STM32学习和实践笔记&#xff08;4&#xff09;: 分析和理解GPIO_InitTypeDef GPIO_InitStructure (a)-CSDN博客 往下写&#xff0c; 为什么&#xff1a;当GPIO_InitStructure.GPIO_PinGPIO_Pin_0 ; 时&#xff0c;其实就是将对应的该引脚的寄存器地…
阅读更多...
docker--部署 （超详版） （五）

docker--部署 （超详版） （五）

环境准备&#xff1a;docker&#xff0c;mysql&#xff0c;redis&#xff0c;镜像&#xff0c;nginx 把虚拟机打开&#xff0c;连接xshell&#xff0c;参考博客&#xff1a; https://blog.csdn.net/m0_74229802/article/details/136965820?spm1001.2014.3001.5501 一&#x…
阅读更多...
HCIP作业4

HCIP作业4

实验步骤&#xff1a; 第一步 给PC1和PC2和PC3配地址 第二步给R1到R5配置接口IP地址 [R1]int g0/0/0 [R1-GigabitEthernet0/0/0]ip ad 192.168.1.254 24 R1&#xff1a;[R1-GigabitEthernet0/0/0]int s4/0/0 [R1-Serial4/0/0]ip ad 15.1.1.1 24 [R1-Serial4/0/0]dis ip in…
阅读更多...
Flutter 开发学习笔记(0):环境配置

Flutter 开发学习笔记(0):环境配置

文章目录 前言开发需求环境配置运行出现问题我运行也是解决了很久的问题镜像源设置为清华的镜像源&#xff08;不知道有没有影响&#xff09;使用JDK17&#xff0c;测试过JDK21和JDK11都不行手动下载flutter 对应的gradle添加阿里云代理安卓编译下载 运行成功&#xff01; 前言…
阅读更多...
基于Springboot的一站式家装服务管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的一站式家装服务管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的一站式家装服务管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体…
阅读更多...
2024年MathorCup数学建模思路A题B题C题D题思路分享

2024年MathorCup数学建模思路A题B题C题D题思路分享

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…
阅读更多...
css设置文字铺满盒子

css设置文字铺满盒子

<div>收货人</div>&#xff1a; <div>电话</div>&#xff1a; <div>省市区</div>&#xff1a; width: 100rpx;border: 1px solid rebeccapurple;display: inline-block;text-align-last: justify;
阅读更多...
构建安全高效的用户登录系统：登录流程设计与Token验证详解

构建安全高效的用户登录系统：登录流程设计与Token验证详解

在当今数字化时代&#xff0c;用户登录系统是几乎所有在线服务的基础。然而&#xff0c;随着网络安全威胁的不断增加&#xff0c;设计一个安全可靠的登录系统变得至关重要。本文将深入探讨用户登录流程的设计原则以及Token验证的实现方式&#xff0c;带您了解如何构建安全高效的…
阅读更多...
网络安全新视角：数据可视化的力量

网络安全新视角：数据可视化的力量

在当今数字化时代&#xff0c;网络安全已成为各大企业乃至国家安全的重要组成部分。随着网络攻击的日益复杂和隐蔽&#xff0c;传统的网络安全防护措施已难以满足需求&#xff0c;急需新型的解决方案以增强网络防护能力。数据可视化技术&#xff0c;作为一种将复杂数据转换为图…
阅读更多...
代码+视频，手动绘制logistic回归预测模型校准曲线（Calibration curve）（1）

代码+视频，手动绘制logistic回归预测模型校准曲线（Calibration curve）（1）

校准曲线图表示的是预测值和实际值的差距&#xff0c;作为预测模型的重要部分&#xff0c;目前很多函数能绘制校准曲线。 一般分为两种&#xff0c;一种是通过Hosmer-Lemeshow检验&#xff0c;把P值分为10等分&#xff0c;求出每等分的预测值和实际值的差距. 另外一种是calibra…
阅读更多...
基于Websocket的局域网聊天系统

基于Websocket的局域网聊天系统

1.1 研究背景及意义 本项目所对应领域的研究背景及意义[1]。新冠肺炎局域网通信发生以来&#xff0c;大数据、云计算、人工智能等新一代信息技术加速与交通、局域网通信、教育、金融等领域深度融合&#xff0c;让局域网通信防控的组织和执行更加高效&#xff0c;成为战“疫”的…
阅读更多...
【三】EMQX 手动创建集群

【三】EMQX 手动创建集群

EMQX 手动创建集群 简介 因为项目中使用到了emqx中间件&#xff0c;所以近期对中间件进行了进一步的研究&#xff0c;每次选用中间件我都会考虑可用性方案&#xff0c;如下是本地实践的记录。 一、部署 1、创建一个 Docker 网络&#xff0c;用于节点间通信。处于同一网络下的…
阅读更多...
STM32F103通过labview上位机上传温湿度数据到OneNET物联网平台

STM32F103通过labview上位机上传温湿度数据到OneNET物联网平台

资料下载地址&#xff1a;STM32F103通过labview上位机上传温湿度数据到OneNET物联网平台 本实验通过两个STM32单片机设备分别测量室内外的温湿度&#xff0c;并把数据发送到上位机上传到ONENET物联网平台。 大体数据传输流程如下&#xff1a; 首先是注册OneNET平台账号&#…
阅读更多...
【面试题】RocketMQ怎么处理消息积压？

【面试题】RocketMQ怎么处理消息积压？

如图,消息积压主要是因为&#xff0c;消费能力不足&#xff1a; 在RocketMQ中&#xff0c;处理消息积压的方法可以采取以下几种策略&#xff1a; 增加消费者数量&#xff1a;可以通过增加消费者数量来提高消息的消费速度。通过增加消费者实例或者消费者组的数量&#xff0c;可…
阅读更多...
新网站秒收录技术,新网站百度收录时间

新网站秒收录技术,新网站百度收录时间

在建立新网站后&#xff0c;让它尽快被搜索引擎收录是网站主最为关注的事情之一。百度作为中国最大的搜索引擎&#xff0c;网站被其快速收录对于增加曝光和流量至关重要。本文将介绍一些新网站秒收录技术&#xff0c;以及一般情况下新网站被百度收录需要的时间。 新网站秒收录技…
阅读更多...
Android视角看鸿蒙第十课-鸿蒙的布局之线性布局

Android视角看鸿蒙第十课-鸿蒙的布局之线性布局

Android视角看鸿蒙第十课-鸿蒙的布局之线性布局 导读 这篇文章开始&#xff0c;依次学习鸿蒙的八大布局&#xff0c;这是第一篇&#xff0c;所以顺带也会聊聊通用属性。 文档地址 文档地址 如何定义一个线性布局 Android中是使用LinearLayout来构建线性布局的&#xff0c…
阅读更多...
Swift 从获取所有 NSObject 对象聊起：ObjC、汇编语言以及底层方法调用链（五）

Swift 从获取所有 NSObject 对象聊起：ObjC、汇编语言以及底层方法调用链（五）

概览 我们在上一篇 Swift 从获取所有 NSObject 对象聊起：ObjC、汇编语言以及底层方法调用链（四）博文中“一头扎入”系统底层，从汇编语言的角度详细介绍了 iOS 运行时（Runtime）方法调用栈的跟踪、以及如何恣意更改方法调用链走向等理论知识。 “纸上来得终觉浅，绝知此…
阅读更多...
C++多态的一些理解

C++多态的一些理解

C多态的一些理解 多态的概念 什么是多态&#xff1f;多态是C的三大特性之一。简单来说就是用一种接口&#xff08;函数&#xff09;来实现多种不同的功能。当我们调用同一个函数的时候&#xff0c;根据业务需要&#xff0c;会执行不同的功能&#xff0c;产生不同的效果。 为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业