【复习】CSS中的选择器

东西有点多 以实战为主

选择器

CSS选择器（CSS Selectors）是用于在HTML或XML文档中查找和选择元素，以便应用CSS样式的一种方式。

1. 元素选择器（Type Selector）
   选择所有指定类型的HTML元素。

p {  
    color: blue;  
}

这会将所有<p>元素的文字颜色设置为蓝色。

2. 类选择器（Class Selector）
   选择所有具有指定类名的元素。类选择器前面有一个点号（.）。

.myClass {  
    font-size: 20px;  
}

这会将所有具有class="myClass"的元素的字体大小设置为20像素。

3. ID选择器（ID Selector）
   选择具有指定ID的元素。ID选择器前面有一个井号（#）。ID在页面中应该是唯一的。

#myId {  
    background-color: yellow;  
}

这会将ID为myId的元素的背景颜色设置为黄色。

4. 属性选择器（Attribute Selector）
   选择具有指定属性的元素。

a[href] {  
    color: green;  
}

这会将所有具有href属性的<a>元素的文字颜色设置为绿色。

5. 后代选择器（Descendant Selector）
   选择作为某个元素后代的所有指定元素。

div p {  
    color: red;  
}

这会将所有在<div>元素内部的<p>元素的文字颜色设置为红色。

6. 子选择器（Child Selector）
   选择作为某个元素直接子元素的所有指定元素。

ul > li {  
    list-style: none;  
}

这会将所有直接作为<ul>元素子元素的<li>元素的列表样式移除。

7. 相邻兄弟选择器（Adjacent Sibling Selector）
   选择紧接在另一个元素后的指定元素。

h1 + p {  
    margin-top: 0;  
}

这会将紧接在<h1>元素后的<p>元素的上边距设置为0。

8. 通用选择器（Universal Selector）
   选择所有元素。通用选择器是一个星号（*）。

* {  
    margin: 0;  
    padding: 0;  
}

这会将所有元素的边距和内边距设置为0。

9. 伪类选择器（Pseudo-classes Selector）
   选择元素的特定状态。

a:hover {  
    color: orange;  
}

这会将鼠标悬停在<a>元素上时，其文字颜色设置为橙色。

10. 伪元素选择器（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内线围成的大小