如何更大胆的元素与偏移后h元素的CSS？ [英] How to bolder even p element with offset after h element in CSS?

问题描述

我有这样的代码：

<style>
h2 ~ p:nth-of-type(2n+3) {
  font-weight: 600;
}
</style>

<div>
  <h2>Cats</h2>
  <p>Normal cat</p>
  <p>Normal cat</p>
  <p>Weird cat</p>
  <p>Normal cat</p>
  <p>Weird cat</p>
  <p>Normal cat</p>
  <h2>Dogs</h2>
  <p>Normal dog</p>
  <p>Normal dog</p>
  <p>Weird dog</p>
  <p>Normal dog</p>
  <p>Weird dog</p>
  <p>Normal dog</p>
</div>

我无法更改HTML或使用jQuery或JS。我需要使用CSS让奇怪的狗和猫更大胆。但是当我显示上面的代码不仅奇怪的猫和狗更大胆，但也第一正常的狗：

I can not change HTML or use jQuery or JS. I need to use CSS to make weird dogs and cats bolder. But when i display above code not only weird cats and dogs are bolder, but also first normal dog:

看起来像CSS匹配的Cats扩展了它对Dogs的使用。

It seems like the CSS matching Cats extends its use to Dogs.

如何设置CSS选择器只做奇怪的猫dog bolder？

How to set the CSS selector to make only weird cats and dogs bolder?

推荐答案

如上所述这里，你可以使用css 〜选择器，然后是 nth-of-type （ nth-child ）选择器。

As stated here, you can do this by using the css ~ selector, followed by the nth-of-type (alternatively nth-child) selector.

但是，这也会选择每第7个项目，因此您必须使用：not 选择器太。您可以在MDN上详细了解这些选择器： 一般兄弟姐妹选择器 和 ：nth-​​of-type 和 ：not 。

However, this would also select every 7th item, so you have to override that by using the :not selector too. You can read more about it these selectors on the MDN: General Sibling Selector and :nth-of-type and :not.

您可以使用以下内容，这有点灵活：

You could use the following, which is a bit flexible:

h2 ~ p:nth-of-type(2n+3):not(:nth-of-type(6n+1)){
  font-weight: 600;
}

即使您提到标记是静态的，你添加更多的列表的动物。显然，奇怪和正常动物的顺序不能改变。

Even though you mention that the markup is static, the above selector will work should you add more "lists" of animals. Obviously, the order of weird and normal animals cannot change. The weird animal has to be the 3rd and 5th in the order.

例如：

h2 ~ p:nth-of-type(2n+3):not(:nth-of-type(6n+1)) {
  font-weight: 600;
}

<div>
  <h2>Cats</h2>
  <p>Normal cat</p>
  <p>Normal cat</p>
  <p>Weird cat</p>
  <p>Normal cat</p>
  <p>Weird cat</p>
  <p>Normal cat</p>
  <h2>Dogs</h2>
  <p>Normal dog</p>
  <p>Normal dog</p>
  <p>Weird dog</p>
  <p>Normal dog</p>
  <p>Weird dog</p>
  <p>Normal dog</p>
  <h2>Birds</h2>
  <p>Normal bird</p>
  <p>Normal bird</p>
  <p>Weird bird</p>
  <p>Normal bird</p>
  <p>Weird bird</p>
  <p>Normal bird</p>
  <h2>Monkeys</h2>
  <p>Normal monkey</p>
  <p>Normal monkey</p>
  <p>Weird monkey</p>
  <p>Normal monkey</p>
  <p>Weird monkey</p>
  <p>Normal monkey</p>
</div>

这篇关于如何更大胆的元素与偏移后h元素的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！