zoukankan      html  css  js  c++  java
  • div p、div>p、div+p、div~p、div.a 、p,span的用法和区别

    div p :将所有<div>标签里面的<p>标签选中(子标签和孙子辈标签)

    <style> 
      div span{color:red;}
    </style>
    
    <div>
      <p> 
         <span> Hello World! </span>
      </p>
      <span> Study Css </span>
    </div>
    上面的例子中所有的span都为红色

    div>p :将所有<div>标签的子标签<p>选中,不包括孙子辈标签。

    <style> 
                div>span{color:red;}
    </style>
    
    <div>
      <p> 
         <span> Hello World! </span>
      </p>
      <span> Study Css </span>
    </div>
    这个例子中只有Study Css是红色!

    div+p :将所有离<div>相邻的<p>标签选中

    <style>
                div + p{color: blue;}     /*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/
    </style>
    
    <div>hello</div>
    <p>world</p>
    
    这个例子中world字体是蓝色!

    div~p :将<div>后面所有的<p>标签选中

    <style>
               div~p{color: orange;}
    </style>
    
    <div>第一段</div>
    <p>p标签</p>
    <p>p标签</p>
    
    这个例子中所有p标签字体都是橙色!

    div.a :将<div>下class=a标签选中

        <style>
                  div.a{color: green}
        </style>
    
        <div class="a">hello world</div>
    
        这个例子中hello world字体是绿色!

    p,span :将p和span选中

    <style>
              p,span{color: green}
    </style>
    <p>驾驶、行驶</p>
    <span>记分查询</span>
    这个例子中p和span字体是绿色!
  • 相关阅读:
    js中const,var,let区别与用法
    poi excel 导出
    spring 实体类 date类型字段处理
    mysql 1449 : The user specified as a definer ('root'@'%') does not exist
    pjax学习
    上传文件 connection reset
    mysql连接问题
    Scala Actor Model
    Scala 隐式转换
    Scala Trait+Match+Case class+偏函数
  • 原文地址:https://www.cnblogs.com/zouhong/p/14220770.html
Copyright © 2011-2022 走看看