如何将嵌套 div<> 中的图像与 div 名称中的空格对齐

Question

我在我的页面布局中嵌套了 div 个带有图像的元素 div。我想写 CSS 样式来使图像右对齐。我是怎么做到的：

我实际上想知道我如何访问嵌套的 div <div id="Imagepart1" class="new1 new1-50 adjust-right"> 以编写 CSS 样式以使图像右对齐。这就是 div 在 div 秒内的样子：

<div id="Testcase1" class="item1 module">
   <div id="Div1" class="new-block">
       <div id="Imagepart1" class="new1 new1-50 adjust-right">
          <div class="new-gutter">
              <div>
                 <img alt src="/sitecollectioImages/MyWork/exampleimage.png">
              </div>
          </div>
       </div>
   </div>
</div>

Answer 1

可以使用“#”符号访问 'id'，可以通过点运算符“.”访问类。 http://www.w3schools.com/css/css_syntax.asp

所以您实际上可以定位您用

描述的 div

#Imagepart1{
  float: right
}

或访问附加到它的类之一

.adjust-right{
  float: right
}

或显式使用所有类

.adjust-right.new.new1-50{
   float: right;
}

Answer 2

这完全取决于应用您的风格所需的特殊性。您有几个选择：

.adjust-right { float: right; } 可能就够了，这有一个 0,0,1,0 的特异性。
您还可以使用多个 class 来定位 DIV， .item1.adjust-right { float: right; }，这具有0,0,2,0的特异性。
如果不够你可以挂钩到id属性，#Imagepart1 { float: right; }，这有0,1,0,0的特殊性。

更多关于 specificity 的信息。

最好通过选项 1 和 2 设置样式，并将 ID 保留为 JS 挂钩。

更新

OP 询问在选择器中使用多个 CSS class 以及在 class 和不在 class 之间留下 space 有什么区别。

当 IS NOT CSS class 和 CSS 选择器中的 space 时，所有这些 classes 必须出现在选择器匹配的元素上。如果没有 space 你是说找到 class X，然后看看 class Y 是否出现在与 class X.

相同的 元素

如果在 CSS 选择器中 IS 和 CSS class 之间有一个 space，那么您定位的项目是是嵌套的。对于每个 space 你说的（从左到右）找到 class X，然后找到 class [=41= 元素内的任何元素]X 找到一个元素 class Y.

<!-- #1 -->
<div class="outer right">        
    <!-- #2 -->
    <div class="inner left">      
         <!-- #3 -->
         <div class="core right"></div>
    </div>
</div>

鉴于上述标记，以下选择器将：

.outer.right, NO SPACE, 选择最外面的 DIV (#1)。要求 .outer 和 .right class 出现在同一元素上（顺序无关紧要）。
.outer .right，WITH SPACE，选择最里面的 DIV (#3)。要求 .right 出现在具有 .outer.

如何将嵌套 div<> 中的图像与 div 名称中的空格对齐

How to align image within nested div<> with spaces in div names

css

css-float

更新