">"（大于号）CSS选择器是什么意思？

14 浏览
0 Comments

">"（大于号）CSS选择器是什么意思？

例如：\n

div > p.some_class {
  /* 一些声明 */
}

\n>符号究竟是什么意思？

0

3 答案

0 Comments

">"（大于号）CSS选择器是用于选择子元素的。你可以在这个链接中找到相关的信息：http://www.w3.org/TR/CSS2/selector.html#child-selectors。非常感谢提供的链接！我在那里还发现了“相邻兄弟选择器”的内容。

你可以在Sitepoint上找到浏览器支持的信息。如果你的项目需要考虑IE6的兼容性，那么这个选择器在IE6中不起作用，但在其他浏览器中都可以使用。这个资源对于选择兄弟元素、:nth-child()等功能的支持仍然不完整时非常有用。

0
0 Comments

> (greater-than sign) 是CSS选择器的一种组合器。组合器用于描述选择器之间的关系。CSS选择器可以包含多个简单选择器，而简单选择器之间可以使用组合器连接。CSS3中有四种不同的组合器，分别是后代选择器（空格）、子选择器（>）、相邻兄弟选择器（+）和通用兄弟选择器（~）。需要注意的是，<（小于号）在CSS选择器中无效。

一个例子是：









  
Paragraph 1 in the div.

  
Paragraph 2 in the div.

  
Paragraph 3 in the div.
 



Paragraph 4. Not in a div.


Paragraph 5. Not in a div.

输出结果如下图所示：

[![enter image description here](https://i.stack.imgur.com/rmrXI.png)](https://i.stack.imgur.com/rmrXI.png)

更多关于CSS组合器的信息，请参考以下链接：

- [CSS Combinators](http://www.w3schools.com/css/css_combinators.asp)

- [Combinators and multiple selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors)

感谢对父子关系CSS选择器的出色解释！但是，当遇到像`.entry-content > * { "代码" }`这样的代码，后面跟着`.entry-content { "其他代码" }`时，这是什么意思呢？难道`.entry-content > *`不包括`entry-content`的所有子元素吗？

0
0 Comments

">"（大于号）CSS选择器的作用是找到直接位于某个元素内部的子元素，而不包括后代元素。这意味着选择器"div > p.some_class"只会匹配直接位于

内部的带有类名为"some_class"的

元素，而不会匹配进一步嵌套的

元素。因此，所有匹配"div > p.some_class"的元素也一定符合"div p.some_class"这个选择器，这两者之间往往容易混淆。

使用示例代码进行说明：

div > p.some_class { 
    background: yellow;
}
div p.some_class { 
    color: red;
}



    
Some text here
   
    

        
More text here

哪些元素会被哪些选择器匹配到？

1. "div > p.some_class"和"div p.some_class"都匹配到的元素：

这个

元素直接位于

内部，因此建立了父子关系。由于"子元素"是"后代元素"的一种，根据定义，任何子元素也一定是后代元素。因此，这两个规则都会被应用到该元素上。

2. 只有"div p.some_class"匹配到的元素：

这个

元素位于

内部的

中，而不是直接位于

内部。虽然这个

元素是

的后代，但它不是子元素，而是孙子元素。因此，只有选择器中包含后代组合器的规则会被应用到该元素上。

以上就是">"（大于号）CSS选择器的作用以及产生的原因。

0