CSS -psuedo类，用于第一个<p>之后的另一个标记。
CSS -psuedo类，用于第一个<p>之后的另一个标记。
提问于 2020-10-29 10:28:56
是否对psuedo类，类型第一，但适用于，例如，前面有a，而不只是适用于第一个子标签？
例如，我希望第一种类型适用于前面两段，而不仅仅是第一段：
<head>
<style>
p{text-indent:1%;}
p:first-of-type{text-indent:0%;}
</style>
<title>Mara's Tale</title>
</head>
<body>
<h1>Chapter 1</h1>
<p>This is a first-of-type.</p>
<p>But this isn't (good!).</p>
<h1>Chapter 2</h1>
<p>This is not first-of-type, but I'd like it to be.</p>
<p>This is not first-of-type (good!).</p>
</body>
</html>目前，我正在运行regex，将类添加到没有前面的任何类中，但是，作为解决方案，它会让我感到厌烦。
要添加的更新：
出于某种原因，这把我的索尼电子阅读器搞糊涂了，它开始忽略一个有效的第一类型。
我不得不更改这个CSS：
p:first-of-type{
text-indent: 0%;
}
p.dinkus {
text-align: center;
text-indent: 0%;
font-size: 125%;
margin-top: 6%;
margin-bottom: 4%;
white-space: pre;
}
p.dinkus + p{
text-indent: 0%;
}对此：
h1 + p{
text-indent: 0%;
}
p.dinkus {
text-align: center;
text-indent: 0%;
font-size: 125%;
margin-top: 6%;
margin-bottom: 4%;
white-space: pre;
}
p.dinkus + p{
text-indent: 0%;
}澄清一下，我的总体结构是：
<h1>Chapter 3</h1>
<p>Opening para - don't indent.</p>
<p>Non-opening para - do indent.</p>
<p class="dinkus">* * *</p>
<p>Para following a dinkus - don't indent.</p>
<p>Non-opening para, not following a dinkus - do indent.</p>*似乎是索尼的缺陷
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-10-29 10:47:36
您可以始终使用CSS element+element Selector，在这种情况下，h1 +p应该针对前面有h1标记的所有<p>标记。
h1 + p{
text-indent:1%;
color: red
} <title>Mara's Tale</title>
<h1>Chapter 1</h1>
<p>This is a first-of-type.</p>
<p>But this isn't (good!).</p>
<h1>Chapter 2</h1>
<p>This is not first-of-type, but I'd like it to be.</p>
<p>This is not first-of-type (good!).</p>
Stack Overflow用户
发布于 2020-10-29 10:45:24
您可以使用x + y选择器。它选择紧接x元素之后的所有y元素。
p {text-indent:1%; color: red; }
h1 + p {text-indent:0%; color: blue; }<h1>Chapter 1</h1>
<p>This is a first-of-type.</p>
<p>But this isn't (good!).</p>
<h1>Chapter 2</h1>
<p>This is not first-of-type, but I'd like it to be.</p>
<p>This is not first-of-type (good!).</p>
Stack Overflow用户
发布于 2020-10-29 12:08:47
您可以使用+选择器，这基本上意味着后面的选择器。
因此，在您的情况下，这意味着您可以简单地使用：
h1 + p这会让你在h1之后瞄准p。
如果您想将h1之后的所有p元素作为目标，只需将+更改为~即可
然后，您可以按照正常情况应用CSS规则:)
顺便说一句，这里有一个图表I made earlier for this question，它应该有助于解释这一点：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64589252
复制相关文章
相似问题
腾讯云开发者
