CSS选择器详解：类选择器、ID选择器、元素选择器与通配符选择器

"本文主要介绍了CSS中的四种常用选择器：类选择器、ID选择器、HTML元素选择器和通配符选择器，并提供了相应的使用方法和案例。" 1、类选择器（class选择器） 类选择器是通过在HTML元素中设置`class`属性来指定的。使用时，在CSS中以`.`开头，后面跟着类名。类选择器可以应用于多个元素，允许你为具有相同类名的元素定义相同的样式。例如，以下代码定义了一个名为`s1`的类，设置了背景颜色、字体加粗、字体大小和文字颜色： ```css .s1 { background-color: pink; font-weight: bold; font-size: 16px; color: black; } ``` 2、ID选择器 ID选择器是通过在HTML元素中设置`id`属性来指定的。它在CSS中以`#`开头，用于唯一地标识一个元素。每个页面中，ID选择器只能应用一次。以下代码定义了一个名为`id1`的ID，设置了背景颜色和字体大小： ```css #id1 { background-color: silver; font-size: 40px; } ``` 3、HTML元素选择器 HTML元素选择器是最基础的选择器，直接使用HTML标签名称，如`a`, `p`等，可以为特定类型的元素设置样式。下面的示例展示了如何为`a`元素设置不同状态下的样式，以及为具有不同类名的`p`元素设置不同的字体颜色和大小： ```css a:link { color: black; text-decoration: none; font-size: 24px; } a:visited { color: red; } a:hover { color: green; text-decoration: underline; font-size: 40px; } p.cls1 { color: blue; font-size: 30px; } p.cls2 { color: red; font-size: 20px; } ``` 4、通配符选择器 通配符选择器使用`*`，适用于所有HTML元素。尽管它可以设置所有元素的基础样式，但由于其优先级最低，通常用于全局初始化或清除默认样式。例如，以下代码将所有元素的外边距设置为0： ```css * { margin: 0; padding: 0; } ``` 请注意，过度使用通配符选择器可能导致性能下降，因此建议仅在必要时使用。 在实际应用中，结合这些选择器可以创建复杂而精确的CSS样式规则，以实现网页设计的多样化需求。了解并熟练掌握这四种选择器的用法是CSS布局和设计的基础。