CSS选择器
大家都知道在css中我们可以美化html元素的样式,那么我们该怎么选择要美化样式的html元素呢?这时候就要提到css选择器了,css选择器的种类很多,常用的css选择器分为三种:1、基本选择器。2、伪元素选择器。3、伪类选择器。
一 基本选择器
在CSS中,基本选择器是用于选择HTML文档中所有匹配指定条件的元素的选择器。以下是一些常见的基本选择器:
1 元素选择器
元素选择器通过元素的标签名来选择元素。例如,选择所有段落元素可以使用p选择器:
p {
/*css样式*/
}
元素选择器中的特例为 *{ } ,表示选择所有类型元素。
2 类选择器
类选择器通过元素的class属性值来选择元素。在HTML中,通过为元素添加class属性,并在CSS中使用“.”符号来表示类选择器。例如,选择class为"example"的元素:
.example {
/* CSS样式 */
}
元素选择器与class选择器结合时没有空格,元素定义时多类名用空格隔开。如下:
div .example {
/* CSS样式 */
}
.example .box{
/* CSS样式 */
}
3 ID选择器
ID选择器通过元素的id属性值来选择元素。在HTML中,通过为元素添加唯一的id属性,并在CSS中使用 # 符号来表示ID选择器。例如,选择id为"header"的元素:
#header {
/* CSS样式 */
}
4 属性选择器
通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。ID选择器可以看作属性选择器的一种。
例如选择类型为button的<input>元素:
input[type = "button"]{
/* CSS样式 */
}
其中等号“=”为严格等于,其余运算符还有:1、“^=”:表示前缀。2、“$=”:表示后缀。3、“*=”:表示包含。通过使用不同运算符可以匹配的多个属性。
5 后代选择器
后代选择器通过元素的嵌套关系来选择元素。使用空格来分隔两个元素,表示选择第一个元素内部的所有第二个元素。例如,选择所有div内部的span元素:
div span {
/* CSS样式 */
}
6 子元素选择器
子元素选择器是CSS中的一种选择器,用于选择某个元素的直接子元素。子元素选择器使用大于号(>)来表示,它只会选择作为指定元素的直接子元素的元素,而不会选择更深层次的后代元素。
如下所示:
<div class="parent">
<p>子元素1</p>
<div>
<p>子元素2</p>
</div>
</div>
.parent > p {
/* CSS样式 */
}
在上面的示例中,只有<p>子元素1</p>会被选中,而<p>子元素2</p>不会被选中,因为它是.parent元素的间接子元素而不是直接子元素。
7 兄弟选择器
兄弟选择器分为通用兄弟选择器和紧邻兄弟选择器。
通用兄弟选择器用波浪号(~)表示,用于选择指定元素后面的所有兄弟元素(具有共同父级元素)。
紧邻兄弟选择器用加号(+)表示,用于选择紧接在指定元素后面的第一个兄弟元素。
如下为html元素,
<h2>标题1</h2>
<p>段落1</p>
<h3>标题2</h3>
<p>段落2</p>
选择h2后的所有p标签:
h2 ~ p {
/*CSS样式*/
}
选择h2后的第一个p标签:
h2 + p {
/*CSS样式*/
}
注意只能向下查找兄弟,无法向上查找。
8 选择器组合
如果想让两种不同元素具有相同的样式,那么就可以使用选择器组合进行实现:h2, p {color:gray;}
。效果为使h2元素和p元素中的颜色变为灰色。选择器组合通过 “,” 实现,可以将任意选择器组合到一起,没有数量限制,这样可以得到更简洁的样式表。
二 伪元素选择器
伪元素选择器(Pseudo-element Selector)是CSS中用于选择元素的特定部分或位置的选择器。伪元素选择器以双冒号(::)开头,用于向元素的特定部分添加样式,而不需要在HTML中添加额外的标记。
以下是一些常见的伪元素选择器:
1 首字符伪元素选择器 ::first-letter{}
“::first-letter”伪元素用于选择指定元素的第一个字母。例如设置段落的第一个字母为大写。
p::first-letter {
font-size: 150%;
}
2 首行伪元素选择器 ::first-line
“::first-line”伪元素用于选择指定元素的第一行文本。
例如设置段落的第一行文本为粗体
p::first-line {
font-weight: bold;
}
3 自定义内容前置伪元素选择器 ::before
“::before”伪元素用于在指定元素的内容之前插入内容。
例如在每个<p>元素前插入内容“author: ”
p::before {
content: "author: ";
}
4 自定义内容后置伪元素选择器 ::after
“::after”伪元素用于在指定元素的内容之后插入内容。
例如在每个链接后面插入箭头符号“➜”
a::after {
content: " ➜";
}
三 伪类选择器
伪类选择器(Pseudo-class Selector)是CSS中用于选择处于特定状态的元素的选择器。伪类选择器以冒号(:)开头,用于为元素在特定状态下应用样式,例如鼠标悬停、被点击、被选中等状态。
以下是一些常见的伪类选择器:
1 结构性伪类选择器
(1):nth-child()
“:nth-child()”伪类选择器用于选择父元素的特定位置的子元素。括号内参数可以说数字、公式以及odd(奇数)、even(偶数)。
例如选择<ul>中的第一个元素<li>:
ul:nth-child(1) {
/*CSS样式*/
}
:nth-child(1)等价于:first-child 选择第一个元素。
(2) :nth-last-chlid()
与:nth-child类似,:nth-last-child()的参数也可以是数字、公式、odd、even,区别为:nth-last-child()从后向前选择。
:nth-last-child(1)等价于:last-child 选择最后一个元素。
(3):nth-of-type()
:nth-of-type() 伪类选择器用于选择父元素下特定类型的子元素。它允许您选择同一类型的元素中的第几个元素,而不管这些元素是父元素的第几个子元素。参数同上,也可以为数字、公式、odd、even。
例如要选择 ul 元素下的第三个 li 元素,可以使用以下 CSS 代码:
li:nth-of-type(3) {
/*CSS样式*/
}
:nth-of-type(1)等价于:first-of-type选择第一个对应类型元素。
(4):nth-last-of-type()
同理,与:nth-of-type()类似,:nth-last-of-type()的参数也可以是数字、公式、odd、even,区别为:nth-last-of-type()从后向前选择。
:nth-last-of-type等价于:last-of-type选择最后一个对应类型元素。
2 UI状态伪类选择器
(1):hover
“:hover” 伪类选择器用于选择鼠标悬停在元素上时的状态。
示例:鼠标悬停在链接上时改变颜色:
a:hover {
color: red;
}
(2):focus
“:focus” 伪类选择器用于选择元素获得焦点时的状态。
示例:输入框获得焦点时添加边框样式:
input:focus {
border: 1px solid blue;
}
(3) :checked
“:checked” 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)。
示例:为所有选中的输入元素设置宽度高度:
input:checked {
height: 50px;
width: 50px;
}
(4) :disabled
“:disabled” 选择器匹配每个禁用的的元素(主要用于表单元素)。
示例:设置所有type="text"的禁用的输入元素的背景颜色:
input[type="text"]:disabled
{
background:#dddddd;
}
3 其他伪类选择器
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。
示例:为每个并非
元素的元素设置背景颜色:
:not(p)
{
background:#ff0000;
}
选择器优先规则
在CSS中,选择器的优先级决定了样式规则的应用顺序。当多个选择器同时应用于同一个元素时,CSS会根据选择器的优先级来确定应用哪个样式规则。CSS选择器的优先级从高到低依次为:
- 1!important:使用 !important 标记的样式具有最高的优先级,会覆盖其他样式规则。
- 2 内联样式:直接在 HTML 元素的 style 属性中定义的样式具有较高的优先级。
- 3 ID 选择器:通过 ID 选择器选择的元素具有较高的优先级。
- 4 类选择器、属性选择器、伪类选择器:通过类选择器、属性选择器或伪类选择器选择的元素具有一般的优先级。
- 5 元素选择器、伪元素选择器:通过元素选择器或伪元素选择器选择的元素具有较低的优先级。
- 6 通用选择器:通用选择器*{ }优先级最低。
结语
本文介绍了CSS中常用的各种选择器及其使用方法以及选择器的优先规则,如有争议,欢迎大佬们讨论。