CSS选择器

最新推荐文章于 2024-10-06 15:38:21 发布

toptap8_nn

最新推荐文章于 2024-10-06 15:38:21 发布

阅读量67

点赞数

分类专栏： web前端文章标签： css html5 html 关系选择器前端

本文链接：https://blog.csdn.net/u011713916/article/details/119939155

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

标签选择器

选择p标签，对p标签添加样式

<!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>
    <style>
        p{
            color: darkorchid;
        }
    </style>
</head>i
<body> 
    <p>
        hello world
    </p>
</body>
</html>

id选择器（不能重复使用，标签id固定唯一）

<!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>

    <style>
        #myid {
            color: deeppink;
        }
    </style>
</head>
<body>
    <p id="myid">id</p>
    
</body>
</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">
    <title>Document</title>
    <style>
        /* 类选择器 */
        .lab{
            color: blue;
        }
        .mybg{
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <p class="lab"> 你好，我是您跌 </p>
    <p class="mybg lab">我给你邦邦两拳 </p>
</body>
</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">
    <title>Document</title>
    <style>
        div{
            width: 100px ;
            height: 100px;
            background-color: pink;
        }
        
        /* 伪类选择器就是给其他选择器添加效果，表现形式就是选择器后面再加上冒号与伪类的名字 */
        div:hover{
            width: auto;
            height: auto;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div>哈哈我喜欢你</div>
</body>
</html>

层级选择器（按照标签的父子关系选择）

<!DOCTYPE html>
<html lang="zh">
<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>
    <style>
        div div{
            color:green;
        }
        div .box{
            color: deeppink;
        }
    </style>
</head>
<body>
    <div>
        <div>
            我给你邦邦两拳
        </div>
        <div class="box">
            我是拰爹
        </div>
    </div>
</body>
</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">
    <title>Document</title>
    <style>
          /* 组选择器就是多个选择器的组合，把功能相同的代码放在组选择器里    */
          .box1, .box2, .box3{
              width: 100px;
              height: 100px;
              
          }
          .box1{
              background-color: deeppink;
          }
          .box2{
              background-color: deepskyblue;

          }
          .box3{
              background-color: firebrick;
          }
    </style>
</head>
<body>
    <!-- div.box1*3 -- 创建三个div 类名为box1 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>