Css chữ cái cuối cùng

Có rất nhiều cách để bạn có thể chọn các phần tử trong CSS. Lựa chọn cơ bản nhất là theo tên thẻ, như p { }. Hầu hết mọi thứ cụ thể hơn bộ chọn thẻ đều sử dụng các thuộc tính — class và ID đều chọn các thuộc tính đó trên các phần tử HTML. Nhưng class và

[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 */
}

0 không phải là thuộc tính duy nhất mà nhà phát triển có thể chọn. Chúng ta có thể sử dụng bất kỳ thuộc tính nào của phần tử làm bộ chọn

Lựa chọn thuộc tính có một cú pháp đặc biệt. Đây là một ví dụ

a[href="https://css-tricks.com"] {
  color: #E18728;
}

Đó là một công cụ chọn đối sánh chính xác sẽ chỉ chọn các liên kết có giá trị thuộc tính chính xác là

[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 */
}

1 của “https. // thủ thuật css. com”

Bảy loại khác nhau

Bộ chọn thuộc tính phân biệt chữ hoa chữ thường theo mặc định (xem bên dưới) và được viết bên trong dấu ngoặc _________2

Có bảy loại đối sánh khác nhau mà bạn có thể tìm thấy bằng bộ chọn thuộc tính và cú pháp của mỗi loại là khác nhau. Mỗi bộ chọn thuộc tính phức tạp hơn được xây dựng dựa trên cú pháp của bộ chọn đối sánh chính xác — tất cả chúng đều bắt đầu bằng tên thuộc tính và kết thúc bằng dấu bằng theo sau là (các) giá trị thuộc tính, thường là trong dấu ngoặc kép. Điều gì xảy ra giữa tên thuộc tính và dấu bằng là điều tạo nên sự khác biệt giữa các bộ chọn

[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 */
}

Giá trị chứa. giá trị thuộc tính chứa một thuật ngữ là giá trị duy nhất, một giá trị trong danh sách các giá trị hoặc là một phần của giá trị khác. Để sử dụng bộ chọn này, hãy thêm dấu hoa thị (*) trước dấu bằng. Ví dụ:

[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 */
}

3 sẽ chọn hình ảnh có văn bản thay thế “nghệ thuật trừu tượng” và “vận động viên bắt đầu một môn thể thao mới”, bởi vì giá trị “nghệ thuật” nằm trong từ “bắt đầu”

Giá trị nằm trong danh sách được phân tách bằng dấu cách. giá trị là giá trị thuộc tính duy nhất hoặc là toàn bộ giá trị trong một tập hợp giá trị được phân tách bằng dấu cách. Không giống như bộ chọn “chứa”, bộ chọn này sẽ không tìm kiếm giá trị dưới dạng một đoạn từ. Để sử dụng bộ chọn này, hãy thêm dấu ngã (~) trước dấu bằng. Ví dụ:

[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 */
}

4 sẽ chọn hình ảnh có văn bản thay thế “nghệ thuật trừu tượng” và “chương trình nghệ thuật”, nhưng không chọn “vận động viên bắt đầu một môn thể thao mới” (mà bộ chọn “chứa” sẽ chọn)

Giá trị bắt đầu bằng. giá trị thuộc tính bắt đầu với thuật ngữ đã chọn. Để sử dụng bộ chọn này, hãy thêm dấu mũ (^) trước dấu bằng. Đừng quên, vấn đề phân biệt chữ hoa chữ thường. Ví dụ: img[alt^=”art”] sẽ chọn hình ảnh có văn bản thay thế “art show” và “artistic pattern”, nhưng không chọn hình ảnh có văn bản thay thế “Arthur Miller” vì “Arthur” bắt đầu bằng chữ in hoa

Giá trị ở vị trí đầu tiên trong danh sách được phân tách bằng dấu gạch ngang. Bộ chọn này rất giống với bộ chọn “starts with”. Ở đây, bộ chọn khớp với một giá trị là giá trị duy nhất hoặc là giá trị đầu tiên trong danh sách giá trị được phân tách bằng dấu gạch ngang. Để sử dụng bộ chọn này, hãy thêm một ký tự ống (. ) trước dấu bằng. Ví dụ:

