常用css选择器

最新推荐文章于 2024-03-09 13:40:17 发布

就爱酸辣土豆丝

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量125

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/m0_50913689/article/details/108960462

版权

html+css+js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css选择器

选择器介绍

选择器介绍

css选择器放在样式表当中，选择器就是用来选择html中的标签，选择出来以后用来给标签添加样式，选择器有如下6种，经常使用的也就类选择和层级选择器

标签选择器

根据标签来选择标签，以标签开头，会影响html当中所有的标签，一般用来做一些通用设置，如下定义会将所有的li标签颜色定义为绿色

 <style>
     li{
         color: chartreuse;
     }
 </style>

类选择器

根据类名选择标签，以.类选择器名字开头，使用时用“class=类选择器名字”引入
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .a{
            background: crimson;
            font-size: 10px;
        }
        .b{
            background: blue;
            font-size: 15px;
        }
        .c{
            background: gold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="a">我是一个p标签，我引入的是a样式</p>
    <p class="b">我是一个p标签，我引入的是b样式</p>
    <p class="c">我是一个p标签，我引入的是c样式</p>
</body>
</html>

执行结果：在这里插入图片描述
1个标签可以用于多个类选择器，1个类选择器也可以应用于多个标签，多个类选择器之间使用空格分割，应用灵活，可复用，是目前程序猿小哥哥们使用最多的一种选择器，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .bgcoral{
            background: coral;
        }
        .bgblue{
            background: blue;
        }
        .size20px{
            font-size: 20px;
        }
        .size30px{
            font-size: 30px;
        }
        
    </style>
</head>
<body>
    <p class="bgcoral size20px">我是一个p标签</p>
    <p class="bgblue size30px">我是一个p标签</p>
    <p class="bgcoral size30px">我是一个p标签</p>
</body>
</html>

执行结果：
在这里插入图片描述

层级选择器

也叫后代选择器，根据层级关系选择后代标签，应用于标签嵌套结构，用来选择子标签，选择器之间使用空格分隔，如下段代码，给div标签下面的p标签添加样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>你好，层级选择器</p>
        <p>我也满足层级关系的，哼哼！！！</p>
        <p>
            <p>我是div的孙子辈p标签，我爹也是p标签</p>
            <h1>我的爷爷也是div标签，p标签是我亲爹，但我是h1标签，呜呜...</h1>
        </p>
        <h1>
            <p>我的爷爷是div标签，但我爹是h1标签</p>
        </h1>
    </div>
    <p>我不满足上面的层级关系，呜呜呜...</p>
</body>
</html>

执行结果：
在这里插入图片描述
从上面的结果可以看出，满足层级关系的div下面所有的子p标签都被添加样式，不仅仅局限于父子关系，子孙关系也是可以的，只要是后代关系就行
层级选择器不仅仅用于两个标签之前，比如我要给上面的第二个p标签换一种样式，不想他和其他样式一致，就可以使用层级选择器结合类选择器
如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
    <style>
        div p{
            color: red;
        }
        div .p{
            color: seagreen;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        <p>你好，层级选择器</p>
        <p class="p">我的样式是独一无二的，哼哼！！！</p>
        <p>
            <p>我是div的孙子辈p标签，我爹也是p标签</p>
            <h1>我的爷爷也是div标签，p标签是我亲爹，但我是h1标签，呜呜...</h1>
        </p>
        <h1>
            <p>我的爷爷是div标签，但我爹是h1标签</p>
        </h1>
    </div>
    <p>我不满足上面的层级关系，呜呜呜...</p>
</body>
</html>

执行结果：
在这里插入图片描述

id选择器

以#开头，id是用来区分html网页中的不同标签，id是唯一的，不能重复，所以id选择器只能被某一个元素使用，不能被其他元素再次使用，使用效率太低，目前基本没有人用
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #myidtest1{
            background:yellowgreen;
            font-weight: 5;
        }
    </style>
</head>
<body>
    <p id="myidtest1">我用的是id选择器</p>
</body>
</html>

执行结果：
在这里插入图片描述

组选择器

顾名思义也就是多个选择器的一个组合，以逗号分割开, 用于设置公共的样式，可以大大提高代码书写效率，其他特定的样式可以单独定义，样式会进行追加，不会覆盖，与python当中稍微不太一样，如下面的a类选择器，只要掌握了其他几种，组选择器会显得特别简单
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        .a,.b,.c,a{
            color: seagreen;
            font-size: 20px;
        }
        .b{
            background: orangered;
        }
    </style>
</head>
<body>
    <p>我用的是组选择器</p>
    <form action="">
        <label for="" class="b">用户名：</label>
        <input type="text">
    </form>
</body>
</html>

执行结果：
在这里插入图片描述

伪类选择器

用来给其他选择器增加特殊效果，选择器后面加+：+伪类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        .b{
            color:seagreen;
            font-size: 20px;
            background: orangered;
        }
        /* hover用于选择鼠标指针悬停时的元素，下面设置对应鼠标悬停后的样式*/
        .b:hover{
            color:sienna;
            font-size: 50px;
            background:slateblue;
        }
    </style>
</head>
<body>
    <p class="b">我来玩玩伪类选择器</p>
</body>
</html>

执行结果：
在这里插入图片描述
鼠标在上面悬停后的结果：

以上仅适用于刚入门的小白，如有问题，欢迎随时指教，不胜感激！！！

就爱酸辣土豆丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用css选择器

css选择器选择器介绍标签选择器类选择器层级选择器id选择器组选择器伪类选择器选择器介绍css选择器放在样式表当中，选择器就是用来选择html中的标签，选择出来以后用来给标签添加样式，选择器有如下6种，经常使用的也就类选择和层级选择器标签选择器根据标签来选择标签，以标签开头，会影响html当中所有的标签，一般用来做一些通用设置，如下定义会将所有的li标签颜色定义为绿色 <style> li{ color: chartreuse; } </s
复制链接

扫一扫