Định nghĩa và sử dụng
- "[attribute^=value]" Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng "value".
Giá trị bắt đầu bằng "value" có thể là:
- value
- abcvalue
- abc-value
- abc_value
- abc-value-def
- abc_value_def
- value-abc
- value_abc
- valueabc
- value-abc
- value_abc
Ghi chú: Màu xanh là màu được chọn.
Cấu trúc
[attribute^=value] { property: value; }
Ví dụ
HTML viết:
<html> <head></head> <body> <p class="test">test</p> <p class="first_test">first-test</p> <p class="first-test">first_test</p> <p class="firsttest">firsttest</p> <p class="firsttestlast">firsttestlast</p> <p class="first_test_last">first-test-last</p> <p class="first-test-last">first_test_last</p> <p class="test_last">test-last</p> <p class="test-last">test_last</p> <p class="testlast">testlast</p> <p>none</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
test
first-test
first_test
firsttest
firsttestlast
first-test-last
first_test_last
test-last
test_last
testlast
none
CSS viết:
p[class^=test]{ color: blue; }
Hiển thị trình duyệt khi đã có css:
test
first-test
first_test
firsttest
firsttestlast
first-test-last
first_test_last
test-last
test_last
testlast
none
Ta thấy những thành phần <p> với thuộc tính class có giá trị bắt đầu bằng test đều đã được chọn.
Trình duyệt hỗ trợ
"[attribute^=value]" được hỗ trợ trong đa số các trình duyệt.
Ghi chú:
Không hỗ trợ cho trình duyệt IE6.
Cần khai báo <!DOCTYPE> cho các trình duyệt IE8 trở xuống.