สิ่งที่ฉันต้องการคือสามารถเปลี่ยนสีของสัญลักษณ์แสดงหัวข้อย่อยในรายการเป็นสีเทาอ่อนได้ ค่าเริ่มต้นเป็นสีดำและฉันคิดไม่ออกว่าจะเปลี่ยนอย่างไร
ฉันรู้ว่าฉันสามารถใช้รูปภาพได้ ฉันไม่ควรทำอย่างนั้นถ้าฉันสามารถช่วยได้
คำตอบ:
สัญลักษณ์แสดงหัวข้อย่อยได้รับสีจากข้อความ ดังนั้นหากคุณต้องการมีสัญลักษณ์แสดงหัวข้อย่อยสีที่แตกต่างจากข้อความในรายการของคุณคุณจะต้องเพิ่มมาร์กอัป
ตัดข้อความในรายการเป็นช่วง:
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
จากนั้นปรับเปลี่ยนกฎสไตล์ของคุณเล็กน้อย:
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
:beforeตามคำตอบของ Marc ด้านล่าง
bแท็กจึงเหมาะสมกว่า
ฉันจัดการสิ่งนี้โดยไม่ต้องเพิ่มมาร์กอัป แต่ใช้ li: before แทน เห็นได้ชัดว่าสิ่งนี้มีข้อ จำกัด ทั้งหมดของ:before(ไม่มีการรองรับ IE แบบเก่า) แต่ดูเหมือนว่าจะใช้งานได้กับ IE8, Firefox และ Chrome หลังจากการทดสอบบางอย่างที่ จำกัด มาก มันทำงานในสภาพแวดล้อมคอนโทรลเลอร์ของเราสงสัยว่ามีใครตรวจสอบสิ่งนี้ได้บ้าง รูปแบบสัญลักษณ์แสดงหัวข้อย่อยยังถูก จำกัด ด้วยสิ่งที่อยู่ในยูนิโค้ด
<!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>
สิ่งนี้เป็นไปไม่ได้ในปี 2008 แต่จะเป็นไปได้ในไม่ช้า (หวังว่า)!
ตามข้อกำหนดของ W3C CSS3คุณสามารถควบคุมตัวเลขสัญลักษณ์หรือสัญลักษณ์อื่น ๆ ที่สร้างขึ้นก่อนรายการที่มี::markerองค์ประกอบหลอกได้ วิธีใช้สิ่งนี้กับคำตอบที่ได้รับการโหวตมากที่สุด:
<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 */
}
อย่างไรก็ตามโปรดทราบว่าณ เดือนกรกฎาคม 2016โซลูชันนี้เป็นเพียงส่วนหนึ่งของ W3C Working Draft และยังไม่สามารถใช้ได้กับเบราว์เซอร์หลัก ๆ
หากคุณต้องการคุณสมบัตินี้ให้ดำเนินการดังนี้:
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
ปัญหาใหญ่ของวิธีนี้คือมาร์กอัปพิเศษ (แท็กช่วง)
bแท็กจึงเหมาะสมกว่า
สวัสดีบางทีคำตอบนี้อาจจะช้า แต่เป็นคำตอบที่ถูกต้องในการบรรลุเป้าหมายนี้
ตกลงความจริงก็คือคุณต้องระบุแท็กภายในเพื่อให้ข้อความ LIst เป็นสีดำตามปกติ (หรือสิ่งที่คุณต้องการได้รับ) แต่ก็เป็นความจริงเช่นกันที่คุณสามารถกำหนดแท็กและแท็กภายในใหม่ด้วย CSS ได้ ดังนั้นวิธีที่ดีที่สุดในการดำเนินการนี้ให้ใช้แท็ก SHORTER สำหรับการกำหนดนิยามใหม่
ใช้นิยาม CSS นี้:
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
และรหัส html นี้:
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
คุณจะได้ผลลัพธ์ที่ต้องการ นอกจากนี้คุณสามารถสร้างสีที่แตกต่างกันของดิสก์แต่ละแผ่นได้:
<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>
เพียงแค่ทำสัญลักษณ์แสดงหัวข้อย่อยในโปรแกรมกราฟิกและใช้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");
ตัดข้อความภายในรายการด้วยช่วง (หรือองค์ประกอบอื่น ๆ ) และใช้สีสัญลักษณ์แสดงหัวข้อย่อยกับรายการและสีข้อความกับช่วง
ตามW3C สเป็ค ,
คุณสมบัติรายการ ... ไม่อนุญาตให้ผู้เขียนระบุสไตล์ที่แตกต่าง (สีฟอนต์การจัดแนว ฯลฯ ) สำหรับตัวทำเครื่องหมายรายการ ...
แต่แนวคิดที่มีช่วงในรายการด้านบนน่าจะใช้ได้ดี!
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
คุณสามารถใช้ Jquery ได้หากคุณมีเพจมากมายและไม่จำเป็นต้องไปแก้ไขมาร์กอัปด้วยตนเอง
นี่คือตัวอย่างง่ายๆ:
$("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
});
สำหรับคำถามปี 2008 ฉันคิดว่าฉันอาจเพิ่มคำตอบล่าสุดและเป็นปัจจุบันเกี่ยวกับวิธีที่คุณสามารถเปลี่ยนสีของสัญลักษณ์แสดงหัวข้อย่อยในรายการได้
หากคุณต้องการใช้ไลบรารีภายนอกFont Awesome จะให้ไอคอนเวกเตอร์ที่ปรับขนาดได้และเมื่อรวมกับคลาสตัวช่วยของ Bootstrap (เช่นtext-success ) คุณสามารถสร้างรายการที่เจ๋งและปรับแต่งได้
ฉันได้ขยายสารสกัดจากหน้าตัวอย่างรายการ Font Awesomeด้านล่าง:
ใช้
fa-ulและfa-liเพื่อแทนที่สัญลักษณ์แสดงหัวข้อย่อยเริ่มต้นในรายการที่ไม่ได้เรียงลำดับได้อย่างง่ายดาย
<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>ตัวอักษรที่น่ากลัว(ส่วนใหญ่) รองรับ IE8และสนับสนุนเฉพาะ IE7 ถ้าคุณใช้รุ่นเก่า 3.2.1
ได้ผลเช่นกันถ้าเรากำหนดสีให้กับแต่ละองค์ประกอบเช่นฉันเพิ่ม Margin ไปทางซ้ายแล้ว
<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;
}
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
เพียงใช้ CSS:
<li style='color:#e0e0e0'>something</li>
คุณจะต้องตั้งค่า "สไตล์รายการ" ผ่าน CSS และกำหนดสี: ค่า ตัวอย่าง:
ul.colored {list-style: color: green;}