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＆amp; W？”可以写成“B \＆amp; W \？”或“B \ 26 W \ 3F”。

W3C Reference

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"或不以数字开头的内容。

现在您可以用这种方式设置图像样式：

.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为符合性和可访问性指南创建图形效果，并在多个设备上显示。

div类和跨度内的CSS类IMG

4 个答案: