css九种选择器

CSS 是一种强大的样式定义语言，可以让我们轻松地改变网站的外观和布局。这篇文章将介绍 CSS 的九种选择器。

    定义样式 {
        属性1: 值1;
        属性2: 值2;
        属性3: 值3;
    }

css九种选择器

1. 元素选择器

    p {
        color: red;
        font-size: 18px;
    }

元素选择器可以针对指定的标签名应用样式。

2. ID 选择器

    #header {
        background-color: gray;
    }

ID 选择器可以针对指定的 ID 值应用样式。在 HTML 中，ID 是唯一的。

3. 类选择器

    .button {
        border: 1px solid blue;
    }

类选择器可以针对指定的类名应用样式。在 HTML 中，一个元素可以有多个类名。

4. 属性选择器

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

属性选择器可以针对指定的属性和属性值应用样式。

5. 子元素选择器

    ul > li {
        color: orange;
    }

子元素选择器可以针对指定元素的直接子元素应用样式。

6. 后代元素选择器

    div p {
        font-style: italic;
    }

后代元素选择器可以针对指定元素内的后代元素应用样式。

7. 相邻兄弟选择器

    h1 + p {
        color: purple;
    }

相邻兄弟选择器可以针对指定元素之后的第一个相邻兄弟元素应用样式。

8. 通用兄弟选择器

    p ~ p {
        font-weight: bold;
    }

通用兄弟选择器可以针对指定元素之后的所有兄弟元素应用样式。

9. 伪类选择器

    a:hover {
        text-decoration: underline;
    }

伪类选择器可以针对指定元素的特殊状态应用样式，如 :hover 表示鼠标悬停在元素上。

这就是 CSS 的九种选择器。通过正确地使用选择器，我们可以更好地控制网站的外观和布局。