常见的基础选择器有哪些类型

K-seo • 2024-02-04 00:33 • 行业资讯 • 153 views

在Web开发中，CSS选择器是用于选取HTML元素并对其应用样式的一种模式，基础的选择器是构建复杂选择器的基础，它们包括以下几种：

元素选择器

元素选择器可能是最简单直接的选择器类型，它允许你根据元素名称来选取特定的HTML元素。p选择器将会选取页面上所有的<p>（段落）元素。

p {
    color: blue;
}

上述代码会将页面上所有段落文本的颜色设置为蓝色。

类选择器

类选择器通过元素的class属性来选取元素，类选择器使用一个点（.）开头，后面紧跟类名。.myClass选择器将选取所有class属性包含myClass的元素。

.myClass {
    background-color: yellow;
}

这段代码将会给所有class属性中含有myClass的元素设置黄色背景色。

ID选择器

ID选择器通过元素的id属性来选取特定的元素，每个页面中的id值应该是唯一的，所以ID选择器通常用于选取单一的元素，ID选择器使用一个井号（）开头，后面跟着id值。uniqueID选择器将只选取id为uniqueID的那个元素。

uniqueID {
    border: 2px solid red;
}

以上代码将为id为uniqueID的元素添加红色边框。

组合选择器

组合选择器允许你同时针对多个选择器进行样式设置，这可以通过逗号（,）将不同的选择器分隔开来实现。

h1, h2, h3 {
    color: green;
}

上面的代码将使所有<h1>、<h2>和<h3>的文本颜色变为绿色。

后代选择器

后代选择器用来选取特定元素的所有后代元素，它通过空格来分隔父元素和子元素。div p将选取所有<div>元素内的<p>元素。

div p {
    font-style: italic;
}

这段代码会将所有<div>元素内的<p>元素字体设置为斜体。

子元素选择器

子元素选择器与后代选择器相似，但是它仅选取直接子元素，它使用大于号（>）来指定关系。div > p将只选取直接作为<div>子元素的<p>元素。

div > p {
    text-decoration: underline;
}

上述代码将仅对直接位于<div>下的第一个层级的<p>元素应用下划线。

属性选择器

属性选择器可以根据元素的属性或属性值来选取元素。input[type="text"]将选取所有type属性为“text”的<input>元素。

input[type="text"] {
    border: 1px solid black;
}

以上代码会给所有文本输入框添加黑色边框。

伪类选择器

伪类选择器用于选取元素在特定状态下的样式，如鼠标悬停状态或者被点击的状态，常见的伪类选择器包括:hover、:active、:focus等。

a:hover {
    color: purple;
}

这段代码会在鼠标悬停在链接上时改变其文本颜色为紫色。

伪元素选择器

伪元素选择器用于选取元素的一部分，如首行或者首字母，常用的伪元素选择器有::first-letter和::first-line。

p::first-letter {
    font-size: 200%;
}

以上代码会使得每个段落的首字母字体大小为原始大小的两倍。