Question

我在PHP中创建了这个链接：

echo '<p style="font-family: arial;">Solution name: <a class="expand_suggested_solution" href="#" data-suggestion_id="'.$suggested_solution_id.'"  data-problem_id="'.$problem_id.'">'.$solution_name.'</a></p>';

我有这个css：

a.expand_suggested_solution
{
    color: blue;
}

但我也尝试了很多不同的东西，比如

.expand_suggested_solution

{
    color: blue;
}

.expand_suggested_solution .a
{
    color: blue;
}

但这些都没有奏效:)知道我做错了什么？它可能很简单，但有时我只是在吸css：）

此处由于某种原因无效：“现有群组计划”链接中的http://www.problemio.com/problems/problem.php?problem_id=223

Answer 1

.expand_suggested_solution {
  color: blue
}

应该有用，但更确切地说，你可以把它写成：

a.expand_suggested_solution {
   color:blue
}

选择器将读作“任何具有expand_suggested_solution类的元素”。

如果这不起作用，那将是一些其他问题。既然您已经在这里编写了PHP，我会仔细检查您的链接是否通过查看已执行页面上的源来正确呈现给浏览器。

Answer 2

规则：

.ui-widget-content a {
    color: #222222;
}

在jQuery主题（http://hotlink.jquery.com/jqueryui/themes/base/jquery.ui.theme.css）中更具体，因此链接将是#222222。

您可以通过以下操作使您的规则更具体：

.problem_comment_text a.expand_suggested_solution { color: blue; }

有关CSS特异性的解释，请参阅here。

Answer 3

你真的希望变成蓝色的是什么文字？链接文本或“解决方案名称：”文本？如果是后者，则需要将css应用于<p>标记。

链接是否实际上没有回显到页面或只是它不是蓝色的？有时交换引号可能更容易，因为您不必连接变量（'。'），您可以将它们放入。

echo "<p style='font-family: arial;'>Solution name:
        <a class='expand_suggested_solution' href='#'
           data-suggestion_id='$suggested_solution_id'
           data-problem_id='$problem_id'>$solution_name'
        </a>
      </p>";

检查你的css的其余部分是否有任何覆盖此css规则的内容，例如a {colour: #fff}将覆盖此规则后写入此内容。

您可以随时尝试在您的声明中添加!important，以确保不会覆盖它。例如color: blue!important;

确保您也有合法的Doctype声明。

Answer 4

正如@wsanville正确地指出的那样，已经在jquery.ui.theme.css中定义了一个选择器：

.ui-widget-content a {
  color: #222222;
}

比您尝试的第一个选择器更具体：

.expand_suggested_solution {
  color: blue;
}

此外，您的第二个CSS选择器语法不正确：

.expand_suggested_solution .a {
  color: blue;
}

相反，你的意思是：

a.expand_suggested_solution {
  color: blue;
}

但是，它仍然没有jquery.ui.theme.css那样具体。

你可以尝试：

.ui-widget-content a.expand_suggested_solution {
  color: blue;
}

或者@Daryl建议：

a.expand_suggested_solution {
  color: blue !important;
}

因为!important声明将胜过任何其他选择器。但是，我建议谨慎使用它！

Css表示链接无法呈现

4 个答案: