34. Attr Selector Trong CSS

Attr Selector trong CSS là cách để chọn các phần tử dựa trên các thuộc tính của chúng. Cú pháp cơ bản của Attr Selector là [attribute], và bạn có thể sử dụng nó để chọn các phần tử có một thuộc tính cụ thể hoặc kiểm tra giá trị của thuộc tính.

Dưới đây là một ví dụ về cách sử dụng Attr Selector trong CSS:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Attr Selector Example</title>
</head>
<body>
  <input type="text" class="input" placeholder="Enter something">
  <button class="btn" data-action="submit">Submit</button>
</body>
</html>

CSS (styles.css):

css

/* Chọn các phần tử có thuộc tính data-action */
[data-action] {
  font-weight: bold;
}

/* Chọn phần tử button có thuộc tính data-action="submit" */
button[data-action="submit"] {
  background-color: #007bff;
  color: white;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
}

/* Chọn phần tử input có thuộc tính type="text" */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}

Trong ví dụ này:

[data-action] chọn tất cả các phần tử có thuộc tính data-action.
button[data-action="submit"] chọn phần tử button có thuộc tính data-action có giá trị là “submit”.
input[type="text"] chọn phần tử input có thuộc tính type có giá trị là “text”.

Attr Selector rất hữu ích khi bạn muốn áp dụng kiểu cho các phần tử dựa trên các thuộc tính cụ thể mà chúng có hoặc kiểm tra giá trị của thuộc tính để tùy chỉnh kiểu dáng.

Leave a Comment Cancel Reply