[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 */
}

5 sẽ chọn các mục danh sách có giá trị

[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 */
}

6 là “1900-2000”, nhưng không chọn mục danh sách có giá trị

[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 */
}

6 là “1800-1900”

Giá trị kết thúc bằng. giá trị thuộc tính kết thúc với thuật ngữ đã chọn. Để sử dụng bộ chọn này, hãy thêm ký hiệu đô la ($) trước dấu bằng. Ví dụ:

[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 */
}

8 chọn mọi liên kết kết thúc bằng. pdf

Một lưu ý về dấu ngoặc kép. Bạn có thể chọn không có dấu ngoặc kép xung quanh giá trị trong một số trường hợp, nhưng các quy tắc để chọn không có dấu ngoặc kép không nhất quán trên nhiều trình duyệt. Báo giá luôn hoạt động, vì vậy nếu bạn tiếp tục sử dụng chúng, bạn có thể chắc chắn rằng bộ chọn của mình sẽ hoạt động

Xem Bộ chọn thuộc tính bút theo Thủ thuật CSS (@css-tricks) trên CodePen

Sự thật thú vị. các giá trị được coi là các chuỗi, vì vậy bạn không phải thực hiện bất kỳ thao tác thoát ký tự cầu kỳ nào để làm cho chúng khớp với nhau, như bạn sẽ làm nếu bạn sử dụng các ký tự bất thường trong bộ chọn lớp hoặc ID

[class="(╯°□°）╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;
}

Khớp không phân biệt chữ hoa chữ thường

Bộ chọn thuộc tính không phân biệt chữ hoa chữ thường là một phần trong đặc tả của Nhóm làm việc CSS. Như đã đề cập ở trên, các chuỗi giá trị thuộc tính theo mặc định phân biệt chữ hoa chữ thường, nhưng có thể thay đổi thành không phân biệt chữ hoa chữ thường bằng cách thêm

[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 */
}

9 ngay trước dấu ngoặc đóng

[attribute="value" i] {
  /* Styles here will apply to elements with:
    attribute="value"
    attribute="VaLuE"
    attribute="VALUE"
    ...etc
  */
}

Kết hợp không phân biệt chữ hoa chữ thường có thể thực sự hữu ích cho việc nhắm mục tiêu các thuộc tính chứa văn bản do con người viết không thể đoán trước. Ví dụ: giả sử bạn đang tạo kiểu bong bóng đối thoại trên ứng dụng trò chuyện và muốn thêm "tay vẫy tay" vào bất kỳ tin nhắn nào có nội dung "xin chào" ở dạng nào đó. Bạn có thể làm như vậy chỉ với CSS, sử dụng trình đối sánh không phân biệt chữ hoa chữ thường để nắm bắt tất cả các biến thể có thể có

Xem thuộc tính CSS không phân biệt chữ hoa chữ thường đối sánh bằng CSS-Tricks (@css-tricks) trên CodePen

Kết hợp chúng

Bạn có thể kết hợp bộ chọn thuộc tính với các bộ chọn khác, như thẻ, lớp hoặc ID

div[attribute="value"] {
  /* style rules here */
}

.module[attribute="value"] {
  /* style rules here */
}

#header[attribute="value"] {
  /* style rules here */
}

Hoặc thậm chí kết hợp nhiều bộ chọn thuộc tính. Ví dụ này chọn hình ảnh có văn bản thay thế bao gồm từ “người” làm giá trị duy nhất hoặc giá trị trong danh sách được phân tách bằng dấu cách và giá trị

[class="(╯°□°）╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;
}

0 bao gồm giá trị “lorem”

img[alt~="person"][src*="lorem"] {
  /* style rules here */
}

Xem Thuộc tính kết hợp bút và Lựa chọn chỉ thuộc tính bằng CSS-Tricks (@css-tricks) trên CodePen

Bộ chọn thuộc tính trong JavaScript và jQuery

Bộ chọn thuộc tính có thể được sử dụng trong jQuery giống như bất kỳ bộ chọn CSS nào khác. Trong JavaScript, bạn có thể sử dụng bộ chọn thuộc tính với

[class="(╯°□°）╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;
}

1 và

[class="(╯°□°）╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;
}

2