ID 下的 CSS 类

Question

我需要定位特定 ID 下的多个元素和类。注意:我必须指定 ID。这些类将再次与其他 ID 一起使用

#block-views-now-playing2-block .poster1 img
{
   width:auto;
   height:400px;    
}

#block-views-now-playing2-block .poster1 div
{
   width:263px;
   height:400px;
   overflow:hidden;
}

在此示例中，img 元素接受 css。 div 没有，CSS 被忽略。为什么？

HTML:

<div class="block block-views contextual-links-region last even" id="block-views-now-playing2-block">
   <div class="field-content poster1">
      <img src="http://mysite/myposter.jpg">
   </div>
</div>

Answer 1

在您的 CSS 选择器前面添加一个 ID 不会影响选择内容的方式，而是选择位置。当您从 #block-views-now-playing2-block 开始时您正在将查找范围限制为 #block-views-now-playing2-block 中包含的任何内容

所以 #block-views-now-playing2-block .poster1 img读取:“查找存在于 ID 为 img 的元素内部的任何 poster1 和具有类 block-views-now-playing2-block 的元素”。

它对你的工作方式相同div示例。

为了让 CSS 找到一些东西，html 需要这样构造:

<div id="block-views-now-playing2-block">
  <div class="poster1">
    <img/>
  </div>
</div>

如果您要将 CSS 更改为 #block-views-now-playing2-block.poster1 img (注意缺少的空间)。 CSS 将显示为:“ID 为 img 且类为 block-views-now-playing2-block.poster1 的元素内的任何 poster1” 如果 HTML 的结构类似于:

<div id="block-views-now-playing2-block" class="poster1">
  <div>
    <img/>
  </div>
</div>

(注意类(class)随着 ID 上移了一级)

但实际上，在没有看到您的 HTML 的情况下，我只能猜测为什么它对您不起作用。