html关系选择符,关系选择符.html

关系选择符 | 拼命赶进度

data-level="2.2.5"

data-chapter-title="关系选择符"

data-filepath="关系选择符.md"

data-basepath="."

data-revision="Sun Sep 03 2017 23:30:11 GMT+0800 (中国标准时间)"

data-innerlanguage="">

• Introduction

• 1.

  HTML5

  • 1.1.

    常用元素

  • 1.2.

    图片音频视频

  • 1.3.

    列表及表格

  • 1.4.

    表单form元素

• 2.

  CSS

  • 2.1.

    如何引入CSS

  • 2.2.

    选择器

    • 2.2.1.

      通配选择符

    • 2.2.2.

      元素选择符

    • 2.2.3.

      id 及 class 选择符

    • 2.2.4.

      群组选择符

    • 2.2.5.

      关系选择符

    • 2.2.6.

      属性选择符

    • 2.2.7.

      伪类选择符

    • 2.2.8.

      伪对象选择符

  • 2.3.

    CSS的常用样式

    • 2.3.1.

      字体样式

    • 2.3.2.

      元素样式

    • 2.3.3.

      边框样式

    • 2.3.4.

      盒子模型

    • 2.3.5.

      段落样式

    • 2.3.6.

      背景样式

    • 2.3.7.

      列表样式

    • 2.3.8.

      变形样式

    • 2.3.9.

      过渡动画

    • 2.3.10.

      自定义动画

    • 2.3.11.

      布局

    • 2.3.12.

      视口

    • 2.3.13.

      CSS总结

• 3.

  JavaScript

• Published with GitBook

拼命赶进度

关系选择符

关系选择符一共有四个，分别为(空格) > + ~。注意：关系选择符必须包含在两个其它选择符之间。

E F包含选择符。选择所有被E元素包含的元素F。

<style>

.asd li{

color: red;

}

</style>

<ul class="asd">

<li>111

<ul>

<li>222</li>

</ul>

</li>

<li>333</li>

<li>444</li>

</ul>

E>F子选择符。选择所有作为E元素的子元素F。

<style>

.asd>li{

color: red;

}

</style>

<ul class="asd">

<li>111

<ul>

<li>222</li>

</ul>

</li>

<li>333</li>

<li>444</li>

</ul>

<li>444</li>

E+F相邻选择符。选择紧贴在E元素之后兄弟元素F。

<style>

.asd+li{

color: red;

}

</style>

<ul class="asd">

<li>111

<ul>

<li>222</li>

</ul>

</li>

<li>333</li>

<li>444</li>

</ul>

<li>444</li>

<li>444</li>

E~F兄弟选择符。选择E元素之后的所有兄弟元素F。

<style>

.asd~li{

color: red;

}

</style>

<ul class="asd">

<li>111</li>

</ul>

<li>444</li>

<li>444</li>

<ul>111</ul>

require(["gitbook"], function(gitbook) {

var config = {"expandable-chapters":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"ace":{},"mdinhtml":{},"highlight":{},"livereload":{}};

gitbook.start(config);

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史