zoukankan      html  css  js  c++  java
  • 兄弟选择器(+ 和 ~)

    转自http://blog.csdn.net/u014291497/article/details/50482874

    1. + 选择器

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

    <style type="text/css">
        h1 + p {
            margin-top:50px;
            color:red;
        }
    </style>
    
    
    <body>
    <p>This is paragraph.</p>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    

     效果如图:

    兄弟只会印象下面的p标签的样式,不影响上面兄弟的样式。
      注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。
      当然这个也会循环查找,即当两个兄弟元素相同时,会一次循环查找:
      示例:

    <style type="text/css">
        li + li {
            color:red;
        }
    </style>
    
    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
    </div>
    

     

    可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。

      2. ~ 选择器
      作用是查找某一个指定元素的后面的所有兄弟结点。
      示例代码:
      

    <style type="text/css">
        h1 ~ p{
            color:red;
        }
    </style>
    </head>
    <body>
        <p>1</p>
        <h1>2</h1>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </body>
    

     

  • 相关阅读:
    HDU 3547 DIY Cube
    POJ 2975 Nim
    POJ 1678 I Love this Game!
    POJ 2234 Matches Game
    POJ 3537 Crosses and Crosses
    POJ 3710 Christmas Game
    POJ 1704 Georgia and Bob
    HDU 3923 Invoker
    POJ 2154 Color
    PLM更新自定义CLASS
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/7059443.html
Copyright © 2011-2022 走看看