如何使用CSS修改class为right的li元素内文本颜色？

Got it, let's get that text color sorted out for your .right list item. The key thing here is handling both the plain "COMPLETE TASK" text and the nested <a> tag, since links have default browser styles that won't inherit color automatically. Here are a couple of solid approaches:

1. Change both the plain text and link to the same color #

This is probably what you want if you want the entire content inside the <li> to match. We'll set the base color on the <li> and force the link to inherit that color:

/* Target the li with class "right" */
li.right {
  color: #ff4500; /* Replace with your desired color (orange example here) */
}

/* Make the nested <a> tag inherit the li's color */
li.right a {
  color: inherit;
}

Why this works: Browsers apply a default blue/purple color to links, so without the inherit rule, the link would stay its default color even if you set the <li>'s color. This way everything inside the <li> uses your chosen color.

2. Only change the "COMPLETE TASK" text (leave the link as-is) #

If you want to keep the link's original color but modify the plain text, use the :not() pseudo-class to target everything except the <a> tag:

li.right :not(a) {
  color: #2c3e50; /* Dark gray example */
}

This selector picks out all elements (and text nodes) inside li.right that aren't <a> tags, so only the "COMPLETE TASK" text gets the color update.

Quick Notes: #

• If your existing styles are overriding this, boost the selector specificity (e.g., if the <li> is inside a <ul> with class "task-list", use .task-list li.right instead of just li.right). Avoid !important unless absolutely necessary—it makes debugging harder later.
• You can use any valid color format: hex codes, RGB/RGBA, HSL/HSLA, or even named colors like red or blue.

内容的提问来源于stack exchange，提问作者Toph Hughes