Tất cả những gì tôi muốn là có thể thay đổi màu của dấu đầu dòng trong danh sách thành màu xám nhạt. Nó mặc định là màu đen và tôi không thể tìm ra cách thay đổi nó.
Tôi biết tôi chỉ có thể sử dụng một hình ảnh; Tôi không muốn làm điều đó nếu tôi có thể giúp nó.
Câu trả lời:
Dấu đầu dòng lấy màu từ văn bản. Vì vậy, nếu bạn muốn có dấu đầu dòng màu khác với văn bản trong danh sách của mình, bạn sẽ phải thêm một số đánh dấu.
Gói văn bản danh sách trong một khoảng:
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
Sau đó, sửa đổi các quy tắc kiểu của bạn một chút:
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
:beforenhư trong câu trả lời của Marc bên dưới.
bthẻ sẽ thích hợp hơn.
Tôi đã quản lý điều này mà không thêm đánh dấu mà thay vào đó sử dụng li: before. Điều này rõ ràng có tất cả các hạn chế của :before(không hỗ trợ IE cũ), nhưng nó có vẻ hoạt động với IE8, Firefox và Chrome sau một số thử nghiệm rất hạn chế. Nó hoạt động trong môi trường bộ điều khiển của chúng tôi, tự hỏi liệu có ai có thể kiểm tra điều này không. Kiểu dấu đầu dòng cũng bị giới hạn bởi những gì trong unicode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
li {
list-style: none;
}
li:before {
/* For a round bullet */
content:'\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -10px;
top: -0px;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>
Điều này là không thể vào năm 2008, nhưng nó sẽ sớm trở thành khả thi (hy vọng)!
Theo đặc tả CSS3 của W3C , bạn có thể có toàn quyền kiểm soát bất kỳ số, ký hiệu hoặc ký hiệu nào khác được tạo trước một mục danh sách có ::markerphần tử giả. Để áp dụng điều này cho giải pháp của câu trả lời được bình chọn nhiều nhất:
<ul>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>
li::marker {
color: red; /* bullet color */
}
li {
color: black /* text color */
}
Tuy nhiên, lưu ý rằng kể từ tháng 7 năm 2016 , giải pháp này chỉ là một phần của Dự thảo làm việc của W3C và chưa hoạt động trên bất kỳ trình duyệt chính nào.
Nếu bạn muốn tính năng này, hãy làm những điều sau:
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
vấn đề lớn với phương pháp này là đánh dấu thêm. (thẻ span)
bthẻ sẽ thích hợp hơn.
Xin chào có thể câu trả lời này là muộn nhưng là một trong những chính xác để đạt được điều này.
Ok, thực tế là bạn phải chỉ định một thẻ nội bộ để làm cho văn bản LIst có màu đen thông thường (hoặc những gì bạn muốn lấy nó). Nhưng cũng đúng là bạn có thể XÁC ĐỊNH bất kỳ TAGS và thẻ nội bộ nào bằng CSS. Vì vậy, cách tốt nhất để làm điều này là sử dụng thẻ SHORTER để định nghĩa lại
Áp dụng định nghĩa CSS này:
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
Và mã html này:
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
Bạn nhận được kết quả cần thiết. Ngoài ra, bạn có thể làm cho mỗi đĩa có màu sắc khác nhau:
<ul>
<li class="c1"><b>Text 1</b></li>
<li class="c2"><b>Text 2</b></li>
<li class="c3"><b>Text 3</b></li>
</ul>
Chỉ cần thực hiện một dấu đầu dòng trong một chương trình đồ họa và sử dụng list-style-image:
ul {
list-style-image:url('gray-bullet.gif');
}
list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");
Bao bọc văn bản trong mục danh sách bằng một khoảng (hoặc một số phần tử khác) và áp dụng màu dấu đầu dòng cho mục danh sách và màu văn bản cho khoảng.
Theo thông số kỹ thuật W3C ,
Thuộc tính danh sách ... không cho phép tác giả chỉ định kiểu riêng biệt (màu sắc, phông chữ, căn chỉnh, v.v.) cho điểm đánh dấu danh sách ...
Nhưng ý tưởng với một khoảng bên trong danh sách trên sẽ hoạt động tốt!
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
Bạn có thể sử dụng Jquery nếu bạn có nhiều trang và không cần phải tự mình chỉnh sửa đánh dấu.
đây là một ví dụ đơn giản:
$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
Đối với một câu hỏi năm 2008, tôi nghĩ rằng tôi có thể thêm một câu trả lời mới hơn và cập nhật hơn về cách bạn có thể thay đổi màu của dấu đầu dòng trong danh sách.
Nếu bạn sẵn sàng sử dụng các thư viện bên ngoài, Font Awesome cung cấp cho bạn các biểu tượng vectơ có thể mở rộng và khi kết hợp với các lớp trợ giúp của Bootstrap (ví dụ text-success:), bạn có thể tạo một số danh sách khá thú vị và có thể tùy chỉnh.
Tôi đã mở rộng phần trích xuất từ trang ví dụ danh sách Font Awesome bên dưới:
Sử dụng
fa-ulvàfa-lidễ dàng thay thế các dấu đầu dòng mặc định trong danh sách không có thứ tự.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>List icons</li>
<li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
<li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>Font Awesome (hầu hết) hỗ trợ IE8 và chỉ hỗ trợ IE7 nếu bạn sử dụng phiên bản 3.2.1 cũ hơn .
Nó hoạt động tốt nếu chúng ta đặt màu cho từng phần tử, ví dụ: Tôi đã thêm một số Lề vào bên trái bây giờ.
<article class="event-item">
<p>Black text here</p>
</article>
.event-item{
list-style-type: disc;
display: list-item;
color: #ff6f9a;
margin-left: 25px;
}
.event-item p {
margin: 0;
color: initial;
}
Bạn có thể sử dụng CSS để đạt được điều này. Bằng cách chỉ định danh sách theo màu sắc và kiểu bạn chọn, bạn cũng có thể chỉ định văn bản dưới dạng màu khác.
Làm theo ví dụ tại http://www.echoecho.com/csslists.htm .
Chỉ cần sử dụng CSS:
<li style='color:#e0e0e0'>something</li>