Question

我们可以只用名称

编写选择器吗？

例如，

<div name= "outer-name">
    <img name="inner-image" src="images/ine.jpg" alt"" />
</div>

我想在css文件中采用内部图像的样式，如[外名] [inner-image]

在CSS文件中

[outer-name] [inner-image] {
    /*styles*/
}

我不能将选择器作为[外名] img等...仅按名称选择

Answer 1

您可以使用属性选择器：

[name="outer-name"] [name="inner-image"]

但请注意，name不是<div>或<img>的有效属性，即使上述选择器有效也是如此。最好将它们更改为类，或者如果您使用的是HTML5，请为它们添加data-前缀，所以它看起来像这样：

<div data-name= "outer-name">
    <img data-name="inner-image" src="images/ine.jpg" alt"" />
</div>

然后使用此选择器：

[data-name="outer-name"] [data-name="inner-image"]

Answer 2

给出以下html：

<div data-name="something">
    <p>Content in 'something'</p>
    <span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>

CSS：

[data-name] {
    background-color: red;
}

[data-name] [data-someAttribute] {
    display: block;
    background-color: #ffa;
}

这是完全有效的（至少，它是在Chromium 14 / Ubuntu 11.04中实现的）。我已经改为使用name属性（因为它们对div元素或其他非form元素无效），而是使用data-*前缀自定义属性，在HTML5中有效，虽然在HTML 4中可能不是“有效”，但它们似乎仍被这些浏览器所理解。

JS Fiddle demo

值得注意的是，您还可以使用attribute = equals表示法，根据data-*属性的值仅选择某些元素：

<div data-name="something">
    <p>Content in data-name='something' element.</p>
    <span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>

CSS：

[data-name] {
    background-color: red;
}

[data-name="something"] {
    font-weight: bold;
}

[data-name] [data-someAttribute] {
    background-color: #ffa;
    text-decoration: underline;
    font-weight: normal;
}

JS Fiddle demo

另外，如果CSS3是您的选项，则可以使用attribute-begin-with（^=）表示法：

[data-name] {
    background-color: red;
}

[data-name^="s"] {
    font-weight: bold;
}

[data-name] [data-someAttribute] {
    background-color: #ffa;
    text-decoration: underline;
    font-weight: normal;
}

JS Fiddle demo

并使用（$=）符号表示属性结尾：

[data-name] {
    background-color: red;
}

[data-name$="ing"] {
    font-weight: bold;
}

[data-name] [data-someAttribute] {
    background-color: #ffa;
    text-decoration: underline;
    font-weight: normal;
}

参考文献：

Answer 3

正如@Bolt所说，name在那里无效（但它仍可在我的浏览器上运行）。您可以使用HTML5 data-属性。这是a fiddle显示它是如何完成的。

这里真正的解决方案是使用类，但我认为你有理由不使用它们。

我们可以只通过CSS文件中的元素名称来编写选择器

3 个答案: