【教程】html+css零基础入门教程之后代选择器（二十九）

问题：我怎么才能收到你们公众号平台的推送文章呢？

答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。

01、后代选择器

后代选择器又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

如果您希望只对第一个 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中 。

02、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

根据上下文选择元素

如果您希望选择只作为 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>

03、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符

例子：

<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>

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

CSS3 兄弟选择符(E~F)

语法: E~F{ sRules }

表示: 选择E元素后面的所有兄弟元素F。

除了IE6不支持, 大部分浏览器都支持。

例子：

p~p{color:#f00;}

上面这个选择器只会把p后面的所有p都用红色标记，而第一个p不影响。

练习题

1、要p标签下strong标签字体加粗,正确的写法是?（）

A、p strong{font-weight:bold;}

B、p.strong{font-weight:bold;}

C、p>strong{font-weight:bold;}

2、要p标签下的子元素strong标签字体加粗,正确的写法是?（）

A、p strong{font-weight:bold;}

B、p.strong{font-weight:bold;}

C、p>strong{font-weight:bold;}

3、要选择div同级，且在div后面p标签字体颜色定义成红色,正确的写法是?（）

A、div>p{color:red;}

B、div.p{color:red;}

C、div p{color:red;}

D、div+p{color:red;}

相关文章

【教程】html+css零基础入门教程（一）

【教程】html+css零基础入门教程（二）

【教程】html+css零基础入门教程（三）

【教程】html+css零基础入门教程（四）

【教程】html+css零基础入门教程（五）

【教程】html+css零基础入门教程（六）

【教程】html+css零基础入门教程（七）

【教程】html+css零基础入门教程（八）

【教程】html+css零基础入门教程（九）

【教程】html+css零基础入门教程（十）

【教程】html+css零基础入门教程（十一）

【教程】html+css零基础入门教程（十二）

【教程】html+css零基础入门教程（十三）

【教程】html+css零基础入门教程（十四）

【教程】html+css零基础入门教程之CSS尺寸（十五）

【教程】html+css零基础入门教程之CSS边框（十七）

【教程】html+css零基础入门教程之CSS外边距（十八）

【教程】html+css零基础入门教程之CSS 外边距合并（十九）

【教程】html+css零基础入门教程之CSS 布局（二十）

【教程】html+css零基础入门教程之CSS 定位（二十一）

【教程】html+css零基础入门教程之CSS 相对定位（二十二）

【教程】html+css零基础入门教程之CSS 绝对定位（二十三）

【教程】html+css零基础入门教程之CSS 浮动（二十四）

【教程】html+css零基础入门教程之CSS选择器（二十五）

【教程】html+css零基础入门教程之类选择器详解（二十六）

【教程】html+css零基础入门教程之ID 选择器详解（二十七）

【教程】html+css零基础入门教程之属性选择器详解（二十八）