first-child nth-child() :hover

最新推荐文章于 2024-07-14 18:10:31 发布

u014378108

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量408

点赞数 9

分类专栏： html css 文章标签：前端

本文链接：https://blog.csdn.net/u014378108/article/details/135089199

版权

css 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

    <div class="item">
    <dl>
        <dt>title1</dt>
        <dd>data</dd>
        <dd>data</dd>
        
    </dl>
    <dl>
        <dt>title2</dt>
        <dd>data</dd>
        <dd>data</dd>
    </dl>
    </div>

.item dl:first-child{

color:red;

}

==================

item 下的第一个子孙，且这个子孙是dl ,在这个元素下的dt color:red

.item dl:first-child dt{

color:red;

}

===========================

ul{
        list-style-type:none;
    }

  
<div class="item">
  <ul class="item">
    <li><a href="">A</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>
  </ul>
  <ul class="item">
    <li><a href="">AA</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>
  </ul>
  <ul class="item">
    <li><a href="">AAA</a></li>
    <li><a href="">bbb</a></li>
    <li><a href="">ccc</a></li>
  </ul>
    </div>

.item ul:first-child li{

background-color: red;

}

=========================

.item ul li:first-child{

background-color: red;

}

ul 下的第一个孩子&li

=======================

.item ul li:first-child a{

background-color: red;

}

ul 下的第一个孩子且是li元素下的a

==========================

所有item下的第一个孩子且是ul，下的第一个孩子且是li 的背景色

.item ul:first-child li:first-child{

background-color: red;

}

对比，ul 的第一个孩子不是li元素

=====================hover

li hover状态下的a字体变红色

.item ul li:hover a{

color:red;

}

=======nth-child()

偶数的li 背景red

2n:偶数

2n+1 2n-1 奇数

.item ul li:nth-child(2n){

background-color: red;

}

=========firth-child nth-child 结合

.item ul:first-child li:nth-child(2n){

background-color: red;

}

==============

 

<style>
    ul{
        list-style-type:none;
    }
    .item ul li:hover a {
    background-color: red;
}
    .sec-memu{
        display:none;
    }
    .item ul li:hover .sec-memu{
        background-color: #ccc;
        display: block;
    }
</style>








  <ul class="item">
    <li><a href="">A</a>
        <div class="sec-memu" >aaaaa</div>
    </li>
    <li><a href="">b</a>
        <div class="sec-memu">bbbb</div>
    </li>
    <li><a href="">c</a>
        <div class="sec-memu" >ccccc</div></li>
  </ul>

鼠标移动到li的时候，显示该hover元素下的 .sec-memu

=========上面的demo 调整样式

<style>
    ul{
        list-style-type:none;
        padding:0;

    }
    .item{
        position: relative;
    }
    .item ul li:hover a {
    background-color: red;
    }
    .sec-memu{
        display:none;
        position:absolute;
        width: 200px;
        height: 200px;
        top: 0;
        left:30px;
        background-color: #ccc;

    }
    .item ul li:hover .sec-memu{
        background-color: #ccc;
        display: block;
    }
</style>
<body>
    <div class="item">
  <ul class="item">
    <li><a href="">A</a>
        <div class="sec-memu" >aaaaa</div>
    </li>
    <li><a href="">b</a>
        <div class="sec-memu">bbbb</div>
    </li>
    <li><a href="">c</a>
        <div class="sec-memu" >ccccc</div></li>
  </ul>
  
    </div>
</body>

u014378108

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
first-child nth-child() :hover

item 下的第一个子孙，且这个子孙是dl ,在这个元素下的dt color:red。所有item下的第一个孩子且是ul，下的第一个孩子且是li 的背景色。=========firth-child nth-child 结合。鼠标移动到li的时候，显示该hover元素下的 .sec-memu。ul 下的第一个孩子且是li元素下的a。=========上面的demo 调整样式。对比，ul 的第一个孩子不是li元素。ul 下的第一个孩子&li。2n+1 2n-1 奇数。
复制链接

扫一扫