CSS复合选择器~伪类选择器~

最新推荐文章于 2023-03-31 20:17:33 发布

东北玛丽的小笔记

最新推荐文章于 2023-03-31 20:17:33 发布

阅读量234

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44614856/article/details/87286728

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.交集选择器
交集选择器由两个选择器构成.找到的标签必须满足：既有标签一的特点.也有标签二的特点
其中第一个为标签选择器.第二个为class选择器.两个选择器之间不能有空格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div.a{
            color: red;
        }
    </style>
</head>
<body>
<div class="a">哈哈哈</div>
<div>啦啦啦</div>
</body>
</html>

2.并集选择器：
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的.任何形式的选择器（包括标签选择器.class类选择器id选择器等）都可以作为并集选择器的一部分.如果某些选择器定义的样式完全相同.或部分相同.就可以利用并集选择器为它们定义相同的CSS样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a,.b{
            color: aqua;
        }
    </style>
</head>
<body>
<div class="a">哈哈哈</div>
<div class="b">啦啦啦</div>
</body>
</html>

3.后代选择器
后代选择器又称为包含选择器.用来选择元素或元素组的后代.其写法就是把外层标签写在前面.内层标签写在后面.中间用空格分隔.当标签发生嵌套时.内层标签就成为外层标签的后代

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div p span{
            color: red;
        }
    </style>
</head>
<body>
<div>
   <p>
       <span>
           哈哈哈
       </span>
   </p>
</div>
<span>哒哒哒</span>
</body>
</html>

4.子代选择器
子元素选择器只能选择作为某元素子元素的元素.其写法就是把父级标签写在前面.子级标签写在后面.中间跟一个 > 进行连接.
这里的子指的是亲儿子不包含孙子重孙子之类

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div>span{
            color: red;
        }
    </style>
</head>
<body>
<div>
   <p>
       <span>
           哈哈哈
       </span>
   </p>
    <span>哒哒哒</span>
</div>
</body>
</html>

复合选择器总结
在这里插入图片描述
5.伪类选择器
链接伪类选择器
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a {
            color: gray;
        }
        a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
        }
    </style>
</head>
<body>
<div class="a">aaa</div>
</body>
</html>

东北玛丽的小笔记

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS复合选择器~伪类选择器~

1.交集选择器交集选择器由两个选择器构成.找到的标签必须满足：既有标签一的特点.也有标签二的特点其中第一个为标签选择器.第二个为class选择器.两个选择器之间不能有空格&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;
复制链接

扫一扫

专栏目录