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 before
và 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
- 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
- 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] "]";
}
Đị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
,
0 và hơn thế nữa. Tôi sẽ đề cập đến điều đó trong một bài viết khácTuy 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
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
2Ví 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
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
2 và muốn có nội dung động, thì đây là một cách hay để thực hiệnGhi 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
2, vì vậy nội dung quan trọng phải luôn được đưa vào phần đánh dấutính tương thích của trình duyệt web
Cả bộ chọn thuộc tính và hàm
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
1 hoạt động trong IE8 trở lên