CSS 目标 HTML 标签、样式名称和 class 名称

Question

我在下面有一些标记，我想使用 css 做的是针对以下 3 点。

我尝试了以下代码但失败了

img[style*="right"][class="media-element"] {margin-left:10px;}

使用以下内容select 样式有效

img[style*="right"]...

Answer 1

试试这个：

img.media-element[style*="right"] {margin-left:10px;}

如果您知道确切的 class 姓名，则无需使用属性等于选择器。请改用 .（点）表示法。

Answer 2

您的属性选择器 [class="media-element"] 查找与 class 属性的整个值完全匹配的值。仅当标记中显示的属性正好是 class="media-element"，没有其他 class 名称时，它才会匹配该元素。否则会失败。

如果您按 class 名称进行选择，您确实应该使用 class 选择器：

img[style*="right"].media-element {margin-left:10px;}

只有在有充分理由的情况下，才应使用带有 class 属性的属性选择器。

Answer 3

如果 class='' 中有很多类，那么 [class="media-element"] 将不会匹配任何元素，

你可以交替做的是，

img[style*="right"][class*="media-element"] {margin-left:10px;}

CSS target HTML tag, style name and class name