在Web开发中,选择器是用来选择指定 HTML 元素的一种工具。通过选择器,我们可以精确地选取需要操作的元素,并对其进行样式、事件等各种操作。
元素选择器
元素选择器是最基本的一种选择器,它根据元素的标签名来选择 HTML 元素,并可以为选择的元素设置样式。例如,下面这段样式代码将应用到页面中所有的 h1 标签元素上:
h1 {color: red;
}
类选择器
类选择器是根据元素的 class 属性来选择 HTML 元素的一种选择器。类选择器以 “.” 符号作为标识符,接着是类名。例如,下面这段样式代码将应用到拥有 class=“my-class” 属性的所有元素上:
.my-class {font-size: 14px;
}
ID选择器
ID 选择器是根据元素的 id 属性来选择 HTML 元素的一种选择器。ID 选择器以 “#” 符号作为标识符,接着是 ID 名称。与类选择器不同的是,一个页面中只能有一个相同的 ID,所以 ID 选择器只能用于选择唯一的元素。例如,下面这段样式代码将应用到 id=“my-id” 的元素上:
#my-id {background-color: yellow;
}
属性选择器
属性选择器是根据元素的属性来选择 HTML 元素的一种选择器。它可以根据元素的属性名和属性值进行选择,并可以使用各种操作符进行匹配。例如,下面这段样式代码将应用到拥有 alt=“logo” 属性的所有 img 元素上:
img[alt="logo"] {border: 1px solid gray;
}
后代选择器
后代选择器可以选择一个元素的后代元素,即嵌套在该元素内的其他元素。后代选择器用空格分隔两个选择器,例如,下面这段样式代码将应用到 div 元素内所有 p 元素上:
div p {font-weight: bold;
}
子元素选择器
与后代选择器类似,子元素选择器也可以选择一个元素的后代元素,但是它只选择该元素的直接子元素,而不是后代元素。子元素选择器使用 “>” 符号分隔两个选择器,例如,下面这段样式代码将应用到 ul 元素内直接子元素 li 元素上:
ul > li {list-style-type: none;
}
兄弟选择器
兄弟选择器可以选择元素的相邻兄弟元素,即和该元素在同一层次的其他元素。兄弟选择器使用 “~” 符号分隔两个选择器,例如,下面这段样式代码将应用到 id=“first” 元素之后的所有 p 元素上:
#first ~ p {color: blue;
}
通配符选择器
通配符选择器是 CSS 中最基础、最简单的一种选择器,使用星号 (*) 表示,可以匹配所有的 HTML 元素。通配符选择器可以覆盖页面中所有元素,因此使用时需要谨慎,否则可能会影响到整个页面的样式。
通常情况下,我们可以将通配符选择器用于设置全局样式,例如:
* {margin: 0;padding: 0;
}
这段代码将会将页面中所有元素的内外边距都设为 0,从而清除默认样式,以便更好地进行自定义样式。
需要注意的是,由于通配符选择器会匹配到所有元素,因此其效率相比其他选择器会稍低,尤其是当页面中包含大量元素时。因此,应该尽量避免在选择器中过度使用通配符选择器,以提高 CSS 渲染性能。