CSS系列之后代选择器、子选择器和相邻兄弟选择器
- 后代选择器比子选择器的范围大，包含子选择器，且包含子选择器的“子孙”选择器，后代选择器使用"空格"符号间隔选择器
- 子选择器：子选择器只是父选择器的一级子元素，使用">"符号链接选择器
- 相邻兄弟选择器，是拥有相同父元素，且两个元素相邻，使用"+"符号链接
1. 后代选择器
- 比如如下html代码，em是h1的后代元素，如下css样式这样写，只会影响h1中的em标签的内容变为红色，不会影响p中em的内容
css：
h1 em {color:red;}
HTML：
<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
运行结果：
- h1 em的写法适用于h1中的的所有em，且不管em嵌套多少层都会适用
<h1>This is a <span><p><em>important</em></p></span> heading</h1>
运行结果：
2. 子选择器
下面设置h1的子元素strong标签的内容为红色
第二个h1中，因为strong的父元素不是h1，而是em，所以css中的设置不会对它起作用
css:
h1 > strong {color:red;}
HTML：
<!DOCTYPE HTML>
<html>
<head>
<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>
运行结果：
3. 相邻兄弟选择器
h1和p拥有相同的父元素body，相邻兄弟选择器需要紧挨着，只会适用于与h1相邻的p标签的内容
css:
h1 + p {margin-top:50px;}
HTML：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head> <body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
运行结果：
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素
所以h1+p只会对第一个p作用，再如下面的例子：
只会对两个列表的第二个及后面的li起作用，对第一个li不会起作用
css：
li + li {font-weight:bold;}
HTML：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head> <body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
运行结果：
例程来源：
CSS系列之后代选择器、子选择器和相邻兄弟选择器的更多相关文章
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
- css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器
1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...
- CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- 理解css相邻兄弟选择器
今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...
- CSS相邻兄弟选择器
相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...
- 04.CSS选择器-->相邻、通用兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用
1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...
随机推荐
- Java多线程并发同步执行
https://www.cnblogs.com/pengdai/p/12026959.html 并发关键字:volatile,final,synchronized Collections: 并发集合 ...
- MySQL路线
一 数据库简介与安装 二 库操作 三 表操作 四 数据操作 五 索引原理与慢查询优化 六 数据备份与慢查询优化 七 视图.触发器.事务.存储过程.函数
- 金融finaunce单词finaunce财经
金融(FINANCE或FINAUNCE)就是对现有资源进行重新整合之后,实现价值和利润的等效流通.(专业的说法是:实行从储蓄到投资的过程,狭义的可以理解为金融是动态的货币经济学.) 金融是人们在不确定 ...
- ipc$ 空连接 net use
常用命令 [xxx]表示的内容,需要根据自己的需求更改 //建立空连接 > net use \\127.0.0.1\ipc$ //删除连接 > net use \\127.0.0.1\ip ...
- Eclipse不支持tomcat8_compiler编译级别选不到1.8
-------------------------------------------------------------- Eclipse不支持tomcat8 如果你要使用tomcat8.0+版本的 ...
- IDEA整合SVN遇到的坑
1.安装SVN客户端 注意客户端版本与汉化插件的版本匹配问题,否则汉化无效 2.安装客户端时第二项默认不安装记得要手动选择为安装,否则不会生成svn.exe,这个文件会在IDEA中配置 3.安装客 ...
- MySQL MGR--数据同步原理
MGR复制架构 在MySQL 5.7.17版本正式推出组复制(MySQL Group Repliation MGR),用来解决异步复制和半同步复制可能产生数据不一致的问题,组复制依靠分布式一致性协议( ...
- 云计算与大数据实验：Hbase shell基本命令操作
[实验目的] 1)了解hbase服务 2)学会启动和停止服务 3)学会进入hbase shell环境 [实验原理] HBase是一个分布式的.面向列的开源数据库,它利用Hadoop HDFS作为其文件 ...
- 压缩及解压命令gzip、bzip2、tar
1. gzip 描述:压缩与解压缩 用法:gzip[选项]...[文件名称]... 选项:-d 解压 gzip hello.txt # 文件压缩后名为hello.txt.gz gzip -d ...
- 8、Python简单数据类型（int、float、complex、bool、str）
一.数据类型分类 1.按存值个数区分 单个值:数字,字符串 多个值(容器):列表,元组,字典,集合 2.按可变不可变区分 可变:列表[],字典{},集合{} 不可变:数字,字符串,元组().bool, ...