CSS选择器详解（前端系列1）

最新推荐文章于 2024-05-09 13:14:11 发布

一只懒得睁眼的猫

最新推荐文章于 2024-05-09 13:14:11 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： css 选择器

本文链接：https://blog.csdn.net/a2011480169/article/details/75949262

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

博客核心内容：

①标签（名字）选择器
②ID选择器
③类选择器
④通配符选择器
⑤优先级就近原则，同权重情况下样式定义最近者为准
⑥多元素选择器
⑦后代选择器（.outer p）==>向下找
⑧子代选择器（.outer > p） ==>向下找
⑨相邻选择器（.outer + p） ==>向下找
⑩兄弟选择器（.outer ~ p） ==>向下找
⑾属性选择器（属性既可以是自带的，也可以是用户自定义的 [item=”item1”]）
⑿并且选择器
⒀class=”item1 item2”的应用
⒁伪类选择器
⒂选择器的优先级
⒃
⒄

1、标签（名字）选择器

这里写图片描述
运行结果：

2、ID选择器

这里写图片描述
运行结果：

3、类选择器

这里写图片描述
运行结果：

4、通配符选择器

这里写图片描述
运行结果：

5、优先级就近原则，同权重情况下样式定义最近者为准

示例1：
这里写图片描述
运行结果：

6、多元素选择器

这里写图片描述
运行结果：

7、后代选择器（.outer p）

这里写图片描述
运行结果：

8、子代选择器

这里写图片描述
运行结果：

9、相邻选择器

这里写图片描述
运行结果：

10、兄弟选择器

这里写图片描述
运行结果：

11、属性选择器

        带有A属性的标签:
        [A]{
            background-color: red;
        }

        A属性等于DIV1的标签:
        [A="DIV1"]{
            background-color: red;
        }

        A属性等于DIV1的p标签:
        p[A="DIV1"]{
            background-color: red;
        }

        带有A属性的p标签:
        p[A]{
            background-color: red;
        }

示例程序1：（标签自带的属性）
这里写图片描述
运行结果：

示例程序2：（用户自定义的属性）

运行结果：

12、并且选择器

这里写图片描述
运行结果：

13、class=”item1 item2”的应用

这里写图片描述
运行结果：

14、伪类选择器

anchor伪类：专门用于控制链接的显示效果。

 a:link,用于定义链接的常规状态。

 a:hover,当鼠标放在链接上时产生的状态。

before after伪类：适用于所用标签，主要用于进行调控。

 :before    p:before       在每个<p>元素之前插入内容     
 :after     p:after        在每个<p>元素之后插入内容     

例：p:before{content:"hello";color:red;display: block;}

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>

            div{
                width: 80px;
                height: 25px;
                border: solid;
            }

            a:link{
                color: blue;
            }

            /*anchor伪类只针对a标签有效果:通过hover可以控制鼠标悬浮时的状态*/
            a:hover{
                color: red;
            }

            /*通过这种方式主要是为了调控:向下隔一行,而并不是为了添加某些文字*/
            /*下面这种写法并不是增加了一个标签,只不多是为标签增加了一个样式*/
            p:after{
                content:"hello p";
                color: red;
                display: block;
                background-color: wheat;
            }

        </style>
    </head>
    <body>
        <p>zhangmingyang</p>
        <div><a href="" >Hello Word</a></div>
    </body>
</html>

效果：
这里写图片描述

示例：需求:当鼠标悬浮在box区域的时候,都让div1标签区域内的颜色变红。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*<!--需求:当鼠标悬浮在box区域的时候,都让div1标签区域内的颜色变红-->*/
        /*当我们的鼠标悬浮在盒子上面的时候:将对div1产生影响*/
        /*悬浮所在的标签对可能产生影响的标签：标签可能不一样*/
        /*后面要操作处理的标签必须是前面悬浮标签的一个子标签,这是非常重要的！！！*/
        .box:hover .div1{
            background-color: blue;
        }

        .box{
            width: 100px;
            border: solid;
        }

        .div1{
            height: 100px;
            width: 100px;
            background-color: wheat;
        }

        .div2{
            height: 100px;
            width: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="box">
           <div class="div1">fdsf</div>
           <div class="div2">fsfds</div>
    </div>
</body>
</html>

运行结果：
在悬浮区外的时候：
这里写图片描述
悬浮的时候：

15、选择器的优先级

标签选择器:1
class选择器:10
id选择器:100
内嵌的优先级相当于:1000
<p style="color:gainsboro;">new P</p>
优先级就近原则:同权重情况下样式定义最近者为准（下面的style的定义为准）,即相同优先级按照
顺序。
注意:有！important声明的规则高于一切。
        .new p{
            color: brown !important;
        }

可继承的标签:font-size font-family color这些与字体相关的属性。
(子类标签会继承父类标签的相关字体属性),即有些属性可以继承,但是有些属性并不能够继承,只能继承与
文本相关的属性。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*<!--在下面我们用三种不同的选择器对标签进行查找和操作-->*/
        #d2{
            color: blue;
        }
        /*权重:20*/
        .outer .div2{
            color: red;
        }
        /*权重21:三层查找*/
        .outer .div2  p{
           color: red;
        }
        /*权重:20*/
        .div2 .p1{
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="div1" id="d1">DIV1</div>
        <div class="div2" id="d2">
            <p class="p1" id="p1">PPP</p>
        </div>
    </div>
</body>
</html>

一只懒得睁眼的猫

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS选择器详解（前端系列1）

博客核心内容：①标签（名字）选择器 ②ID选择器 ③类选择器 ④通配符选择器 ⑤优先级就近原则，同权重情况下样式定义最近者为准 ⑥多元素选择器 ⑦后代选择器（.outer p）==>向下找 ⑧子代选择器（.outer > p） ==>向下找 ⑨相邻选择器（.outer + p） ==>向下找 ⑩兄弟选择器（.outer ~ p） ==>向下找 ⑾属性选择器（属性既可以是自带的，
复制链接

扫一扫