“;>"(大于号)CSS选择器的意思是什么?

例如:

div > p.some_class {
/* Some declarations */
}

>符号到底是什么意思?

243136 次浏览
小开

所有some_class类的p标记都是div标记的直接子标记。

小开

它将p元素与类some_class匹配，这些类是div下的直接。

小开
最佳答案

>是子选择符，有时被错误地称为直接子代组合子

这意味着选择器div > p.some_class只匹配.some_class中嵌套直接在和div的段落，而不匹配进一步嵌套的任何段落。这意味着每个匹配div > p.some_class的元素也必须匹配div p.some_class，带有后代选择符(空格)，所以这两者经常被混淆是可以理解的。

子组合子和子组合子的比较:

div > p.some_class {
background: yellow;
}


div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>

哪些元素由哪些选择器匹配?

    <李> < p > 由__ABC0和div p.some_class匹配
    这个p.some_class直接位于div中，因此在两个元素之间建立了父子关系。自“child"是“后代”的一种类型，任何子元素根据定义也是后代元素。

    .

    .

    . <李> < p > 仅由div p.some_class匹配
    这个p.some_class包含在div中的blockquote中，而不是div本身。虽然这个p.some_class是div的后代，但它不是子;这是一个孙子。因此，只应用选择器中包含子组合子的规则

1 许多人更进一步称其为“直系子女”。或者“直接子元素”，但这完全没有必要(而且对我来说非常烦人)，因为子元素根据定义是直接 ，所以它们的意思完全相同。没有所谓的“间接子女”。

小开

正如其他人提到的，它是一个子选择器。下面是相应的链接。

http://www.w3.org/TR/CSS2/selector.html#child-selectors

小开
超文本标记语言 
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will  NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be  of red color )</p>
</div>
css 
div > p.some_class{
color:red;
}

所有<p>和.some_class的直接子对象都会得到应用于它们的样式。

小开

(子选择器)在css2中被引入。 Div p{}选择Div元素的所有p个后代元素，而Div > p只选择子元素p个，而不是孙子元素、重子元素等等。< / p > 

<style>
div p{  color:red  }       /* match both p*/
div > p{  color:blue  }    /* match only first p*/


</style>


<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
要了解更多关于CSS Ce[lectors]及其使用的信息，请查看我的博客， css选择器和css3选择器

小开

>(大于号)是一个CSS组合子。

组合子解释了选择器之间的关系。

一个CSS选择器可以包含多个简单的选择器。在简单的选择器之间，我们可以包含一个组合子。

在CSS3中有四种不同的组合子:

  1. 后代选择器(空格)
  2. 子selector (>)
  3. 相邻兄弟选择器(+)
  4. 通用兄弟选择器(~)

注意: <在CSS选择器中无效。

enter image description here

例如:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>


<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>


<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>


</body>
</html>

输出:

enter image description here

更多关于CSS组合器的信息 . cn

小开

CSS中的大符号(>)选择器意味着右侧的选择器是左侧选择器的直接后代/子选择器。

一个例子:

article > p { }

意思是只设置文章后面的段落样式。


提交答案