CSS——选择器的使用

Bonsoir777

已于 2022-09-20 08:52:50 修改

阅读量2k

点赞数 2

于 2022-07-12 17:36:21 首次发布

本文链接：https://blog.csdn.net/Bonsoir777/article/details/125747367

版权

css/css3 同时被 2 个专栏收录

32 篇文章 2 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

文章目录

前言
一、什么是选择器
二、常用选择器
- 1.其他选择器
- 2.属性选择器
- 3.伪类选择器
总结

前言

本文主要介绍了CSS中选择器的使用方法。

一、什么是选择器？

<style>

.box{

width: 100px;

height: 100px;

background-color: #bfa;

}

</style>

</head>

<body>

<div class="box">

</div>

</body>

如上图所示，通过以上语句实现的这样一个结果就是选择的使用，（这里所使用的选择器就是 div）。div为选择器后面的一大部分为声明块

那么什么是选择器与声明块呢？

选择器：通过选择器选中页面中的指定元素，例如div的作用就是选中页面中的所有div 元素，如果选择器中有元素选择器，元素选择器必须放在前面

声明块：通过声明块为元素设置样式，声明块由一个一个的声明组成，声明是一个名值对结构，一个样式名对应一个样式值，名和值之间用英文冒号连接，以英文分号结尾

二、常用选择器

1、其他选择器

元素选择器：通过标签名来选中指定的元素，语法标签名{} 例如，p{}选中页面中的所有p 元素
ID选择器，根据元素的id 属性选中一个元素，语法 #id属性值{} 例如,#box{]，#red{}
类（class）选择器，可选中一组元素语法 .class属性值,可以同时为一个元素指定多个class属性，之间用空格隔开
通配选择器，选中页面中的所有元素语法 *{}
交集选择器：同时复合多个条件的元素语法：选择器1.选择器2.选择器3.选择器n{}
(选择器分组)并集选择器：同时选择多个选择器对应的元素语法：选择器1，选择器2，选择器3，选择器n{}
子元素选择器：选中指定父元素的指定子元素语法：父元素>子元素{}
祖先选择器语法祖先（空格）子孙
选择下一个兄弟语法前一个 + 下一个
选择下边所有兄弟元素语法兄 ~弟

2、属性选择器

[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*= 属性值]选择属性值中含有某值的元素的元素

如下例句中，选择器的作用就是将属性值以abc开头的语句字体颜色设置为橘色。

p[title^=abc]{

color:orange;

}

</style>

</head>

<body>

<p title="abc">少小离家老大回</p>

<p title="abcdef">少小离家老大回</p>

3、伪类选择器

伪类(不存在的类，特殊的类)，用来描述一个元素的特殊状态，比如，第一个子元素，被点击的元素，鼠标移入的元素…… 伪类一般情况下都是使用 : 开头

: first-child 第一个元素，若前面无元素选择器则表示选中整个页面（这就利用到样式的继承，在下一节会讲到）
: last-child 最后一个元素
: nth-child() 选中第n个子元素

特殊值：

n 第n个的范围0到正无穷
2n或even表示选中偶数位的元素
2n+1 或odd表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序

：first-of-type
: last-of-type
:nth-of-type()

这几个伪类的功能和上述类似，不同点是他们是在同类型元素中进行排序

：not()否定伪类，将符合条件的元素从选择器中去除

伪元素

伪元素：表示页面中一些;特殊的并不真实存在的元素（特殊的位置）伪元素使用 ::开头

::first-letter表示第一个字母
::first-line表示第一行
::selection 表示选中的内容

::before 元素的开始

例如 p::before{

content: '你好'；就会在P段落前添加你好，且添加的文字是不会被选中

}

::after 元素的结束

before和after必须结合content属性来使用

总结

今天的博客就写到这里了，主要是介绍了CSS选择器的常用方法，希望能够帮助到你吧……