CSS-p::第一个字母:not不起作用

Question

我必须增加每个不是class="ejemplo"或id="lectura"的P元素的第一个字母的大小。

这非常有效：

p::first-letter {
  font-size: 300%;
}

但是，当我尝试匹配需求并这样做时，它不起作用：

p::first-letter:not([class="ejemplo"]):not([id="lectura"]) {
  font-size: 300%;
}

我是CSS的初学者，我做错了什么？

Answer 1

伪元素::first-letter必须位于语句的最后：

订单很重要：

MDN的文档：

在选择器中只能使用一个伪元素它必须出现在语句中的简单选择器之后。

因此：

p:not([class="ejemplo"]):not([id="lectura"])::first-letter {
  font-size: 300%;
}

<p>Loren Ipsum Dolor Sit Amet</p>
<p class="ejemplo">Loren Ipsum Dolor Sit Amet</p>
<p id="lectura">Loren Ipsum Dolor Sit Amet</p>

此外

请记住，对于id选择，请使用#id而不是[id='']，使用.class而不是[class='']

p:not(.ejemplo):not(#lectura)::first-letter {

Answer 2

使用：

p:not([class="ejemplo"]):not([id="lectura"])::first-letter {

相反：

p::first-letter:not([class="ejemplo"]):not([id="lectura"]) {

Answer 3

您应该在最后一个添加::first-letter

p:not(.ejemplo):not(#lectura)::first-letter{
  font-size: 300%;
}

<p>test</p>
<p id="lectura">test</p>
<p class="ejemplo">test</p>