zoukankan      html  css  js  c++  java
  • 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 元素的子元素。

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

     

  • 相关阅读:
    算法训练 表达式计算
    基础练习 十六进制转十进制
    基础练习 十六进制转十进制
    基础练习 十六进制转十进制
    New ways to verify that Multipath TCP works through your network
    TCP的拥塞控制 (Tahoe Reno NewReno SACK)
    Multipath TCP Port for Android 4.1.2
    How to enable ping response in windows 7?
    NS3
    Multipath TCP Port for Android
  • 原文地址:https://www.cnblogs.com/secying/p/2726298.html
Copyright © 2011-2022 走看看