CSS选择器

最新推荐文章于 2025-12-17 10:38:18 发布

原创最新推荐文章于 2025-12-17 10:38:18 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文详细介绍了CSS的选择器类型，如交集、并集、兄弟选择器，以及hover、first、before和after等伪类选择器的用法和示例。通过实例演示了如何改变元素样式，包括鼠标悬停效果、首行样式和定位技巧。

1.交集选择器

  <style>
        div.box {
            color:red;
        }
    </style>
</head>
<body>
<div>没有样式的div</div>
<p>
    <div class="box"></div>
</p>
<div class="box"></div>
<p class="box"></p>

2.并集选择器

<style>
        div,.box {
            color:red;
        }
    </style>
</head>
<body>
<div>没有样式的div</div>
<p>
<div class="box">在p标签中的div</div>
</p>
<div class="box">带有央视的div</div>
<p class="box">这是p标签的内容</p>

3.兄弟选择器

 <style>
        div + p{
            color:red;
        }
    </style>
</head>
<body>
<!--选择div相邻的p标签-->
<!--注意：兄弟相邻选择器，只会选择它之后并且紧挨着的-->
</body>

通用兄弟选择器

  <style>
        div ~ p {
            color:mediumvioletred;
        }
    </style>
</head>
<body>
<!--需求：选择div所有的兄弟选择器-->
<!--选择相邻一个用 + ，选择向坤所有用 ~ -->
<!-- ~ p表示相邻的所有p-->

4.伪类选择器

1）hover

 <style>
        .box {
            width:100px;
            height:100px;
            border:1px solid #000000;
        }
        .box:hover {
            cursor:pointer;/*指针鼠标*/
            background-color:red;
        }
    </style>
</head>
<body>
<!--需求：当鼠标移到div上时，背景颜色变成红色，同时鼠标指针变为小手-->
<!--
伪类选择器都是以:开头的选择器
:hover表示鼠标移到元素上时会自动触发的效果
伪类选择器需要配合其他选择器一起使用！！！
-->
</body>

2)first

 <style>
        .box {
            width:100px;
            height:100px;
            border:1px solid #000000;
        }
        .box:hover {
            cursor:pointer;/*指针鼠标*/
            background-color:red;
        }
    </style>
</head>
<body>
<!--需求：当鼠标移到div上时，背景颜色变成红色，同时鼠标指针变为小手-->
<!--
伪类选择器都是以:开头的选择器
:hover表示鼠标移到元素上时会自动触发的效果
伪类选择器需要配合其他选择器一起使用！！！
-->
</body>

3)before and after

 <style>
        .box {
            width:100px;
            height:100px;
            border:1px solid #000000;/*表示四个边都有，它们的顺序是上右下左*/
            position:relative;
        }
        .box:before {
            content:"";
            width:10px;
            height:10px;
            border-top:1px solid #a70ff3;/*上边线*/
            border-left:1px solid red;/*左边线*/
            position:absolute;/*绝对定位*/
            left:0;
            top:0;
        }
        .box:after {
            content:"";
            width:10px;
            height:10px;
            border-right:1px solid red;/*右边线*/
            border-bottom:1px solid red;/*下边线*/
            position:absolute;
            right:-1px;
            bottom:-1px;
        }
    </style>
</head>
<body>
<!--需求：在左上角和右下角各有一个红色的尖-->
<div class="box">肖战</div>
</body>

4)定位

 <style>
        .box {
            width:100px;
            height:100px;
            border:1px solid #000000;/*表示四个边都有，它们的顺序是上右下左*/
            position:relative;
        }
        .box:before {
            content:"";
            width:10px;
            height:10px;
            border-top:1px solid #a70ff3;/*上边线*/
            border-left:1px solid red;/*左边线*/
            position:absolute;/*绝对定位*/
            left:0;
            top:0;
        }
        .box:after {
            content:"";
            width:10px;
            height:10px;
            border-right:1px solid red;/*右边线*/
            border-bottom:1px solid red;/*下边线*/
            position:absolute;
            right:-1px;
            bottom:-1px;
        }
    </style>
</head>
<body>
<!--需求：在左上角和右下角各有一个红色的尖-->
<div class="box">肖战</div>
</body>