CSS 选择器全面指南

CSS 选择器是开发者最基本和重要的技能之一。它们允许我们精确地选择和样式化 HTML 元素。在本文中,我们将深入探讨 CSS 选择器的各种类型及其用法。

元素选择器

元素选择器使用 HTML 标签名称作为选择器,比如 "h1"、"p"、"div" 等。它是最简单的选择器,但也是最基本的。

h1 { 
  fontsize: 32px;
  color: 333;
}

类选择器

类选择器使用 "." 符号后跟类名来选择元素。类可以应用于任何 HTML 元素,并且一个元素可以有多个类。

.highlight {
  backgroundcolor: yellow;
  fontweight: bold;
}

ID 选择器

ID 选择器使用 "" 符号后跟 ID 名来选择元素。ID 应该是唯一的,一个页面中只能有一个元素拥有特定的 ID。

mainheading {
  fontsize: 48px;
  textalign: center;
}

后代选择器

后代选择器用于选择作为某元素后代的所有元素,不论嵌套层级有多深。使用空格分隔父元素和后代元素。

div p {
  lineheight: 1.5;
  marginbottom: 10px;
}

子选择器

子选择器用于选择作为某元素直接子元素的所有元素,使用 ">" 符号分隔父元素和子元素。

ul > li {
  liststyletype: none;
}

相邻兄弟选择器

相邻兄弟选择器用于选择紧跟在某元素后的同级元素,使用 " " 符号分隔。

h2   p {
  fontstyle: italic;
}

通用兄弟选择器

通用兄弟选择器用于选择跟在某元素后的所有同级元素,不论元素之间有多少空格,使用 "~" 符号分隔。

h2 ~ p {
  color: 666;
}

属性存在选择器

属性存在选择器用于选择具有指定属性的元素,使用 "[]" 括起属性名。

a[target] {
  color: 0077b6;
}

属性值选择器

属性值选择器用于选择具有指定属性值的元素,在属性名后面添加 "=value"。

input[type="email"] {
  border: 1px solid ccc;
}

部分属性值选择器

部分属性值选择器用于选择属性值中包含指定字符串的元素,使用 "~="、"|="、"^="、"$="、"*=" 等运算符。

a[href~="example"] {
  textdecoration: underline;
}

伪类

伪类用于选择元素的特定状态,如 :hover、:focus、:active 等,使用 ":" 开头。

a:hover {
  color: 005580;
}

伪元素

伪元素用于选择元素的特定部分,如 ::before、::after、::firstline 等,使用 "::" 开头。

p::firstline {
  fontweight: bold;
}

综上所述,CSS 选择器提供了强大的工具来精准地选择和样式化 HTML 元素。掌握这些选择器的使用技巧对于编写高效、可维护的 CSS 代码至关重要。希望本文能帮助你更好地理解和应用 CSS 选择器。