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

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. JDBC简单增删改查实现(单表)

    0.准备工作 开发工具: MySQL数据库, intelliJ IDEA2017. 准备jar包: mysql-connector-java-5.1.28-bin.jar(其他均可) 1. 数据库数据 ...

  2. aria config

    aria2c --conf-path=aria2.conf mine: max-concurrent-downloads=5 continue=true max-overall-download-li ...

  3. Linux排查PHP-FPM进程过量常用命令

    命令如下: 查看每个PHP-FPM进程的内存占用:ps -ylC php-fpm –sort:rss 查看消耗内存最多的前 40 个进程:ps auxw|head -1;ps auxw|sort -r ...

  4. 因改漏洞而引申了解的Cookie机制！

    近期因为修改漏洞:Appscan扫描漏洞:加密会话(SSL)Cookie中缺少Secure属性,而涉及到Cookie有关的知识,现结合该漏洞的修复过程和了解的cookie知识总结一下. 一.加密会话( ...

  5. Android为TV端助力之：maxWidth设置无效

    android:maxWidth用过几次,之前有效,今天再用就无效了.其实是有两个注意点的,记录下: 1. android:adjustViewBounds="true" 2.an ...

  6. EF 批量增删改 EntityFramework.Extensions

    EntityFramework.Extensions 1.官方网站  http://entityframework-extensions.net/ 2 破解版  Z.EntityFramework.E ...

  7. mysql应用

    1.  简述 MySQL是开源的关系型数据库.官网:https://dev.mysql.com/. 2.  安装及应用 可通过https://dev.mysql.com/downloads/下载MyS ...

  8. CodeCombat第一关：KITHGARD地牢之KITHGARD精通

    https://www.cnblogs.com/OctoptusLian/p/7397602.html https://www.jianshu.com/p/065581a84879 https://w ...

  9. Maven之setting.xml 配置详解

    文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...

  10. 项目Alpha冲刺--9/10

    项目Alpha冲刺--9/10 作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Alpha冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合 ...