css - div和span中的CSS类IMG

Question

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

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

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

我怎样才能img在123_test课堂上设计这个？

Answer 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 参考

Answer 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
}

两个标识符之间的空格意味着后者是前者的后代。

Answer 3

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

现在您可以通过以下方式设置您的 img 样式：

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

Answer 4

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

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

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