Question

我是css的新手，虽然我了解基础知识，但我无法在Drupal网站上选择特定文本。我正在使用的主题是“鲜明”，所以它添加了很少的样式，当我使用firebug检查内容'TEST'（最后一行）的样式时，它们都没有出现。

当前的div堆栈如下。我正在使用面板，因此它添加了一些div。

<div id="crhub" class="panel-flexible crhub clearfix">
 <div class="panel-flexible-inside crhub-inside">
  <div class="crhub-left">
   <div class="panels-flexible-column panels-flexible-column-crhub-1 panels-flexible-column-first ">
    <div class="inside panels-flexible-column-inside panels-flexible-column-crhub-1-inside panels-flexible-column-inside-first">
     <div class="panels-flexible-row panels-flexible-row-crhub-3 panels-flexible-row-first clearfix ">
      <div class="inside panels-flexible-row-inside panels-flexible-row-crhub-3-inside panels-flexible-row-inside-first clearfix">
       <div class="panels-flexible-region panels-flexible-region-crhub-cr_logo panels-flexible-region-first panels-flexible-region-last cr-logo">
        <div class="inside panels-flexible-region-inside panels-flexible-region-crhub-cr_logo-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
         <div id="#cr-logos" class="panel-pane pane-page-site-name">
          <div class="pane-content"> TEST </div>

当我在网站firebug上选择“TEST”时，控制CSS如下所示从我的local.css文件中获取。

body {
    color: #000000;
    font-family: "Lucida Grande","Lucida Sans Unicode",sans-serif;
    font-size: 81.3%;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.538em;
}

我的local.css中的预期样式并不罕见。

{
  color: #669900;
  font-weight: bold;
  font-size: xx-large; 
}

编辑：面板定义的类出现在我在页面或站点上使用面板的任何位置。我需要特定的CSS来将其锁定到此特定内容的特定文本。这就是我添加ID＃cr-logos的原因，但我似乎无法隔离这个分机。

我尝试了很多组合来选择文本，但没有任何内容覆盖上面CSS中的基体定义。所有这些div，ID和类让我感到困惑。我也对"class="panel-pane pane-page-site-name"等类名感到困惑。这两个类是一起列出的，还是只列出一个？

Answer 1

看起来您只需要从div的id属性中删除“＃”。

<div id="cr-logos" class="panel-pane pane-page-site-name">
  <div class="pane-content"> TEST </div>
</div>

然后它应该像使用后代选择器选择.pane-content一样简单：

#cr-logos .pane-content {
    color: #669900;
    font-weight: bold;
    font-size: xx-large;
}

Answer 2

"class="panel-pane pane-page-site-name"

是否有两个类应用于元素，我们知道这是因为它们之间有空格。

如果.pane-content不起作用，请尝试将！important放在css规则旁边，如下所示：

.pane-content{
    font-weight:bold !important;
}

否则你将不得不尝试'更具体'......它可能看起来像这样：

#crhub .panel-flexible-inside .crhub-left .panels-flexible-column .inside .panels-flexible-row .inside .panels-flexible-region .inside #cr-logos .pane-content{
    font-weight:bold;
    ...
}

如何选择此css级联中的内容？

2 个答案: