011_CSS子元素选择器
1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素。
2. 选择子元素
2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的子元素, 请使用子元素选择器(Child selector)。
2.2. 例如, 如果您希望选择只作为h1元素子元素的strong元素, 可以这样写:
h1 > strong {color: red;
}
这个规则会把第一个h1下面的两个strong元素变为红色, 但是第二个h1中的strong不受影响:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
2.3. 例子
2.3.1. 代码
<!DOCTYPE html>
<html><head><title>CSS子元素选择器</title><meta charset="utf-8" /><style type="text/css">h1 > strong {color: red;}</style></head><body><h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1></body>
</html>
2.3.2. 效果图
3. 语法解释
3.1. 您应该已经注意到了, 子选择器使用了大于号(子结合符)。
3.2. 选择器h1 > strong可以解释为"选择作为h1元素子元素的所有strong元素"。
011_CSS子元素选择器相关推荐
- CSS复合选择器(后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器 后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
- css直接子元素怎么用,CSS 子元素选择器使用实例
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素. 子元素选择器使用大于号">"做为连接符. 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子 ...
- 【Google】【内部样式表】【外部样式表:听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录 实验1 1.题目 2.代码 3.网页运行效果 实验2 1.题目 2.代码 3 ...
- js后代选择器_后代选择器和子元素选择器的区别
原文 简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
- html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是 后代选择器 与 子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...
- HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器 交集选择器由两个选择器直接构成,其中第一个 ...
- 后代选择器与子元素选择器
1. 后代选择器:找到其后代,包括儿子孙子 曾孙等,改变属性 标签名称1 标签名称2{} 使用空格做连接符 2. 子元素选择器:找到其特定直接子元素改变属性 标签名称1>标签名称2{} ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
小程序中的WXSS(css)选择器课程-子元素选择器 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
- 后代子元素选择器交集并集选择器 4大复合选择器的区别
①后代选择器(重点) [空格隔开] 概念:后代选择器又叫包含选择器 为什么要用复合选择器?因为基础选择器不够强大,不能快速高效准确精细的完全页面style设置.复合选择器是两个或多个基础选择器组合而成 ...
最新文章
- [分类整理IV]微软等100题系列V0.1版:字符串+数组面试题集锦
- 前端调试工具Browser-sync(Windows)安装指南
- layui前端页面table表格怎么格式化转换时间_前端开发面经知识点总结
- 20171101从现在开始就请有计划的学习吧!
- Python:程序员在每天不同时间发微信消息给女友
- 软考信息安全工程师学习笔记三(1.3 信息安全管理基础)
- OpenShift4 - 使用 Service CA 证书增加内部通讯安全
- SAP自学指南:案例公司的管理难题
- matlab求微分方程精确解,matlab求微分方程精确解及近似解.ppt
- Linux系统的用途
- Zabbix 4.0监控PHP-Fpm Pools
- Atitit zxing二维码qr码识别解析
- 服务器 异常自动关机,服务器自动关机
- 计算机如何获取风扇转速,CPU风扇转速怎么看?
- 语言缩写c-a,各国语言缩写及语言代码查询
- Meta 开源首个 AI 语音翻译系统,闽南话和英语可以直接语音互译
- 【数据分析】数据分析在电商精准营销及效果评估中的应用
- java 循环依赖_Java详解之Spring Bean的循环依赖解决方案
- 如何使用SIGFOX技术连接物联网?
- 设计模式学习总结系列应用实例