CSS选择器

拖拉机本拉基

已于 2022-05-24 19:29:30 修改

阅读量4.6k

点赞数 6

文章标签： css html css3

于 2022-05-18 20:36:59 首次发布

本文链接：https://blog.csdn.net/qq_46883835/article/details/123372604

版权

CSS选择器

简单介绍一下CSS选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

传统CSS 2.1选择器

 标签选择器
 id选择器
 class选择器（类选择器）
 复合选择器
 伪类

CSS 3新增选择器

 元素关系选择器
 序号选择器
 属性选择器
 CSS 3新增伪类
 伪元素

标签选择器

标签选择器也称为元素选择器、类型选择器，它直接使用元素的标签名当作选择器，将选择页面上所有该种标签。
标签选择器将选择页面上所有的该种标签，无论这个标签所处的位置的深浅。
标签选择器的作用：“覆盖面”大，通常用于标签的初始化。

/*这里所有的span标签内容字体颜色都会变成棕红色*/
span{
color:#522;
}

id选择器

锚点也是id，datalist也对应的id

标签可以有id属性，是这个标签的唯一标识
Id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，习惯上一般为小写字（注意一下命名规则ao）
同一个页面上不能有相同的id标签

/* 对应的html中的id为id1的标签将会拥有红棕色的字体*/
#id1{
color:#522;
}

class选择器

多个标签可以为相同的类名
同一个标签可以同时属于多个类（类名用空格隔开）【滴滴滴：这里肯定会考虑到同时设置的两个类存在样式重复的问题，如果设置内容冲突，则样式显示样式写在后面的一个】

<head>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
</head>

<body>
    <div class="red green">我是什么颜色呢😮</div>
</body>

<head>
    <style>
        .green {
            color: green;
        }
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div class="red green">我是什么颜色呢😮</div>
</body>

这里补充一个特殊的类，原子类

原子类：CSS原子类并不是什么新的特性，而是一种写法，其特点就是一个类名对应一个样式，从而通过在标签上附加不同的类名来生成对应的效果，可以有效的减少CSS的相关代码。
- 在网页项目前，可以将所有的常用字号、文字颜色、外边距、内边距等都设置为单独的类。
- Html标签可以“按需选择”，快速添加样式
  可能没有看懂，来个🌰

.font-red{
color:red;
}
.flex{
display:flex;
}
.bg-color {
background-color: rgb(40, 139, 139);
        }

(上面几个都是原子类，特点就是一个类名对应一个CSS规则，并且命名应该是和规则有关系的，使用直接在标签里插入样式)

这里是原子的简单介绍，可以看看：https://juejin.cn/post/7067819426556411935
【没有特殊情况，原子类还是少用为好】

通用选择器（通配符）

通用选择器（*被称之为通配符）：通用选择器用于匹配html中的所有标签

/* 比较常见的样式清除 */
*{
    padding:0;
    margin: 0;
}

【选中document的所有标签，进行样式统一（通配符什么的还是不要打堆堆使用，会影响网页性能，回流重绘的时候比较消耗时间，但是还是可以用哈，少用）】

复合选择器

符合选择器——后代选择器

注意说明：“后代”不一定是“儿子”（被包裹的子元素就可以）
后代选择器可以有很多空格，隔开好几代

