什么>用CSS表示?

时间:2009-10-27 02:34:54

标签: css css-selectors

在IUI css文件中,它们使用以下选择器:

body > *:not(.toolbar)
body > *[selected="true"] 

>,*:not()和* []是什么意思?

感谢。

4 个答案:

答案 0 :(得分:23)

>表示“is a child element of”。因此body > *:not(.toolbar)*:not(.toolbar)的孩子body匹配。

*:not(.toolbar)匹配任何没有类.toolbar的元素。

*[selected="true"]匹配selected属性等于true的任何元素。

请注意,最后两个(*:not()*[]CSS3 spec的一部分,您通常不能依赖它们来实现跨浏览器的CSS兼容性。它们是,然而,完全支持WebKit,这是iPhone(以及iUI)使用的。

答案 1 :(得分:17)

  • >表示直接孩子
  • *是一个通用选择器(所有内容)
  • :not()表示除括号中的内容之外的任何内容
  • *[]表示与括号中的内容相匹配的任何内容

在你的情况下:

body > *:not(.toolbar)   // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"]    // means any element immediately under the body tag where the selected attribute is "true"

>*在CSS 2.1规范中定义。 {3}规范中定义了:not伪类和[]选择器。

有关详细信息,请参阅:http://www.w3.org/TR/CSS21/selector.htmlhttp://www.w3.org/TR/css3-selectors /。

答案 2 :(得分:2)

  

表示子元素

.cont > div {
    color: #fff;
}

这将是:

<div class="cont">
    <!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS 
         It only affects the below div. Not the p.
         so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
    <div>jabberwocky</div>
    <p>lorem ipsum</p>
</div>

答案 3 :(得分:1)

  • > - 子选择器

    即。

    div > p > b {
     font-size:100px;
    }
    

    这将选择b代码中p个代码内的所有div代码。

  • :not(..) - 不是选择器

    匹配页面上不符合not语句括号中条件的任何元素。即。

    div:not(.toolbar)
    

    将匹配任何没有类工具栏的div

  • [attr='val'] - 属性选择器

    匹配属性与指定值匹配的任何元素。例如,如果要将所有选中的复选框设置为红色。

    input[checkec='true'] {
      background-color:red;
    }
    

您应该使用Google CSS 2.1选择器获取更多信息。