英文:
CSS selector for the element without any classname or attribute
问题
可以写一个CSS选择器来匹配不包含任何属性或类名的元素吗？例如，我有以下类似的HTML（但有大量的div和动态类名），我想匹配第二个div（它不包含类）。
div:not([class]) {
/* 你的样式 */
}
P.S. 使用div:nth-child(2)不是一个解决方案。
P.P.S. 通常为什么在开发中使用动态类名，您能否提供建议？
英文:
Is it possible to write a CSS selector matching the element which does not contain any attributes or class names?
For example, I have html like the following (but with tons of divs and dynamic class names) and I want to match the second div (it does not contain class)
<div class="xeuugli x2lwn1j x1cy8">
<div>
<div class="xeuugli x2lwn1j x1cy8">
<div class="xeuugli x2lwn1j n94">
<div class="x8t9es0 x10d9sdx xo1l8bm xrohj xeuugli">$0,00</div>
</div>
</div>
<div class="xeuugli x2lwn1j x1cy8zghib x19lwn94">
<span class="x8t9es0 xw23nyj xeuugli">Helloworld.</span>
</div>
</div>
</div>
P.S. Getting the div like div:nth-child(2) is not a solution.
P.P.S. Could you please advise in general why the dynamic class names are used in the development?
答案1
得分: 1
如果无法使用类，可以尝试给它一个ID，如下所示：
<div class="xeuugli x2lwn1j x1cy8">
<div id="myId">
<div class="xeuugli x2lwn1j x1cy8">
<div class="xeuugli x2lwn1j n94">
<div class="x8t9es0 x10d9sdx xo1l8bm xrohj xeuugli">$0,00</div>
</div>
</div>
<div class="xeuugli x2lwn1j x1cy8zghib x19lwn94">
<span class="x8t9es0 xw23nyj xeuugli">Helloworld.</span>
</div>
</div>
</div>
然后，你可以通过 CSS 的 #id 选择器选择该ID，如下所示：
#myId {
/*在这里添加样式*/
}
如果你也不能使用ID，我们可以通过找到一个分组元素，确保你不会在其他地方使用它，比如<section>或<article>，然后你可以使用以下 JavaScript 代码：
const elem = document.getElementsByTagName("article")[0];
elem.style.border = '2px solid red';
这将返回一个具有相同标签名称的所有元素的数组，而在我们的情况下，将只有一个需要的元素。然后，你可以通过 JavaScript 给它添加你需要的CSS样式。
英文:
Well, if you can't use classes, maybe try giving it an ID if possible, like
<div class="xeuugli x2lwn1j x1cy8">
<div id="myId">
<div class="xeuugli x2lwn1j x1cy8">
<div class="xeuugli x2lwn1j n94">
<div class="x8t9es0 x10d9sdx xo1l8bm xrohj xeuugli">$0,00</div>
</div>
</div>
<div class="xeuugli x2lwn1j x1cy8zghib x19lwn94">
<span class="x8t9es0 xw23nyj xeuugli">Helloworld.</span>
</div>
</div>
</div>
ad then you can select the ID via the css #id selector like so:
#myId {
/*stuff here*/
}
If you can't have IDs either, we could get really creative by finding a grouping element which you will swear to never use on another place, like <section> or <article>, and then you could use
const elem = document.getElementsByTagName("article")[0];
elem.style.border = '2px solid red';
which returns an array of all elements with that tag name, which in our case would be the only one you need. Then you could via Javascript give it the css you need.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论