CSS属性选择器

80次阅读
没有评论

CSS属性选择器允许您选择具有特定属性值的HTML元素。属性选择器使用方括号([ ])将属性名括起来,后跟一个可选的值。

以下是一个简单的例子,演示如何使用属性选择器来选择具有特定属性值的元素:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Attribute Selector Example</title>
  <style>
    /* select all links with href starting with "https://" */
    a[href^="https://"] {
      color: red;
    }
    
    /* select all images with alt containing "cat" */
    img[alt*="cat"] {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Attribute Selector Example</h1>
  <p>Here is a link with a secure URL:</p>
  <a href="https://www.example.com">Example Website</a>
  
  <p>Here is an image of a cat:</p>
  <img src="https://www.example.com/cat.png" alt="cute cat">
  
  <p>Here is an image of a dog:</p>
  <img src="https://www.example.com/dog.png" alt="happy dog">
</body>
</html>

在上述示例中,我们使用了两个属性选择器:

  • a[href^=”https://”] 选择所有具有以 “https://” 开头的 href 属性的链接,然后将它们的文本颜色设置为红色。
  • img[alt*=”cat”] 选择所有包含 “cat” 的 alt 属性的图像,然后将它们的边框设置为 1px 黑色实线。

请注意,属性选择器可以与其他选择器组合使用,例如类选择器和 ID 选择器,以更精确地选择要应用样式的元素。

以上是使用 CSS 属性选择器的一个简单示例,可以通过更改选择器和属性值来满足您的需求。

正文完
 
评论(没有评论)