Css sau dữ liệu attr nội dung

Nếu bạn muốn giữ cho nội dung HTML của mình sạch sẽ và đẹp mắt, thông thường bạn nên sử dụng các thuộc tính beforevà after để thêm nội dung bổ sung hoặc để thiết kế nội dung đó

Một ví dụ sử dụng cổ điển là khi bạn muốn thêm một mũi tên trước văn bản nút

1. tạo một nút thông thường

2. thêm thuộc tính before sẽ vẽ một mũi tên trước văn bản nút

Sử dụng thuộc tính “Trước” để thêm mũi tên trước văn bản nút

Như bạn có thể thấy tôi đã thêm một mũi tên có viền trước văn bản nút mà không thay đổi đánh dấu nút và không có kiểu trùng lặp giữa các nút

Nhưng nếu nội dung “trước” của bạn là nội dung động thì sao?

Chà, thật may là chúng ta có thể thay đổi thuộc tính CSS content bằng thuộc tính dữ liệu HTML

1. thêm nội dung cần thiết vào thẻ HTML dưới dạng data-attribute (điều này có thể được thay đổi linh hoạt bằng JavaScript)

thêm nội dung động dưới dạng “data-attribute”

2. thay đổi thuộc tính content trên CSS để sử dụng giá trị attr có cùng tên như bạn đã viết trên HTML (data-before trong ví dụ này)

Thuộc tính content được sử dụng với. trước và. sau các phần tử giả, để chèn nội dung được tạo

Giá trị mặc định. bình thường được kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS2JavaScript. Bạn không thể cung cấp cho một phần tử một lớp giả bằng cách sử dụng JavaScript,
nhưng có nhiều cách khác để có được kết quả tương tự. Thử nó

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Nội dung tài sản1. 08. 01. 01. 04. 0

---

---

Cú pháp CSS

nội dung. thông thường. không ai. phản đối. attr. chuỗi. trích dẫn mở. trích dẫn gần. no-open-quote. không có dấu ngoặc kép. url. ban đầu. thừa kế;

Giá trị tài sản

Giá trịMô tảVí dụbình thườngGiá trị mặc định. Đặt nội dung, nếu được chỉ định, thành bình thường, mặc định là "không" (không có gì) Thử »không Đặt nội dung, nếu được chỉ định, thành không có gìHãy thử »bộ đếmĐặt nội dung làm bộ đếmHãy thử »attr(thuộc tính)Đặt nội dung . ) Dùng thử »initialĐặt thuộc tính này thành giá trị mặc định. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về kế thừaThử nó »

❮ Tham chiếu hàm CSS

Thí dụ

Ví dụ sau chèn giá trị của thuộc tính href trong ngoặc đơn sau mỗi liên kết

a. sau đó {
nội dung. " (" attr(href) ")";
}

Tự mình thử »

---

Định nghĩa và cách sử dụng

Hàm attr() trả về giá trị thuộc tính của các phần tử được chọn

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng

Hàmattr()2. 08. 01. 03. 19. 0

---

Cú pháp CSS

Giá trịMô tảtên thuộc tínhBắt buộc. Tên thuộc tính của (các) phần tử HTML

---

❮ Tham chiếu hàm CSS

Tôi luôn sử dụng các thuộc tính dữ liệu trong JavaScript của mình. Nhưng bạn có biết rằng bạn cũng có thể sử dụng chúng trong CSS của mình không?

Hôm nay, tôi sẽ chỉ cho bạn cách nhắm mục tiêu chúng dưới dạng bộ chọn và (thú vị hơn) truy cập các giá trị của chúng và thực hiện mọi việc với chúng

Nhắm mục tiêu các thuộc tính dữ liệu bằng CSS

Bạn sử dụng # cho ID (_______20_______) và . cho lớp học (_______22_______)

Nhưng bạn cũng có thể nhắm mục tiêu các thuộc tính dữ liệu bằng cách đặt chúng trong dấu ngoặc vuông ([])

[data-some-component] {
	font-weight: bold;
	font-size: 1.2em;
}

Đây là một bản demo

Đối với trường hợp sử dụng như vậy, bạn sẽ được phục vụ tốt hơn với một lớp, nhưng đôi khi, thật hữu ích khi có thể xác định phạm vi bộ chọn chỉ theo các phần tử có thuộc tính dữ liệu cụ thể

Ghi chú. Điều này cũng có thể được sử dụng cho tất cả các loại thuộc tính khác, như title, src,

<div data-content="Some content goes here.">div>

0 và hơn thế nữa. Tôi sẽ đề cập đến điều đó trong một bài viết khác

Tuy nhiên, một cách sử dụng hiệu quả hơn là truy cập nội dung thực tế của thuộc tính dữ liệu

Nhận giá trị của thuộc tính dữ liệu trong CSS

Bạn có thể truy cập nội dung của một thuộc tính dữ liệu bằng hàm

<div data-content="Some content goes here.">div>

1 CSS. Trong mọi trình duyệt chính, việc sử dụng nó được giới hạn ở thuộc tính

<div data-content="Some content goes here.">div>

2

Ví dụ: giả sử bạn muốn tự động thêm một số nội dung vào một thành phần dựa trên giá trị thuộc tính dữ liệu. bạn có thể làm điều này

<div data-content="Some content goes here.">div>

Và trong CSS của bạn, bạn làm điều này

[data-content]:before {
	content: attr(data-content);
}

Đây là một bản demo của nó trong hành động

Với ví dụ này, nội dung đó được phục vụ tốt hơn trong chính phần đánh dấu. Nhưng khi bạn cần sử dụng thuộc tính

<div data-content="Some content goes here.">div>

2 và muốn có nội dung động, thì đây là một cách hay để thực hiện

Ghi chú trợ năng nhanh. một số tổ hợp trình đọc màn hình/trình duyệt không đọc văn bản được hiển thị bằng

<div data-content="Some content goes here.">div>

2, vì vậy nội dung quan trọng phải luôn được đưa vào phần đánh dấu

tính tương thích của trình duyệt web

Cả bộ chọn thuộc tính và hàm

<div data-content="Some content goes here.">div>

1 đều hoạt động trong tất cả các trình duyệt chính. Bộ chọn thuộc tính cũng hoạt động trở lại IE7, trong khi chức năng

<div data-content="Some content goes here.">div>

1 hoạt động trong IE8 trở lên

Tôi có thể sử dụng CSS attr() không?

Làm cách nào để sử dụng After Effects trong CSS?

Làm cách nào để truy cập các thuộc tính dữ liệu trong CSS?

Làm cách nào để đặt giá trị thuộc tính trong CSS?