Chọn các yếu tố theo thuộc tính dữ liệu trong CSS

Có thể chọn các thành phần trong CSS theo các thuộc tính dữ liệu HTML5 của chúng (ví dụ data-role:) không?

Nếu bạn có nghĩa là sử dụng bộ chọn thuộc tính , chắc chắn, tại sao không:

[data-role="page"] {
    /* Styles */
}

Có nhiều bộ chọn thuộc tính mà bạn có thể sử dụng cho các tình huống khác nhau, tất cả được đề cập trong tài liệu tôi liên kết đến. Lưu ý rằng, mặc dù các thuộc tính dữ liệu tùy chỉnh là "tính năng HTML5 mới",

• các trình duyệt thường không có bất kỳ vấn đề nào hỗ trợ các thuộc tính không chuẩn, vì vậy bạn sẽ có thể lọc chúng bằng các bộ chọn thuộc tính; và

• bạn cũng không phải lo lắng về việc xác thực CSS, vì CSS không quan tâm đến các tên thuộc tính không được đặt tên miễn là chúng không phá vỡ cú pháp của bộ chọn.

Cũng có thể chọn các thuộc tính bất kể nội dung của chúng, trong các trình duyệt hiện đại

với:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Ví dụ: http://codepen.io/jasonm23/pen/fADnu

Hoạt động trên một tỷ lệ rất đáng kể của trình duyệt.

Lưu ý điều này cũng có thể được sử dụng trong bộ chọn JQuery hoặc sử dụng document.querySelector

Đáng chú ý là các bộ chọn thuộc tính chuỗi con CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

Bạn có thể kết hợp nhiều bộ chọn và điều này thật tuyệt khi biết rằng bạn có thể chọn mọi thuộc tính và thuộc tính dựa trên giá trị của chúng giống như hrefdựa trên giá trị của chúng chỉ với CSS ..

Bộ chọn thuộc tính cho phép bạn chơi xung quanh một số phụ idvà classthuộc tính

Đây là một bài đọc tuyệt vời trên Bộ chọn thuộc tính

Vĩ cầm

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Hỗ trợ trình duyệt:
IE6 +, Chrome, Firefox & Safari

Bạn có thể kiểm tra chi tiết tại đây .

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}