CSS语法基础：选择符

EX_C

已于 2024-10-11 18:14:00 修改

阅读量623

点赞数 14

文章标签： css 前端 html5

于 2024-10-11 18:12:27 首次发布

本文链接：https://blog.csdn.net/2401_84309743/article/details/142858216

版权

一、基本选择符

基本选择符包括 标签选择符、class类选择符 和 id选择符。

1.标签选择符

选择某种HTML标签为对象来设置其样式规则。标签选择器就是网页元素本身，定义时直接使用元素名称，其格式为：

    <style>
        /* 标签选择符 优选级最低*/
        元素名{
            /* css代码 */
         }
    </style>

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择符</title>
   
    <style>
    /* 标签选择符 优选级最低*/
    h1{
        color: blue; 
    }
    </style>
    
</head>
<body>

    <h1>《剑风传奇》</h1>
    <ul>第一章
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
</body>
</html>

运行结果如下：

2. 类选择符

用来定义HTML页面中需要特殊表现的样式，用 class 名作为选择器，为制定class名的元素设置样式，必须在 class 属性前加“ . ”，其格式为：

    <style>
        .类名称1{属性:属性值; 属性:属性值...}
        .类名称2{属性:属性值; 属性:属性值...}
            ...
        .类名称n{属性:属性值; 属性:属性值...}
    </style>

注：使用的是英文点（ . ）进行标识。

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择符</title>
   
    <style>
        /* 类选择符 优先级中间*/
        .book_name{
            color: red;
        }
    </style>
    
</head>
<body>

    <h1 class="book_name">《剑风传奇》</h1>
    <ul>第一章
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>

    <h1 class="book_name">《浪客行》</h1>
    <ul>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
</body>
</html>

运行结果如下：

3. id 选择符

用来对某一元素定义单独的样式。为指定 id 名的元素设置样式（id名是唯一的）,针对性更强，定义 id 名称前加入一个” # “号，其格式为：

    <style>
        #id名1{属性:属性值; 属性:属性值...}
        #id名2{属性:属性值; 属性:属性值...}
            ...
        #id名n{属性:属性值; 属性:属性值...}
    </style>

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择符</title>
   
    <style>
        /* id 选择符 优先级最高 */
        #shu2{
            color: green;
        }
    </style>
    
</head>
<body>

    <h1 id="shu1">《剑风传奇》</h1>
    <ul>第一章
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>

    <h1 id="shu2">《浪客行》</h1>
    <ul>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
</body>
</html>

运行结果如下：

4.基本选择符的优先级

行内样式 > id 选择器样式 > 类选择器样式 > 标签选择器样式（无需遵循“后来居上”原则）

可以自行尝试比较一下优先级。

二、复合选择符

1.“交集”选择符

两个选择器直连：第一个必须是标签选择器，第二个必须是类选择器或id选择器，且选择器之前不能有空格，必须连续书写。

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择符</title>
   
    <style>
        /* 交集选择符 */
        ul.class1{
            color:red ;
        }

        h1#shu2{
            color: blue;
        }
    </style>
    
</head>
<body>

    <h1 class="book_name" id="shu1">《剑风传奇》</h1>
    <ul class="class1">第一章
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>

    <h1 class="book_name" id="shu2">《浪客行》</h1>
    <ul>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
</body>
</html>
</html>

运行结果如下：

2.”并集“选择符

多个选择器写在一起（逗号隔开），使用同样的样式声明

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择符</title>
   
    <style>
        /* 并集选择符 */
        #shu1,#shu2,#shu3{
            color:aqua
        }
    </style>
    
</head>
<body>

    <h1 class="book_name" id="shu1">《剑风传奇》</h1>
    <ul class="class1">第一章
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
    <h1 class="book_name" id="shu2">《浪客行》</h1>
    <ul>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
    <h1 class="book_name" id="shu3">《炎拳》</h1>
    <ul>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
</body>
</html>

运行结果如下：

3.关系选择符

（1）后代选择符

选择所有被A元素包含的B元素，中间用空格隔开

运行结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择符</title>
   
    <style>
        /* 关系选择器-1.后代选择器（可跨代） */
        ul li ul li #jie1{
            color: red;
        }
    </style>
    
</head>
<body>

    <ul>
        <h4 class="header">《剑风传奇》</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="jie1">第一节</h6>
                </li>
                <li>
                    <h6 id="jie2">第二节</h6>
                </li>
                <li>
                    <h6 id="=jie3">第三节</h6>
                </li>
            </ul>
</body>
</html>

运行结果如下：

（2）子代选择器

选择所有作为A元素的直接子元素B，对更深一层的元素不起作用，用 > 隔开

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择符</title>
   
    <style>
        /* 关系选择器-2.子代选择器（不可跨代） */
        li>#jie2{
            color: blue;
        }
    </style>
    
</head>
<body>

    <ul>
        <h4 class="header">《剑风传奇》</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="jie1">第一节</h6>
                </li>
                <li>
                    <h6 id="jie2">第二节</h6>
                </li>
                <li>
                    <h6 id="=jie3">第三节</h6>
                </li>
            </ul>
</body>
</html>

运行结果如下：

（3）相邻兄弟选择器

选择器跟A元素后的B元素，用 + 隔开，选择相邻的第一个兄弟元素，只能向下选择

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择符</title>
   
    <style>
        /* 关系选择器-3.相邻兄弟选择器 */
        h4+li{
            color: green;
        }

    </style>
    
</head>
<body>

    <ul>
        <h4 class="header">《剑风传奇》</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="jie1">第一节</h6>
                </li>
                <li>
                    <h6 id="jie2">第二节</h6>
                </li>
                <li>
                    <h6 id="=jie3">第三节</h6>
                </li>
            </ul>
            <li>第二章
                <ul>
                    <li>
                        <h6 id="jie4">第一节</h6>
                    </li>
                    <li>
                        <h6 id="jie5">第二节</h6>
                    </li>
                    <li>
                        <h6 id="=jie6">第三节</h6>
                    </li>
                </ul> 
</body>
</html>

运行结果如下：

（4）通用兄弟选择器

选择A元素之后的所有兄弟元素B，作用于多个元素，用 ~ 隔开，只能向下选择

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择符</title>
   
    <style>
        /* 关系选择器-4.通用兄弟选择器 */
        h4~li{
            color:aqua;
        }

    </style>
    
</head>
<body>

    <ul>
        <h4 class="header">《剑风传奇》</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="jie1">第一节</h6>
                </li>
                <li>
                    <h6 id="jie2">第二节</h6>
                </li>
                <li>
                    <h6 id="=jie3">第三节</h6>
                </li>
            </ul>
            <li>第二章
                <ul>
                    <li>
                        <h6 id="jie4">第一节</h6>
                    </li>
                    <li>
                        <h6 id="jie5">第二节</h6>
                    </li>
                    <li>
                        <h6 id="=jie6">第三节</h6>
                    </li>
                </ul> 
</body>
</html>

运行结果如下：