学习笔记
- 基本选择器
- ID选择器
- 组合选择器
- 后代选择器
- 子选择器
- 兄弟选择器
基本选择器
之前文章使用的分别为元素选择器和类选择器，这里不再过多记录。
- 元素选择器
p {
color: blue;
font-size: 14px;
}
在这个例子中，所有的<p>元素的文本颜色将被设置为蓝色，字体大小为 14 像素
- 类选择器
.highlight {
color: green;
background-color: yellow;
}
这个例子中，只有具有 highlight 类的段落元素的文本颜色将被设置为绿色，背景颜色为黄色；而没有这个类的段落元素将不受影响。
通过class="类名称"的方式使用。
ID选择器
ID 选择器通过 HTML 元素的 id 属性来选择特定的一个元素。在一个 HTML 页面中，每个 id 值都应该是唯一的。
语法示例：
HTML语法如下：
<body>
<p id="id01">这是一个使用id选择器设置的段落</p>
</body>
CSS中定义id选择器：使用#加名称的格式
#id01 {
color: blue;
font-size: 20px;
}
展示效果：
示例：网页导航栏
HTML代码：
<body>
<nav id="mainNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
CSS ID选择器定义：
#mainNav {
background-color: #333;
color: #fff;
}
#mainNav ul li {
display: inline-block;
margin-right: 20px;
}
展示效果：
组合选择器
后代选择器
后代选择器允许你选择作为某一元素后代的元素。这意味着你可以选择嵌套在特定元素内部的其他元素进行样式设置。
ID选择器中示例：网页导航栏中的#mainNav ul li就是一个后代选择器。
#mainNav ul li表示选择具有id="mainNav"的元素内部的<ul>元素的后代<li>元素。
子选择器
子选择器用于选择直接作为某一元素子元素的元素。与后代选择器不同，它只选择直接的子元素，而不包括后代中的后代元素。
示例：
HTML代码：
<body>
<div id="parent">
<h2>Parent Heading</h2>
<p>Some text in parent.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
</body>
CSS选择器定义：
#parent {
background-color: black;
color: white;
}
#parent > h2 {
color: red;
font-size: 30px;
}
#parent > ul > li {
color: green;
}
展示效果：
定义一个id选择器：设置背景颜色为黑色，字体颜色为白色。
定义一个子选择器#parent > h2，设置文本颜色为红色，字体为30px。
定义一个子选择器#parent > ul > li设置文本颜色为绿色，释义为选择具有id="parent"的元素的直接子元素<ul>的直接子元素 <li>。
子选择器只选择直接的子元素，不会选择后代元素中的更下层元素。比如，如果在<ul>里面还有其他嵌套的元素，#parent > ul > li只会选择直接在<ul>下的<li>元素，而不会选择嵌套在其他元素里面的<li>元素。
兄弟选择器
兄弟选择器用于选择与特定元素有相同父元素的其他元素。
兄弟选择器分为临近兄弟选择器和通用兄弟选择器。
一、临近兄弟选择器
临近兄弟选择器使用 “+” 符号连接两个选择器，表示选择紧跟在指定元素后面的第一个兄弟元素。
示例：
HTML代码：
<body>
<h2>Heading</h2>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
</body>
CSS代码：
h2 + p {
color: blue;
}
展示效果：
二、通用兄弟选择器
通用兄弟选择器使用 “~” 符号连接两个选择器，表示选择指定元素后面的所有兄弟元素。
示例：
HTML代码：
<body>
<h2>Heading</h2>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
</body>
CSS代码：
h2 ~ p {
color: blue;
}
展示效果：
![[RabbitMQ] RabbitMQ介绍,安装与快速上手](https://i-blog.csdnimg.cn/direct/0cd02bc8a0154fb4b3beeb2b680984dc.png)
