css都有哪些选择器怎么使用

CSS 选择器是用于选择你想要样式化的 HTML 元素的模式。以下是一些主要的 CSS 选择器及其使用方式:

元素选择器

选择所有指定类型的元素。

css

p {

color: red;

}

这将选择所有的 <p> 元素,并将它们的文本颜色设置为红色。

  1. 类选择器

选择具有指定类的元素。类选择器以点(.)开头。

css

.myClass {

font-size: 20px;

}

在 HTML 中,你可以这样使用它:<div class="myClass">这是一个类为 myClass 的 div。</div>

  1. ID 选择器

选择具有指定 ID 的元素。ID 选择器以井号(#)开头。

css

#myID {

background-color: yellow;

}

在 HTML 中,你可以这样使用它:<div id="myID">这是一个 ID 为 myID 的 div。</div>

注意:ID 在页面上应该是唯一的。

  1. 属性选择器

选择具有指定属性的元素。

* 选择具有指定属性的元素:

```css

input[type="text"] {

width: 200px;

}

```

* 选择具有指定属性和值的元素:

```css

a[href="https://example.com"] {

color: blue;

}

```

* 选择属性值包含某个字符串的元素:

```css

a[href*="example"] {

font-weight: bold;

}

```

伪类选择器

选择 HTML 元素的特定状态。

* `:hover`:选择鼠标指针浮动在上面的元素:

```css

button:hover {

background-color: green;

}

```

* `:active`:选择被用户激活的元素(如鼠标点击并按住不放):

```css

button:active {

color: white;

}

```

* `:first-child`:选择属于其父元素的第一个子元素:

```css

p:first-child {

color: purple;

}

```

* `:last-child`、`:nth-child()`、`:nth-last-child()` 等也是常见的伪类选择器。

伪元素选择器

选择元素的特定部分,并为其添加样式。

* `::before`:在元素内容之前插入内容:

```css

p::before {

content: "Read this - ";

color: blue;

}

```

* `::after`:在元素内容之后插入内容:

```css

p::after {

content: " - End";

color: red;

}

```

以上只是 CSS 选择器的一部分。实际上,CSS 还提供了许多其他选择器,如组合选择器(如逗号分隔的选择器组、后代选择器、子选择器、相邻兄弟选择器和一般兄弟选择器)等。这些选择器可以帮助你更精确地选择并样式化 HTML 元素。

相关推荐
深蓝电商API17 小时前
网页结构解析入门:HTML、CSS、JS 与爬虫的关系
javascript·css·html
Python私教20 小时前
React 19 如何优雅整合 Ant Design v5 与 Tailwind CSS v4
前端·css·react.js
汤姆Tom21 小时前
写这么多年CSS,都不知道什么是容器查询?
前端·css·面试
曦曜29221 小时前
聊聊前端静态页面的开发
css·html
向葭奔赴♡1 天前
CSS是什么?—— 网页的“化妆师”
前端·css
银安2 天前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
wsWmsw2 天前
[译] 浏览器里的 Liquid Glass:利用 CSS 和 SVG 实现折射
前端·css·svg
银安2 天前
CSS排版布局篇(2):文档流(Normal Flow)
前端·css
折翼的恶魔2 天前
前端学习之样式设计
前端·css·学习
街尾杂货店&2 天前
css word-spacing属性
前端·css