div和span中的CSS类IMG答案

【问题标题】：CSS class IMG inside div and spandiv和span中的CSS类IMG
【发布时间】：2013-10-16 07:03:33
【问题描述】：

您好，一开始我有这样的代码：

<div class="123_test" tabindex="0" role="button">

    <span class="">
        <img class="" alt="" src="picturetopic"></img>        
    </span>
</div>

如何使用123_test 类设置img 的样式？

【问题讨论】：

你的意思是像.123_test > img{ style of the image }？
img 不是直接从 div.123_test 下降的。不应该是div.123_test>span>img吗？？

标签： css image css-selectors

【解决方案1】：

首先你不能用数字开始一个类名，我假设它是从某个地方生成的，因为类是空的，但如果可以的话，比考虑改变它，比如

class="name_123_test"

然后像下面这样使用选择器

.name_123_test > span img {
   /* Styles goes here */
}

在 CSS 中，标识符（包括元素名称、类和 ID）选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或后面的连字符开头一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（参见下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

W3C Reference

【讨论】：

.name_123_test > span img 和.name_123_test span img 之间是否存在显着差异？另外，您知道是否需要包含中间后代 span？

【解决方案2】：

为什么你的class 属性是空的？

如果您想将123_test 类应用到img 标记中，只需将其添加到class 属性中即可：

<img class="123_test" alt="" src="picturetopic"></img>

或者您的意思是您想使用祖先div 作为img 的样式指南？在您的 CSS 中，您可以将 img 引用为 123_test 类的后代：

.123_test img
{
    // css rules
}

两个标识符之间的空格表示后者是前者的后代。

【讨论】：

我同意，如果您可以为图像本身指定一个类名，那就太好了。您的第二个示例将迎合从第 3 方动态生成图像的场景，如果消费者无法指定 css 类名称

【解决方案3】：

您不能命名以数字开头的类。因此，请将您的班级名称更改为 class="test_123" 或不以数字开头的名称。

现在您可以用这种方式设置您的 img 样式：

.test_123 // here you put your class name after the "."
{
    // style your image here
}

【讨论】：

【解决方案4】：

此外，为功能使用更好的 HTML 标记：

<button type="button" class="test_123" tabindex="0">    
    <span>
        <img alt="" src="picturetopic" />       
    </span>
</button>

type="button" 的按钮可以包含文本或图像。如果图像包含文本，最好使用 css 来创建符合无障碍指南的图形效果并在多个设备上显示。

【讨论】：