CSS选择器

最新推荐文章于 2024-07-19 15:50:46 发布

hotslow

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量60

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/hotslow/article/details/121815498

版权

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>

hotslow

关注

0
点赞
踩
0

收藏

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

1.交集选择器 <style> div.box { color:red; } </style></head><body><div>没有样式的div</div><p> <div class="box"></div></p><div class="box"></div><
复制链接

扫一扫