• 后代选择器比子选择器的范围大，包含子选择器，且包含子选择器的“子孙”选择器，后代选择器使用"空格"符号间隔选择器
  • 子选择器：子选择器只是父选择器的一级子元素，使用">"符号链接选择器
  • 相邻兄弟选择器，是拥有相同父元素，且两个元素相邻，使用"+"符号链接

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系列之后代选择器、子选择器和相邻兄弟选择器的更多相关文章

  1. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  2. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  3. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  4. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  5. CSS 相邻兄弟选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...

  6. 理解css相邻兄弟选择器

    今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...

  7. CSS相邻兄弟选择器

    相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...

  8. 04.CSS选择器-->相邻、通用兄弟选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

随机推荐

  1. python 1.使用djano前的提前准备：虚拟环境 virtualenv

    首先想要学习django我们就得了解一下虚拟环境,什么是虚拟环境?他有什么用? 1.首先虚拟环境就相当于一个一个的盒子,这个盒子里面安装的软件不会对其他的盒子造成任何影响. 2.如果你现在用Djang ...

  2. P1018 乘积最大(DP)

    题目 P1018 乘积最大 解析 区间DP 设\(f[i][j]\)表示选\(i\)个数,插入\(j\)个乘号时的最大值 设\(num[i][j]\)是\(s[i,j]\)里的数字 转移方程就是\(f ...

  3. 自学Python编程的第九天（希望有大牛帮我看看我第一个代码是否有弊端，感谢您们）----------来自苦逼的转行人

    2019-09-19-22:11:33 今天是自学Python的第九天 学的内容是有关文件操作的,如:r.w.a.rb.wb.ab.r+.w+.a+等 有大牛帮我看一下我的代码第一个有没有什么弊端吗? ...

  4. PHP基于TP5使用Websocket框架之GatewayWorker开发电商平台买家与卖家实时通讯

    前段时间公司提了一个新的需求,在商品的详情页要实现站内买家和商品卖家实时通讯的功能以方便沟通促成交易,要开发此功能当时首先考虑到的就是swoole和workerman了,从网上大概了解了一下关于这两款 ...

  5. js运算符及数据类型转换(二)

    1.一元运算符+.-[将其它类型转化为number类型,相当于调用了Number()函数]var num = +('hello')  NaN  typeof num->numbernum = + ...

  6. swiper-动态更改数据后轮播点击或拖动失效

    出现的问题: 1.swiper不能自动切换(设置了autoplay). 2.数据不匹配(需要加载的数据以改变,但是swiper里面的数据出现错误). 3.数据匹配过后,永远切换不到第一条数据. 4.根 ...

  7. Windows10简单启动项目添加方法

    1,cmd输入 shell:startup 打卡启动项文件夹 2,将需要启动执行的项目的快捷方式放入此文件夹 3,重新启动系统就可以知道效果了

  8. git 列出两个分支 或者两个提交版本之间不同的文件名字

    只列出名字 git diff remotes/origin/dev remotes/origin/master --name-only

  9. vsftp网络服务

    1. vsftp概述 FTP是File Transfer Protocol(文本传输协议)的简称,用于Internet上的文件的双向传输.使用FTP传输时,具有一定程度的危险性,因为数据在因特网上面是 ...

  10. jetbreains的crack方法

    https://zhile.io/2018/08/20/jetbrains-license-server-crack.html