css伪类选择器单个取消,CSS选择器，涉及伪类的第一个孩子和dropcap

小编典典

如果可以使用CSS3选择器，请尝试使用这些选择器(组合在一起)：

/* Select the first child if it's not a .quote */

article > p:not(.quote):first-child:first-letter,

/* Or, if the first child is a .quote, select the following one instead */

article > p.quote:first-child + p:first-letter

{

float: left;

font-family: Georgia, serif;

font-size: 360%;

line-height: 0.85em;

margin-right: 0.05em;

}

否则，我认为您必须进行一些替代才能获得所需的效果。

一些解释

所述否定伪类:not()总是处理独立地在化合物选择所有其他类型，ID和类和伪类。不管您如何与其他选择器一起安排它。

换句话说，您不能使用:not()从简单选择器其余部分匹配的选择中删除或过滤出与否定条件匹配的元素。这也意味着与:*-child()和:*-of-type()伪类匹配的元素集不受的影响:not()。

所以上面的第一个选择器

article > p:not(.quote):first-child:first-letter

大致是这样的：

找到每个p元素。

如果找不到，请忽略。

如果找到，请检查是否p为:first-child ， 如果为:not(.quote)。

如果不是第一个孩子，请忽略。

如果具有quote该类，请忽略。

如果它与两个伪类都匹配，请检查这是否p是的子类article。

如果没有，请忽略。

如果是这样，请抓住它:first-letter。

应用规则。

另一方面，第二个选择器相对简单：

article > p.quote:first-child + p:first-letter

它所要做的p就是将第一个孩子之后的，article如果它是a p.quote，然后对其应用规则:first-letter。

2020-05-16