【CSS】各种选择器，CSS 入门必备知识-优快云博客

本文链接：https://blog.youkuaiyun.com/xudahai513/article/details/145036681

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

-----------CSS 代码-----------

    </style>
</head>
<body>

-----------HTML 代码-----------

</body>
</html>

注意：每个标题的第一个代码框是 HTML 代码，第二代码框是 CSS 代码。

1. 元素选择器（类型选择器）

HTML 元素的名称来选择元素

<p>黑口罩博客</p>

p {
    color: red;
}

2. 类选择器

通过 class 属性的值来选择元素。在 HTML 中，类可以为多个。类选择器以一个点“.”开头，后面跟着类名。

<p class="blog">黑口罩博客</p>
<p class="blog">白口罩博客</p>

.blog { 
    color: blue;
/* 文字大小20像素*/
    font-size:20px;
}

3. ID 选择器

id在 HTML 文档中应该是唯一的。ID 选择器以井号（#）开头，后面跟着id名。

<div id="msg">

#msg{
/*    长100像素；宽200像素；边框1像素，背景颜色为黄色*/
    width: 200px;
    height: 100px;
    border: 1px solid black;
    background: yellow;
}

4. 后代选择器

用于选择某个元素的后代元素，包括子元素、孙元素、曾孙元素等所有层级的后代，用空格分隔。

<div>
    <p>我是 div 的下一级（后代）</p>
</div>

div p {
    font - size: 14px;
}

如果<div>包含了多个<p>元素，这些<p>元素的都会被 CSS 设置。

5. 子元素选择器 `>` （父元素选择器 < ）

选择某个元素的直接子元素。使用大于号 “ > ” 来分隔父元素和子元素选择器。

<div class="parent">
    <p>这是直接子元素</p>
    <div>
        <p>这不是直接子元素（孙元素）</p>
    </div>
</div>

.parent > p {
    color: red;
}

6. 相邻兄弟选择器

选择紧挨着某个元素之后的兄弟元素。它使用加号 “+” 来连接两个选择器

<h1>我是 h1 元素</h1>
<p> 我是那个紧挨h1的p元素</p>
<p> 我是p元素</p>
<p> 我是p元素</p>
<p> 我是p元素</p>

h1 + p {
    margin - top: 10px;
}

7. 通用兄弟选择器

选择某个元素之后的所有兄弟元素。波浪号 “ ~ ” 来连接两个选择器

<h1>我是 h1 元素</h1>
<p> 我是那个紧挨h1的p元素</p>
<p> 我是p元素</p>
<p> 我是p元素</p>
<p> 我是p元素</p>

h1 ~ p {
    margin - top: 10px;
    color: red;
}

8. 属性选择器

根据元素是否具有某个属性或者属性的值来选择元素。格式：元素 [属性] { }

<a href="#">我的href带#哦</a>
<br>
<a href="" target="_blank">我的target有_blank</a>

a[href="#"] {
    color: red;
}

a[target="_blank"] {
    color: blue;
}

9. 伪类选择器

伪类是添加到选择器的关键字，用于指定元素的特殊状态。

:link：用于未访问的链接。
:visited：用于已访问的链接。
:hover：当鼠标悬停在元素上时生效。（最常用）
:active：当元素被激活（例如鼠标按下）时生效。
还有很多其他伪类，如:nth - child()（根据元素在父元素中的位置选择元素）、:first - child（选择父元素的第一个子元素）、:last - child（选择父元素的最后一个子元素）等。

a:hover {
    color: red;
}

说明：鼠标悬停在 <a> 链接上时文字变红色。

10. 伪元素选择器

伪元素用于创建一些不在文档树中的元素，并为它们添加样式。

::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。

<p>我是一个p</p>

p::before {
    content: ">> ";
    color: green;
}

<p> 元素内容之前插入 >>，并且颜色为绿色。