css基础

1.css选择器！

CSS样式是总用于HTML元素上的，既然如此，那么在使用CSS的时候就需要选中要对其进行作用的HTML元素是什么？完成这个功能的是选择器。

1. 元素选择器
2. 类选择器
3. ID选择器
4. 属性选择器
5. 后代选择器
6. 子元素选择器
7. 伪类选择器
8. 伪元素选择器
9. 组合选择器

1.元素选择器

选择所有特定类型的 HTML 元素

 
div {
    /* 样式规则 */
}

2.类选择器

选择带有特定类名的元素。

.my-class {
    /* 样式规则 */
}

3.ID选择器

选择带有特定ID的元素。

 
#my-id {
    /* 样式规则 */
}

4.属性选择器

选择带有特定属性的元素

 
input[type="text"] {
    /* 样式规则 */
}

5.后代选择器

选择某个元素的后代元素

 
div p {
    /* 选择 div 元素内的所有 p 元素 */
}

6.子元素选择器

选择某个元素的直接子元素

 
ul > li {
    /* 选择 ul 元素的直接子元素 li */
}

7.伪类选择器

选择元素的特殊状态，例如鼠标悬停、访问过的链接等

 
a:hover {
    /* 鼠标悬停在链接上时的样式 */
}

8.伪元素选择器

选择元素的特殊部分，例如元素的第一个字母、最后一个行等

 
p::first-line {
    /* 选择 p 元素的第一行 */
}

9.组合选择器

组合不同的选择器，以选择更特定的元素。

并集选择器：

选择多个选择器匹配的所有元素。

 
h1, h2, h3 {
    /* 应用于 h1、h2、h3 元素 */
}

交集选择器：

选择同时满足多个选择器的元素。

 
div.my-class {
    /* 选择 class 为 my-class 的 div 元素 */
}

结束！