Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

เปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการด้วย ::marker CSS Selector


ไวยากรณ์

ไวยากรณ์ของ CSS ::marker selector มีดังนี้ −

Selector::marker {
   attribute: /*value*/;
}

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดง CSS ::marker selector.

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style: circle;
            font-size: 1.2em;
         }
         li::marker {
            color: green;
         }
      </style>
   </head>
   <body>
      <h2><strong>TMNT</strong></h2>
      <ul>
         <li>Raphael</li>
         <li>Donatello</li>
         <li>Michaelangelo</li>
         <li>Leonardo</li>
      </ul>
   </body>
</html>

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้

เปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการด้วย ::marker CSS Selector

ตัวอย่าง

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style: square;
            overflow: hidden;
         }
         li::marker {
            color: green;
         }
         li {
            width: 15%;
            margin: 2%;
            float: left;
            box-shadow: inset 2px 0px 10px lightblue;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>ting</li>
         <li>tong</li>
         <li>ding</li>
         <li>dong</li>
      </ul>
   </body>
</html>

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้

เปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการด้วย ::marker CSS Selector