CSS学习随笔一之选择器介绍

CSS 选择器是用于选择页面中元素的方法。CSS选择器可以基于元素名、属性、类、ID 等来选择元素，并应用样式。

以下是一些常用的CSS选择器：

1. 元素选择器：选择特定类型的HTML标签。

p { color: blue; } /* 选择所有<p>元素 */

2. 类选择器：选择具有特定类的HTML元素。

.my-class { background-color: yellow; } /* 选择所有class包含"my-class"的元素 */

3. ID选择器：选择具有特定ID的HTML元素。

#my-id { font-weight: bold; } /* 选择id为"my-id"的元素 */

4. 属性选择器：选择包含特定属性的HTML元素。

input[type="text"] { border: 1px solid black; } /* 选择所有type为"text"的<input>元素 */

5. 伪类选择器：选择特定状态的HTML元素。

a:hover { text-decoration: underline; } /* 鼠标悬停时给链接添加下划线 */

6. 伪元素选择器：选择特定位置的内容。

p::first-letter { font-size: 200%; } /* 给<p>元素的首字母设置更大的字号 */

7. 子代选择器：选择指定父元素的直接子元素。

div > p { color: red; } /* 选择所有<div>的直接子元素<p> */

8. 相邻选择器：选择紧跟在另一个元素后的元素，并且二者有相同的父元素。

p + div { margin-top: 20px; } /* 选择紧跟在<p>元素后的第一个<div>元素 */

9. 后代选择器：选择特定父元素的后代（不仅限子元素）。

div p { color: green; } /* 选择所有<div>的后代<p> */

10. 通配选择器：选择页面中的所有元素。

* { cursor: pointer; } /* 给页面中的所有元素设置鼠标指针样式 */

以上是一些基础的CSS选择器，实际应用中可以根据需要组合使用这些选择器，以实现更复杂的样式规则。