【Css】Css有关html“伪类选择器”的语法合集（示例）

最新推荐文章于 2023-06-29 17:29:19 发布

敦厚的曹操

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量312

点赞数

分类专栏： 5.【css】 4.【html】文章标签： CSS选择器 li元素颜色设定交互设计弹出菜单

本文链接：https://blog.csdn.net/dxnn520/article/details/122182606

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 对父元素ul下面的所有li元素选择设定 */

    ul.num > li {
      color: blue;
    }

    /* 对父元素ul下面的class=a1的li元素选择设定 */
    .num > li.a1 {
      color: rgb(202, 104, 29);
    }

    /* 对父元素ul下面的第一个li元素选择设定 */
    .num > li:first-child {
      color: rgb(10, 172, 32);
    }

    /* 对父元素ul下面的最后一个li元素选择设定 */
    .num > li:last-child {
      color: rgb(226, 18, 192);
    }

    /* 对父元素ul下面的第N个li元素选择设定 */
    .num > li:nth-child(2) {
      color: rgb(16, 198, 211);
    }
    /*偶数*/
    .num > li:nth-child(2n) {
      color: rgb(16, 198, 211);
    }

    /*奇数*/
    .num > li:nth-child(2n + 1) {
      color: rgb(174, 182, 14);
    }

    /* 同类（只在）li元素中选择，忽略之前的div */
    .num > li:nth-of-type(2) {
      color: rgb(84, 80, 83);
    }
    /* 排除某li元素伪类，也就是除了第二个li，其他的都按这个设定 */

    ul > li:not(:nth-child(2)) {
      color: rgb(230, 102, 198);
    }
  </style>

  <body>
    <ul class="num">
      <div>aaa</div>
      <li class="a1">第一名</li>
      <li>第二名</li>
      <li>第三名</li>
      <li>第四名</li>
      <li>第五名</li>
    </ul>
  </body>
</html>

二、设置下一个紧挨着的DIV的CSS样式，弹出菜单示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    body {
        background-color: rgb(223, 223, 223);
    }

    .word {
        font-size: 15px;
        text-align: left;
        height: 30px;
        background-color: blanchedalmond;
        padding-left: 20px;
        line-height: 31px;
    }

    .city {
        width: 50px;
        background-color: rgb(233, 203, 158);
        padding-left: 20px;
    }

    .city:hover {
        background-color: white;
    }

    /*  城市div下一个紧挨着的DIV中，CSS设置为显示  */
    .city:hover + .list {
        display: block;
    }

    /* 城市列表*/
    .list {
        background-color: rgb(255, 255, 255);
        width: 300px;
        margin-top: -15px;
        display: none;
        /* 默认隐藏 */
    }

    /* 鼠标移入，不消失 */

    .list:hover {
        display: block;

    }
</style>

<body>
    <div class="word">
        <div class="city">
            北京
        </div>
        <div class="list">
            <ul>
                <li><a href="baidu">河北</a></li>
                <li><a>河南</a></li>
                <li><a>北京</a></li>
                <li><a>天津</a></li>
            </ul>
        </div>
    </div>

    <!-- <div>----------------------------</div> -->


</body>

</html>

敦厚的曹操

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Css】Css有关html“伪类选择器”的语法合集（示例）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