CSS样式核心-选择器

白菜头33

于 2024-10-09 13:50:32 发布

阅读量962

点赞数 30

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_80916083/article/details/142768342

版权

CSS选择器是CSS中非常重要的一个概念，它决定了格式化将应用于哪些元素。常见的CSS选择器有标签选择器（如div、p）、类选择器（如.class类选择器）、id选择器（如#idname）。还有更复杂的组合选择器和伪类选择器，比如子代选择器、后代选择器、相邻兄弟选择器和通用兄弟选择器等。

一、基本选择器

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

1）标签选择器

标签选择符就是网页元素本身的属性，当你想为页面中的元素应用样式时，可以使用标签选择器。其格式为：

/* css代码 */

}

例如一下代码表示的标签选择器：

<style>
 /* 该标签的字体为红色，字体大小为13px */
    p{
         color: red;
         font-size: 13px;
     }
 /* 盒子的边框为2px蓝色双线，宽度为350像素 */

    div{
         border: 2px double blue;      /* 边框为2px蓝色双线 */
         width: 350px;                   /* 宽度为350像素 */

     }
</style>

2）class类选择器

class类选择器的名称可以由用户自定义，当你需要为具有相同类元素的多个元素应用相同的样式时，可以使用类选择器。HTML 元素也可以引用多个类。使用类选择器时，需要使用英文.（点）进行标识。

例如以下代码：

<style>
    <!-- 使用类选择器时，需要使用英文.（点）进行标识。 -->
    .top{
        color: aqua;
         }
</style>
<body>
<!-- 类名不能以数字开头！ -->
    <h1 class="top">你好啊</h1>
    <h3 class="top">你好吗</h3>
<!-- HTML元素也可引用两个类。 -->
    <p class="center large">这个段落引用两个类，class="center"和class="large"</p>
</body>

3）id选择器

id选择器用于对页面中唯一的元素设置样式，每个id选择器在HTML页面中只能使用一次。使用id选择器时，需要在id名称前加上一个“#”号。

例如以下代码：

<style>
    #cl1{
        color: blueviolet;
        text-align: center;
     }
</style>
<body>
    <h2 id="cl1">id选择器</h2>
</body>

注：id名是唯一的。

二、样式优先级

一般优先级原则是最接近目标对象的样式定义优先级最高。（行内样式>id选择器样式>类选择器样式>标签选择器样式）优先级一样时，遵循“后来居上”原则。

三、选择器的复合

1）交集选择器

“交集”选择符由两个选择符直接连接构成,其中,第一个选择符必须是标签选择符,第二个选择符必须是class类选择符或id选择符。
注：两个选择符之间不能有空格,必须连续书写。

例如以下代码：

<style>
    p{
        color:blue;
        font-size: 20px;
        font-family: 仿宋;
        text-decoration: underline;     /* 设置下划线 */
    }
    /* 第一个选择符必须是标签选择符,第二个选择符必须是class类选择符或id选择符。 */
    p.p1{
        color: rebeccapurple;
        border: 1px solid red;      /* 设置红色边框 */
        text-decoration:none            /* 取消下划线 */
    }
</style>
</head>
<body>
    <p>交集选择器使用</p>
    <p class="p1">交集选择器使用</p>
    <p>交集选择器使用</p>
</body>

显示效果：

2）并集选择器

“并集”选择器可同时选中各个基本选择器所覆盖的内容范围。它用逗号来组合多个运算符。

例如以下代码：

<style>
 /* 各选择器之间用逗号隔开 */
        .f1,.f2,.f3{
            color: aqua;
        }
    </style>
</head>
<body>
    <p class="f1">并集选择器</p>
    <p class="f2">并集选择器</p>
    <p class="f3">并集选择器</p>
</body>

显示效果：

：

3）关系选择器

a.子代选择器（大于号）

子代选择器只能选择该元素的子代元素，使用大于号隔开。

结构：

选择器1>选择器2{属性:值; 属性:值}

例如以下代码：

    <style>
        /* 子代只包括儿子，不涉及到孙子，互不影响 */
        ul>li{
            color: rgb(80, 0, 252);
        }
        #father>#son{
            color: #000;
        }
    </style>
</head>
<body>
    <!-- 假如ul为父亲，li为儿子 -->
    <ul>
        <li>儿子</li>
        <!--  -->
        <ul id="father">
            <li id="son">孙子</li>
        </ul>
    </ul>
</body>

显示效果：

注：子代选择器不可跨代。

b.后代选择器（以空格隔开）

后代选择器是通过选取元素的后代元素，用空格组合两个以上的选择器，使用空格表示后代。

结构：

h1 span{属性:值; 属性:值}

例如以下代码：

    <style>
        /* 只对p标签中的span属性起作用 */
        p span{
            color:darkgoldenrod;
        }
    </style>
</head>
<body>
    <p>祖父<span>父亲</span>儿子<span>孙子</span></p>
    <!-- 不属于p标签的样式属性，不生效 -->
    <p>你好</p>
</body>

显示效果：

c.相邻兄弟选择器

相邻兄弟选择器在CSS中用加号（`+`）表示。它用于选择紧接在当前元素后面的元素，只要它们有相同的父元素。

结构：选择器+选择器

例如以下代码：

<style>
    h1+p{
        color: deeppink;
    }
</style>
</head>
<body>
    <!-- 相邻兄弟选择器是选择在当前标签后的第一个兄弟元素，其他不生效 -->
    <h1>相邻兄弟选择器</h1>
    <p>第一个兄弟</p>
    <p>第二个兄弟</p>
    <p>第三个兄弟</p>
</body>

显示效果：

d.通用兄弟选择器

通用兄弟选择器在CSS中使用波浪号（`~`）来表示。它用于选择所有在当前元素之后的兄弟元素，只要它们共享同一个父元素。

结构：选择器~选择器

例如以下代码：

    /* 选择h2标签后所有的兄弟元素 */
<style>
    h2~p{
        color: mediumblue;
    }
</style>
</head>
<body>
    <h2>通用兄弟选择器</h2>
    <p>兄弟元素</p>
    <p>兄弟元素</p>
    <div>
        <p>非兄弟元素</p>
    </div>
    <p>兄弟元素</p>
</body>

显示效果：