Question

这是我正在使用的HTML文件。我试图制作我正在大胆工作的部分，但是它不会工作，所以我只会告诉你，这是“正确”类的行项目大约一半。如果您注意到，该文本中包含“COMPLETE TASK”的文本，该文本也包含“a”参考标记。基本上，它在运行应用程序时可用作可点击项，默认情况下文本的颜色似乎是白色。我必须改变那个文本的颜色，我正努力让它发挥作用。我之前尝试的是：

li.right a {
color: blue;
}

没有做任何事。有什么想法吗？

<html>
<head>
    <title>To Do List | Pro Web Apps</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<link rel="stylesheet" media="screen" href="css/proui.css" />
    <link rel="stylesheet" media="screen" href="todolist.css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/prowebapps.js"></script>
	<script type="text/javascript" src="todolist.js"></script>
</head>
<body>
	<ul id="menu">
	</ul>
	<div id="main" class="view">
		<h1>Chris Hughes To Do List</h1>
		<div class="task" style="display: none;">
			<h3>Task: <span class="task-name"></span></h3>
			<p class="task-description"></p>
			<p class="task-due">
				<label>DUE IN:</label>
				<span class="task-daysleft"></span>
			</p>
			<ul class="task-actions">
				<li class="right"><a href="#" class="task-complete">COMPLETE TASK</a></li>
				<li><a href="#" class="task-start">START WORKING</a></li>
			</ul>
		</div>
		<ul class="buttons">
			<li><a class="changeview" href="#alltasks">Show All Tasks</a></li>
			<li><a class="changeview" href="#add">Add New</a></li>
		</ul>
	</div>
	<div id="alltasks" class="view">
		<h1 class="fancy">Chris Hughes All Tasks</h1>
		<ul id="tasklist">
		</ul>
	</div>
	<div id="add" class="view">
	    <h1 class="fancy">Chris Hughes Create Task</h1>
		<div id="errors"></div>
	    <form id="taskentry">
	    <ul>
	        <li><input type="text" minlength="2" class="required" name="task[name]" id="taskname" placeholder="Task Name" value=""/></li>
	        <li>
	            <textarea name="task[description]" id="taskdesc" placeholder="Description" rows="5"></textarea>
	        </li>
	        <li><input type="text" class="required date" name="task[due]" id="taskdue" placeholder="Task Due" value="" /></li>
	        <li class="naked"><input type="submit" name="Save" /></li>
	    </ul>
	    </form>
	</div>
</body>
</html>

Answer 1

试试这个选择器：

.task-actions li.right a.task-complete {
  color: blue;
}

Answer 2

尽量不要使用!important，但要找到覆盖颜色的位置。打开Chrome控制台，查看此元素覆盖color:blue的位置。

...或者将你的脚本放在所有CSS的底部（但这不是一个好的解决方案）

如何使用CSS更改元素的文本颜色？

2 个答案: