zoukankan      html  css  js  c++  java
  • CSS中的 , > + ~

    1、群组选择器(',')

    /* 表示既h1,又h2 */
    h1, h2 {
      color: red;
    }

    2、后代选择器(空格)

    /* 表示 h1 下面的所有 span 元素,不管是否以 h1 为直接父元素 */
    h1 span {}

    3、子元素选择器('>')

    选择直接子元素

    /* 表示 h1 下面的所有以 h1 为直接父元素的 span 元素,注意必须以 h1 为直接父元素 */
    h1 > span {
    
    }

    示例:下面第一个h1的两个strong元素是红色,第二个h1的strong元素将不变色

    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
    h1 > strong {color:red;}

    4、相邻兄弟选择器('+')

    选择紧接在另一个元素后的元素,而且二者有相同的父元素。

     <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>

     5、兄弟选择器('~')

    选择在某元素之后的所有兄弟元素,不一定要紧跟在后面,但必须得是相同父元素,即必须是同一级元素。

    /* A之后的所有B元素,不一定要紧跟在A后面、相同父元素 */
    A ~ B{
        
    }
  • 相关阅读:
    PAT1038
    PAT1034
    PAT1033
    PAT1021
    PAT1030
    PAT1026
    PAT1063
    PAT1064
    PAT1053
    PAT1025
  • 原文地址:https://www.cnblogs.com/wenxuehai/p/11449430.html
Copyright © 2011-2022 走看看