<head>
  <style>
        /* 非"儿子"后代标签 */
        
        .dad .great-grandson {
            text-decoration: line-through;
        }
        
        .dad .son .grandson {
            text-indent: 2em;
        }
        /* "儿子"后代标签 */
        
        .dad .son {
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <ul class="red dad">我是爹
        <li class="blue son">我是大儿子
            <div class="green grandson">我是大孙子
                <div class="orange great-grandson">我是大曾孙</div>
            </div>
        </li>
        <li class="purple son">我是小儿子
            <div class="grey grandson">我是大孙子
                <div class="orange great-grandson">我是大曾孙</div>
            </div>
        </li>
    </ul>
</body>

后代选择器
（需要注意的是如果使用的是标签选择器，选择上的将会是所有为这种标签的后代，如果你只像选择“儿子”标签，那就看看下面👇的元素关系选择器）

交集选择器

交集选择器其实就是一种组合形式，锁定的是即是…又是的元素（标签），下面例子中将会选择到同时拥有point类以及标签类型为div的元素

<head>
    <style>
        div.point {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="point">我是拥有point的div标签</div>
    <div>我是单独的div标签</div>
</body>

交集选择器
【注意：中间没有空格ao，有空格就变成了后代选择器】

并集选择器

并集选择器也叫做分组选择器，用逗号表示分组，下面例子将会选中div标签或者是拥有point类的标签

<head>
    <style>
        div,
        .point {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="point">我是拥有point的div标签</div>
    <div>我是单独的div标签</div>
    <section>我是混子</section>
</body>

并集选择器

伪类

伪类：是添加到选择器的描述性词语，指定要选择的元素的特殊状态
（超链接是会经常使用到伪类的，我们将会给链接不同的状态设置不同的样式，有用过百度的都看到过，点击百度中下面的新闻词条，点击的时候词条会变为蓝色，当你曾经访问过这条词条的时候，这个超链接将会是紫色的，所以接下来我们会讲一讲超链接的几种状态，以及传说中的"爱恨原则"，进而了解伪类可以使用的范畴等）

超级链接的四种状态

伪类	意义
a:link	没有被访问过的超链接
a:hover	正被鼠标悬停的超链接
a:active	正在被激活的超链接（以及按下，但还没有抬起）
a:visited	已经被访问过的超链接

爱恨原则：超链接（a标签）的样式（选择器）书写要按照爱恨原则进行书写，否则伪类将会失效

爱恨原则具体内容
关于爱恨原则不是说一定要按照上述顺序，爱恨原则的核心内容在于： a:hover必须置于a:link和a:visited之后，才有效，a:active必须在a：hover之后，才有效。而link、visited两个伪类间顺序无所谓，谁在前都可以

伪类是可以设置一个元素的特殊状态改变另一个元素的出现效果）

/*此时点击h3(悬停),div元素将会变为红色*/
h3:hover+div{
color:red;
}

元素关系选择器

{基本上都是从IE7开始兼容}

名称	解释	例子
子选择器	只会在选择器选中直接子元素的时候匹配，继承关系上更远的后代则不会匹配	div>p
相邻兄弟选择器	选中恰好处于另一个在继承关系上同级的元素旁边的物件	div+p
通用兄弟选择器	如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器	p~span

1. 子选择器：

只会去匹配直接的后代元素（简单来说就是只会去匹配紧跟着的儿子元素，孙子元素是不会被选中的，一定要去与后代选择器进行区分）
就不给例子了，不太能明显看出来（就是选儿子，但是实际项目中还是会用到的）

3. 相邻兄弟选择器：

相邻兄弟选择器(+)介于子选择器与通用兄弟选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
a+b就是选择“紧跟在a后面的一个b”
相邻兄弟选择器有一个很妙的用途就是用来设置中间元素的间隔（margin）
给个例子吧：

<head>
    <title>元素关系选择器</title>
    <style>
        /* 清除有序列表的默认样式(一般用通配符去清所有列表) */
        * {
            list-style: none;
        }
        /* 撑开看看，设置的怎么样 */
        
        ul {
            /* 只是为了好看，这不是重点 */
            background: rgb(197, 219, 211);
            border: 2px solid blueviolet;
            width: 62px;
            border-radius: 5px;
        }
        /* 来几个盒子看看 */
        li {
            height: 15px;
            width: 15px;
            background: rgb(156, 136, 159);
            border-radius: 2px;
        }
        /* 利用相邻兄弟选择器设置间距 */
        
        li+li {
            /* 解释一下，这里就是设置的li同级，且紧跟着的一个li,
            那么这样的话就只会产生li与li之间的间隔，首尾就不需要单独设置了 */
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <!-- 是不是不好看，如果挤在一起，那么这个时候就可以设置等间距 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

利用相邻兄弟选择器进行等间距设置

4. 通用兄弟选择器

兄弟选择器（~），b选择a元素之后所有同层级的b元素
举个🌰

<head>
    <title>通用兄弟选择器</title>
    <style>
        .box~ul {
            font-weight: bold;
            background: rgba(227, 189, 189, .6);
        }
    </style>
</head>

<body>
    <div class="box">
        我是一个盒子
    </div>
    <ul class="list1">
        <li>我是一个无序列表的元素</li>
        <li>我是一个无序列表的元素</li>
    </ul>
    <ul class="list2">
        <li>我是一个无序列表的元素</li>
        <li>我是一个无序列表的元素</li>
    </ul>
    <div>我是一个块级标签,且和box同级(我是他的兄弟)
        <ul>
            <li>我是box兄弟的儿子,也是个无序列表(我不会加粗有背景颜色)</li>
        </ul>
    </div>
</body>

通用兄弟选择器示例

序号选择器

简单描述一下，序号选择器的使用：有序列表和无序列表或者是大量重复的相同标签，你想去设置其中一个的样式（让他变得特殊），你可以用什么方法，用之前我们说的那就是给它加一个类名，或者给个id然后去设置样式，那还有没有别的方法呢，你还可以使用序号选择器【当然，还是建议用类选择器，这个会涉及到一个性能问题】

例子	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	第n个子元素
:nth-of-type(n)	第n个某类型的子元素
:nth-last-child(n)	倒数第n个子元素

序号选择器-1（child）

这几个只能选子元素的有一个很重要的点，就是只能选上位置和类型同时满足的才会有效

🌰

:first-child

选择第一个子元素

  <style>
  .box p:first-child {
            color: blueviolet;
        }
   </style>
  <div class="box">
        <p class="g1">p1</p><!-- 被选中 -->
        <p class="g2">p2</p>
        <p class="g3">p3</p>
        <p class="g4">p4</p>
    </div>

:last-child

选择最后一个子元素

  <style>
        .box p:last-child {
            color: blueviolet;
        }
    </style>
  <div class="box">
        <p class="g1">p1</p>
        <p class="g2">p2</p>
        <p class="g3">p3</p>
        <p class="g4">p4</p><!-- 被选中 -->
    </div>

:nth-child(n)

选择第n个子元素

    <style>
        .box p:nth-child(3) {
            color: blueviolet;
        }
    </style>

    <div class="box">
        <p class="g1">p1</p>
        <p class="g2">p2</p>
        <p class="g3">p3</p><!-- 被选中 -->
        <p class="g4">p4</p>
    </div>

序号选择器-2（type）

:nth-of-type(n)

第n个某类型的子元素

    <style>
        .box p:nth-of-type(2) {
            color: blueviolet;
        }
    </style>
<body>
    <div class="box">
        <p class="g1">p1</p>
        <p class="g2">p2</p>
        <!-- 被选中 -->
        <p class="g3">p3</p>
        <p class="g4">p4</p>
    </div>
</body>

在这里插入图片描述

补充说明-选择奇or偶

我们是可以利用序号选择器进行奇偶元素的选择的。
🌰

    <style>
        .box p:nth-child(2n+1) {
            /* 奇数位的元素被选中 */
            color: blueviolet;
        }
    </style>

序号元素选择奇数位元素
可以去了解下兼容性ao~

属性选择器

属性选择器就是通过选中属性（属性值）从而选择标签
【属性选择器一半是对应着特殊标签或者说是元素的，比如说图片img标签】

CSS3新增伪类

伪类	意思
:empty	选择空标签
:focus	选择当前获得焦点表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已勾选的单按钮或是复选框
:root	选择根元素,html标签

-这里就不具体说了，来一个好玩的例子
🌰【改变你的高亮部分颜色】

    <style>
        p::selection {
            background: rgb(107, 157, 204);
        }
    </style>

<body>
    <div class="box">
        <p class="g1">111111111111</p>
    </div>
</body>

改变高亮颜色

酱酱~伪元素天生是行内元素ao！！！

总结

其实，看上去CSS3的选择器有很多，但实际上很多都不怎么会用到，选择器这一部分要极其注意类选择器和id选择器。id选择器一般是会结合着事件监听使用的(DOM，BOM)，而类选择器的使用一般是在设置样式时。设置样式时不是很推荐使用标签选择器，这可能会影响网页加载速度（回流重绘上）

拖拉机本拉基

关注

6
点赞
踩
37

收藏

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

CSS选择器简单介绍一下CSS选择器在 CSS 中，选择器是选取需设置样式的元素的模式。传统CSS 2.1选择器标签选择器 id选择器 class选择器（类选择器）复合选择器伪类CSS 3新增选择器元素关系选择器序号选择器属性选择器 CSS 3新增伪类伪元素标签选择器标签选择器也称为元素选择器、类型选择器，它直接使用元素的标签名当作选择器，将选择页面上所有该种标签。标签选择器将选择页面上所有的该种标签，无论这个标签所处的位置的深浅。标签选择
复制链接

扫一扫