层次选择器+结构伪类选择器

最新推荐文章于 2023-12-10 11:43:52 发布

Paranoid_truggle

最新推荐文章于 2023-12-10 11:43:52 发布

阅读量101

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Paranoid_truggle/article/details/119079697

版权

层次选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*后代选择器*/
    body p{
      color:red;
    }
    /*子选择器 一代 儿子*/
    body>p{
      background: #ff5777;
    }
    /*相邻兄弟选择器 紧挨着的一个，对下不对上*/
    .active + p{
      background: #2c3e50;
    }
    /*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/
    .active~p{

    }
  </style>
</head>
<body>
<!--层次选择器
      1.后代选择器 在某个元素的后面
      2.子选择器
      3.相邻兄弟选择器
      4.通用选择器
  -->
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p6</p>
  </li>
  <li>
    <p>p7</p>
  </li>
  <li>
    <p>p5</p>
  </li>
</ul>
</body>

伪类结构选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*结构伪类选择器*/
    /*ul的第一个元素*/
      ul li:first-child{
        background: forestgreen;
      }
    /*ul的最后一个子元素*/
      ul li:last-child{
        background: #42b983;
      }
  /*    选中p1： 定位到父元素，选择当前的第一个元素
        选中当前p元素的父级元素，选中父级元素的第一个，
  */
      p:nth-child(2){
        background: #666666;
      }
  </style>
</head>
<body>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
</body>

Paranoid_truggle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层次选择器+结构伪类选择器

层次选择器<head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ body p{ color:red; } /*子选择器一代儿子*/ body>p{ background: #ff5777; } /*相邻兄弟选择器紧挨着的一个，对下不对上*/ .a
复制链接

扫一扫