• 20121016学习笔记三


    刚刚学习CSS中的后代选择器,啥子事后代选择器哦,看不明白。。。

    网站上资料说明,后代选择器又叫做包含选择器。

    语法解释

    在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。

    因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。

    有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。

    与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

    选择子元素

    如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

    例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

    h1 > strong {color:red;}

    这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:

    <h1>This is <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

    语法解释

    您应该已经注意到了,子选择器使用了大于号(子结合符)。

    子结合符两边可以有空白符,这是可选的。因此,以下写法都没有问题:

    h1 > strong
    h1> strong
    h1 >strong
    h1>strong
    

    如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

    结合后代选择器和子选择器

    请看下面这个选择器:

    table.company td > p

    上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

    选择相邻兄弟

    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

    例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

    h1 + p {margin-top:50px;}

    这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

    语法解释

    相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。

    注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。

    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ol>
    </div>

    在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

    请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:

    li + li {font-weight:bold;}

    上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

    结合其他选择器

    相邻兄弟结合符还可以结合其他结合符:

    html > body table + ul {margin-top:20px;}

    这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

    总结出来结合选择器的运用很陌生,看到代码一下子也很难描述是给哪个元素指定样式。先了解,实际运用中多练习加深记忆。

     

  • 相关阅读:
    [THREEJS]坐标高精度问题
    纹理的寻址方式
    [1009]JS语言精髓与编程实践笔记1
    万向锁
    (转)primitive restarting
    西藏游记
    平衡二叉树(AVL tree)
    初探redis事务
    redis发布与订阅
    初探redis分布式锁
  • 原文地址:https://www.cnblogs.com/secying/p/2726298.html
Copyright © 2020-2023  润新知