【复习】CSS中的选择器
文章目录
- 东西有点多 以实战为主
- 选择器
- 盒子模型
东西有点多 以实战为主
选择器
CSS选择器（CSS Selectors）是用于在HTML或XML文档中查找和选择元素，以便应用CSS样式的一种方式。
- 元素选择器（
Type Selector）
选择所有指定类型的HTML元素。
p {
color: blue;
}
这会将所有<p>元素的文字颜色设置为蓝色。
- 类选择器（
Class Selector）
选择所有具有指定类名的元素。类选择器前面有一个点号（.）。
.myClass {
font-size: 20px;
}
这会将所有具有class="myClass"的元素的字体大小设置为20像素。
- ID选择器（
ID Selector）
选择具有指定ID的元素。ID选择器前面有一个井号（#）。ID在页面中应该是唯一的。
#myId {
background-color: yellow;
}
这会将ID为myId的元素的背景颜色设置为黄色。
- 属性选择器（
Attribute Selector）
选择具有指定属性的元素。
a[href] {
color: green;
}
这会将所有具有href属性的<a>元素的文字颜色设置为绿色。
- 后代选择器（
Descendant Selector）
选择作为某个元素后代的所有指定元素。
div p {
color: red;
}
这会将所有在<div>元素内部的<p>元素的文字颜色设置为红色。
- 子选择器（
Child Selector）
选择作为某个元素直接子元素的所有指定元素。
ul > li {
list-style: none;
}
这会将所有直接作为<ul>元素子元素的<li>元素的列表样式移除。
- 相邻兄弟选择器（
Adjacent Sibling Selector）
选择紧接在另一个元素后的指定元素。
h1 + p {
margin-top: 0;
}
这会将紧接在<h1>元素后的<p>元素的上边距设置为0。
- 通用选择器（
Universal Selector）
选择所有元素。通用选择器是一个星号（*）。
* {
margin: 0;
padding: 0;
}
这会将所有元素的边距和内边距设置为0。
- 伪类选择器（
Pseudo-classes Selector）
选择元素的特定状态。
a:hover {
color: orange;
}
这会将鼠标悬停在<a>元素上时，其文字颜色设置为橙色。
- 伪元素选择器（
Pseudo-elements Selector）
选择元素的一部分内容。
p::first-line {
font-weight: bold;
}
这会将每个<p>元素的第一行文字设置为粗体。
组合选择器（Combinator Selectors）
你还可以组合使用选择器，以实现更复杂的选择规则：
群组选择器（Grouping Selector）：使用逗号（,）分隔多个选择器，以应用相同的样式。
h1, h2, h3 {
font-family: Arial, sans-serif;
}
否定选择器（Negation Pseudo-class）：选择不符合特定条件的元素。
:not(.myClass) {
color: gray;
}
这会将所有不具有class="myClass"的元素的文字颜色设置为灰色。
盒子模型
网页右键检查，查看盒子模型
margin—外边距
如下图的盒模型所示的位置，margin是盒模型最外面一层的空间区域，可自定义设置上下左右大小，一般看不见，但确实存在，用于排布元素与其他元素的间隔距离。
border—边框
如下图的盒模型所示的位置，border是可以用设置{border: 1px solid red}样式看到的，也是盒模型的组成中唯一可以明显看到大小的一项，是视觉上可以看到的元素的大小。
padding—内边距
如下图的盒模型所示的位置，内边距padding和外边距一样也是看不到但真实存在的元素中的空间组成部分，用于设置元素的边界和内容content之间的距离。
content—内容
如下图的盒模型所示的位置，padding里面的部分是内容content，是元素里面的文字或者其他元素内容。其大小也是视觉上看不到的，若padding值为0时，内容大小是border内线围成的大小
