学习HTML与CSS的第四天————兄弟选择器、否定伪类

最新推荐文章于 2024-10-02 13:25:04 发布

不爱学习的大头

最新推荐文章于 2024-10-02 13:25:04 发布

阅读量114

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104504659

版权

兄弟选择器

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>兄弟元素选择器</title>
      <style type="text/css">
        /* 
        *  为span后的一个p元素设置一个背景颜色为黄色
        *  后一个兄弟元素选择器
        *    作用：可以选中一个元素后紧挨着的指定的兄弟元素
        *    语法：前一个+后一个
       */
      /*  span+p{
         background-color: yellow;
         width: 110px;
       } */
       /*
       *    选中后边所有兄弟元素
       *     语法：前一个~后边所有
        */
        span~p{
          background-color: yellow;
        }
      </style>
    </head>
    <body>

      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
      <span>我是一个span</span>
      
       <p>我是一个p标签</p>
      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
    </body>
</html>

否定伪类

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>兄弟元素选择器</title>
      <style type="text/css"> 
      /* 
      *     为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
      *     
      *      否定伪类：
      *          作用：可以从已选中的元素中剔除某些元素
      *          语法：
      *               :not()
      */
      p:not(.hello){
        background-color: yellow;
      }
      </style>
    </head>
    <body>

      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
      <p class="hello">我是一个p标签</p>
      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
      <p>我是一个p标签</p>
    </body>
</html>