CSS的选择器

嘵奇

已于 2025-03-01 21:49:23 修改

阅读量331

点赞数

分类专栏： # CSS 文章标签： css

于 2020-09-18 20:18:41 首次发布

本文链接：https://blog.csdn.net/qq479850581/article/details/108667288

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细介绍了CSS3的选择器，包括基本选择器如标签选择器、类选择器和id选择器，以及高级选择器如层次选择器、结构伪类选择器和属性选择器。文章还讨论了不同选择器的优先级，并通过代码演示来帮助理解其用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

精心整理了最新的面试资料和简历模板，有需要的可以自行获取

点击前往百度网盘获取
 点击前往夸克网盘获取

选择器作用

选择页面上的某一个或者某一个元素

基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择页面上所有的这个标签元素*/
        h1{
            color: #a7ff81;
            background: brown;
            border-radius: 25px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>你好</h1>
<h1>你好</h1>
<p>世界</p>
<p>世界</p>
</body>
</html>

结果:
在这里插入图片描述

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器：
        .类名
        可以实现归类，可以复用*/
        .zhengbenqi{
            color: aquamarine;
        }
        .zhengben{
            color: #a7ff81;
        }
    </style>
</head>
<body>
<h1 class="zhengbenqi">你好</h1>
<h1 class="zhengben">你好</h1>
<h1 class="zhengbenqi">你好</h1>
</body>
</html>

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

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器,id必须保证唯一
        #id名称{}
        */
        #zhengbenqi{
            color: #82ff53;
        }
    </style>
</head>
<body>
<h1 id="zhengbenqi">你好</h1>
<h1>你好</h1>
<h1>你好</h1>
<h1>你好</h1>
</body>
</html>

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

三种选择器优先级

id选择器>class 选择器 >标签选择器

高级选择器

层次选择器

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    p{}是全部选择
    <style>
        p{
            background: #a7ff81;
        }
    </style>-->
<!--    body p{}是body后面的全选
    <style>
        body p{
            background: brown;
        }
    </style>-->
<!--    body>p{}是body的下一代
    <style>
        body>p{
            background: brown;
        }
    </style>-->
<!--    .类+p{}是相邻选择
对下不对上，只有一个
    <style>
        .market+p{
            background: aqua;
        }
    </style>-->
<!--    通用选择,本身和下面所有的
.类+~p{}-->
    <style>
        .market~p{
            background: aquamarine;
        }
    </style>
</head>
<body>
<p class="market">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

结构伪类选择器

在这里插入图片描述

属性选择器（常用）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 51px;
            width: 52px;
            border-radius: 10px;
            text-align: center;
            color: #abff99;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*存在id属性的元素：a[]{} */
        a[id=four]{
            background: brown;
        }
        /*class中有links的元素*/
        a[class="say"]{
            background: yellow;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: #abff99;
        }
        /*以png结尾的元素*/
        a[href$=png]{
            background: black;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http//:www.baidu.com" class="say" id="one">1</a>
    <a href="www.baidu.com" class="say" id="one">1</a>
    <a href="www.baidu.png" target="_blank">2</a>
    <a href="www.baidu.jpg" class="say" title="test">3</a>
    <a href="www.baidu.png" class="say" id="two">4</a>
    <a href="www.baidu.jpg" class="active" id="four">5</a>
    <a href="www.baidu.com" target="_parent" id="three">6</a>
</p>
</body>
</html>