时间戳

首页 > 解决方案 > 了解“空格键”和 > 选择元素之间的区别

css - 了解“空格键”和 > 选择元素之间的区别

问题描述

所以我必须阅读我正在做的一个项目的以下几行，另一个人写了以下内容

> inner > .button-container inner {
     background: radial-gradient(circle, rgba(255,255,255, 0.2), transparent);
}

（我没有添加html代码，因为它是由程序生成的，很纠结，我什至无法完全理解）

所以根据我从 w3schools vs ">" 的笔记，意思如下

  * +-----------------------------------------------------------------------------------------------------------+
  * |CSS Selectors                                                                                              |
  * +-----------------------------------------------------------------------------------------------------------|
  * |Selector             |Example             |Example Description                                             |
  * +----  ---------------+--------------------+----------------------------------------------+-----------------|
  * |.class1 .class2      |.name1 .name2       |all elements with name2 that is a descendant of an element      |
  * |                     |                    |                                               with name1       |
  * |element>element      |div > p             |all <p> elements where te parent is a <div> element             |
  * +-----------------------------------------------------------------------------------------------------------+

然后我会将此语法理解为 Select all the elements that: 对应于标签 html inner ，它们是类 .button-container 的后代，它们是 html 标签内部的后代

但是我看不出像这样选择它们或这样做之间有什么区别

inner > .button-container > inner {};
inner .button.container inner {};

以及这两个选择器可能的所有组合。

谁能正确解释这种语法？

标签： csscss-selectors

解决方案

推荐阅读