Combinators

 

我们将要看到的最终选择器称为组合器,因为它们将其他选择器组合在一起,从而使它们彼此之间以及文档中内容的位置之间具有有用的关系.

Prerequisites: 基本的计算机知识, 已安装的基本软件使用文件的基本知识,HTML基础(研究HTML简介 )以及CSS的工作原理(研究CSS第一步) .
Objective: 了解可在CSS中使用的不同组合器选择器.

Descendant selector

在上一课中,您已经遇到过后代选择器-选择器之间有空格:

body article p

这些选择器选择的元素是其他选择器的后代. 他们不需要是直系子女即可配对.

在下面的示例中,我们仅匹配元素内部带有类.box<p>元素.

Child combinator

子组合器是一个大于号( > ),仅当选择器选择直接子元素时才匹配. 层次结构后面的后代不匹配. 例如,仅选择作为<article>元素的直接子元素的<p> <article>元素:

article > p

在下一个示例中,我们有一个有序列表,嵌套在其中的是另一个无序列表. 我正在使用子组合器来选择<li>元素,这些元素是<ul>的直接子元素,并为其赋予了顶部边框.

如果删除> ,指定这是一个孩子的组合子,你结束了后代选择和所有的<li>元素会得到一个红色边框.

Adjacent sibling

相邻的同级选择器( + )用于选择与层次结构中相同级别的另一个元素相邻的对象. 例如,要选择<img><p>元素之后的所有<img> <p>元素:

p + img

一个常见的用例是对标题后面的段落进行处理,如下面的示例所示. 在这里,我们正在寻找与<h1>直接相邻的段落,并设置其样式.

如果在<h1><p>之间插入其他元素,例如<h2> ,则会发现该段落不再与选择器匹配,因此当元素是相邻的.

General sibling

如果即使元素不直接相邻,也要选择它们的同级,则可以使用常规的同级组合器( ~ ). 要选择所有<img>经过来随时随地元素<p>元素,我们可以这样做:

p ~ img

在下面的示例中,我们选择了<h1>之后的所有<p>元素,即使文档中也有<div> ,其后的<p>也会被选中.

Using combinators

您可以将上一课中发现的所有选择器与组合器结合使用,以挑选出文档的一部分. 例如,如果我们要选择类别为" a"的列表项,它们是<ul>直接子代,则可以使用以下内容.

ul > li[class="a"]  {  }

但是,在创建用于选择文档中非常特定部分的选择器大列表时,请务必小心. 因为使选择器非常特定于标记中该元素的位置,将很难重用CSS规则.

通常最好创建一个简单的类并将其应用于所涉及的元素. 就是说,如果您需要访问文档中的某些内容并且无法访问HTML(可能是由于CMS生成的),则对组合器的了解将非常有用.

Test your skills!

我们在本文中介绍了很多内容,但是您能记住最重要的信息吗? 在继续进行之前,您可以找到一些其他测试来验证您是否保留了此信息—请参阅测试您的技能:选择器 .

Moving on

这是我们关于选择器的课程的最后一部分. 接下来,我们将继续介绍CSS的另一个重要部分-CSS Box Model .

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS