白骑士的CSS教学语法基础篇之选择器 2.1.3 属性选择器与伪类选择器

系列目录

上一篇：白骑士的CSS教学语法基础之选择器 2.1.2 组合选择器

        在 CSS 中，属性选择器和伪类选择器提供了更细粒度的控制方式，以选择特定的元素和状态。它们能够帮助开发者实现更复杂的样式需求。

属性选择器

        属性选择器用于选择具有特定属性或属性值的 HTML 元素。它们通过元素的属性和属性值进行匹配，而不仅仅是基于标签名称、类名或 ID。

        基本语法：

[element] {
  property: value;
}

        属性值语法：

[element[attribute="value"]] {
  property: value;
}

属性选择器示例：

选择具有特定属性的元素

/* 选择所有具有 href 属性的 <a> 元素 */
a[href] {
  color: blue;
}

        解释：‘a[href]‘ 选择器会选择所有具有 ‘href‘ 属性的 ‘<a>‘ 元素，将其文本颜色设置为蓝色。

选择具有特定属性值的元素

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

        解释：‘input[type="text"]‘ 选择器会选择所有 ‘type‘ 属性值为 ‘"text"‘ 的 ‘<input>‘ 元素，为其添加灰色边框。

选择属性值以特定字符串开头的元素

/* 选择所有具有 href 属性且属性值以 "https" 开头的 <a> 元素 */
a[href^="https"] {
  color: green;
}

        解释：‘a[href^="https"]‘ 选择器会选择所有 ‘href‘ 属性值以 ‘"https"‘ 开头的 ‘<a>‘ 元素，将其文本颜色设置为绿色。

选择属性值以特定字符串结尾的元素

/* 选择所有具有 src 属性且属性值以 ".jpg" 结尾的 <img> 元素 */
img[src$=".jpg"] {
  border: 2px solid red;
}

        解释：‘img[src$=".jpg"]‘ 选择器会选择所有 ‘src‘ 属性值以 ‘".jpg"‘ 结尾的 ‘<img>‘ 元素，为其添加红色边框。

选择属性值包含特定字符串的元素

/* 选择所有具有 class 属性且属性值包含 "highlight" 的元素 */
[class*="highlight"] {
  background-color: yellow;
}

        解释：‘[class*="highlight"]‘ 选择器会选择所有 ‘class‘ 属性值中包含 ‘"highlight"‘ 的元素，将背景颜色设置为黄色。

伪类选择器

        伪类选择器用于选择元素的特定状态或位置。它们提供了额外的匹配条件来应用样式，例如选择用户交互后的状态、元素的首尾位置等。

        基本语法：

selector:pseudo-class {
  property: value;
}

伪类选择器示例

‘:hover‘ - 选择鼠标悬停在元素上的状态

/* 选择鼠标悬停在 <a> 元素上的状态 */
a:hover {
  color: red;
}

        解释：‘a:hover‘ 选择器会在鼠标悬停在 ‘<a>‘ 元素上时，将其文本颜色设置为红色。

‘:focus‘ - 选择获得焦点的元素

/* 选择获得焦点的 <input> 元素 */
input:focus {
  border-color: blue;
}

        解释：‘input:focus‘ 选择器会在 ‘<input>‘ 元素获得焦点时，将其边框颜色设置为蓝色。

‘:first-child‘ - 选择作为父元素第一个子元素的元素：

/* 选择每个 <ul> 元素的第一个 <li> 元素 */
ul li:first-child {
  font-weight: bold;
}

        解释：‘ul li:first-child‘ 选择器会选择每个 ‘<ul>‘ 元素中的第一个 ‘<li>‘ 元素，将其字体设置为加粗。

‘:last-child‘ - 选择作为父元素最后一个子元素的元素：

/* 选择每个 <ul> 元素的最后一个 <li> 元素 */
ul li:last-child {
  color: green;
}

        解释：‘ul li:last-child‘ 选择器会选择每个 ‘<ul>‘ 元素中的最后一个 ‘<li>‘ 元素，将其文本颜色设置为绿色。

‘:nth-child(n)‘ - 选择作为父元素第 ‘n‘ 个子元素的元素：

/* 选择每个 <ul> 元素的第 2 个 <li> 元素 */
ul li:nth-child(2) {
  background-color: lightgray;
}

        解释：‘ul li:nth-child(2)‘ 选择器会选择每个 ‘<ul>‘ 元素中的第 2 个 ‘<li>‘ 元素，将其背景颜色设置为浅灰色。

‘:not(selector)‘ - 选择不匹配指定选择器的元素：

/* 选择所有不是 <button> 元素的 <input> 元素 */
input:not([type="button"]) {
  border: 1px solid black;
}

        解释：‘input:not([type="button"])‘ 选择器会选择所有 ‘type‘ 属性不为 ‘"button"‘ 的 ‘<input>‘ 元素，为其添加黑色边框。

总结

        属性选择器和伪类选择器提供了强大的选择功能，使得 CSS 能够根据元素的属性值或状态来应用样式。属性选择器允许根据元素的特定属性或属性值进行样式匹配，而伪类选择器则能够选择元素的特定状态或位置。掌握这些选择器可以帮助开发者实现更加复杂和细致的样式设计。

下一篇：白骑士的CSS教学语法基础篇之选择器 2.1.4 伪元素选择器​​​​​​​