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

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

元素选择器

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

css

p {

    color: red;

}

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

2. 类选择器

 

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

css

.myClass {

    font-size: 20px;

}

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

3. ID 选择器

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

css

#myID {

    background-color: yellow;

}

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

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

4. 属性选择器

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

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

```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 元素。