CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

YRZ-James

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量74

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_41998938/article/details/93380595

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.css的选择器及其介绍
ID选择器：id属性的特点就是唯一不可重复的
元素选择器：元素选择器是通过元素名称来定位页面元素
类（class）选择器：
属性选择器

2.基于关系的选择器

选择器	选择的元素
A E	元素A的任一后代元素E（后代节点指A的子节点，子节点的子节点，以此类推）祖先元素和后代元素
A > E	元素A的任一子元素E（也就是直系后代）父元素和子元素
B + E	元素B的任一下一个兄弟元素E 兄弟元素

后代选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        span{
            background-color:lightblue;
        }
        div span{
            background-color:lightcoral;
        }
    </style>
</head>
<body>
<div>
    <span>Span 1.
        <span>Span 2.</span>
    </span>
</div>
<span>Span 3.</span>
</body>
</html>

效果：
在这里插入图片描述

相邻兄弟选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        #one + li{
            color: lightcoral;
        }
    </style>
</head>
<body>
<ul>
    <li id="one">One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</body>
</html>

效果：
在这里插入图片描述

3.伪类

伪类	描述
：link	尚未被访问的链接添加样式
：hover	当鼠标悬浮在元素上方时，向元素添加样式
：active	向被激活的元素添加样式
：visited	向已被访问的链接添加样式

伪类用法的特点：
所有的伪类前面都会加一个冒号

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        a:link{
            color:lightblue;
        }
        a:hover{
            color:lightcoral;
        }
        a:active{
            color:lightgreen;
        }
        a:visited{
            color:lightgray;
        }
    </style>
</head>
<body>
<a href="#">慕课网 imooc.com</a>
</body>
</html>

4.伪元素

：：before	会为当前元素创建一个子元素作为伪元素。
：：after	用来匹配已选中元素的一个虚拟的最后子元素。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        q::before{
            content: "<<";
            color: lightgreen;
        }
        q::after{
            content: ">>";
            color:lightcoral;
        }
    </style>
</head>
<body>
<q>一些引用</q>, 他说, <q>比没有好。</q>.
</body>
</html>

效果：
在这里插入图片描述
注意事项：
伪元素用法前面加两个冒号
伪类用法前面加一个冒号

5.选择器的优先级别
元素选择器和伪元素的级别最低
其次是类选择器，属性选择器和伪类
ID选择器是选择器中级别最高的
内联样式总会覆盖外部样式表的任何形式样式

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>
    <style>
        p{
            color:lightblue !important;
        }
        .myclass{
            color:lightgreen;
        }
        #p{
            color: lightcoral;
        }
    </style>
</head>
<body>
<p id="p" class="myclass">这是一个段落内容.</p>
</body>
</html>

总结：
内联样式的优先级别高于外联样式
外联样式：id选择器级别最高，其次是类选择器，元素选择器和伪类。

YRZ-James

关注

1
点赞
踩
0

收藏

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

1.css的选择器及其介绍ID选择器：id属性的特点就是唯一不可重复的元素选择器：元素选择器是通过元素名称来定位页面元素类（class）选择器：属性选择器2.基于关系的选择器选择器选择的元素A E元素A的任一后代元素E（后代节点指A的子节点，子节点的子节点，以此类推）祖先元素和后代元素A > E元素A的任一子元素E（也就是直系后代） ...
复制链接

扫一扫