zoukankan      html  css  js  c++  java
  • CSS选择器 < ~ +

    1.>(子选择器)

    #a>p{   // 使用 > 号,让选择器选择id="a"的所有子类(直接子类)

    <div id="a">
        <p>11111111111111</p>
        <p>22222222222222</p>
        <div>
        <
    p>333333333</p>
      </
    div><!--该<p>在<div>中--> </div> <style> #a>p { background-color:Red; } </style>

    结果:

    2.+(相邻选择器)

    h1+p,选择紧接在另一个元素后的元素,而且二者有相同的父元素。只会选择第一个相邻的匹配元素

    <div id="a">
        <h1>11111111111111</h1>
        <p>22222222222222</p>
        <p>33333333333333</p><!--只会选择第一个相邻的匹配元素-->
        <div>
          <p>44444444444</p>
        </div>
    </div>
    
    h1+p
            {
                background-color:Red; 
                }

    结果:

    3.~(匹配选择器)

    #b~p,匹配所有在#b元素之后的同级p元素。

    <style>
    h1~p
            {
                background-color:Red; 
                }
    </style>
    
    
    <div id="a">
        <h1>11111111111111</h1>
        <p>22222222222222</p>
        <p>33333333333333</p>
        <div>
          <p>44444444444</p>
        </div>
    </div>

    所有相匹配的P元素都被选择到。

    结果:

  • 相关阅读:
    作业 第四 张垚
    软件测试课堂练习 张垚
    增删改查
    计算器 作业
    activity 张垚
    第四作业 张垚
    第六周作业
    jsp第四周作业
    jsp求1-100之间的素数和
    JSP第一次测试
  • 原文地址:https://www.cnblogs.com/zqzjs/p/4676138.html
Copyright © 2011-2022 走看看