CSS - p::first-letter: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的初学者，那么我做错了什么呢？

- Drumnbass

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 {

- LcSalazar

---

@torazaburo：对于伪元素，似乎是这样的。请尝试使用问题中提供的选择器，但它不起作用。 - Harry

@torazaburo，你有试着运行这段代码片段吗？ - Daemedeor

它也在官方规范中 - http://www.w3.org/TR/css3-selectors/#pseudo-elements - Harry

@LcSalazar，它起作用了！但是如果我有两个或更多的类别不应用样式呢？是否有像 not(.ejemplo||.ejemplo2||.ejemplo3) 这样的内容？还是说我应该为每个类别重复使用 :not 选择器？ - Drumnbass

据我所知，:not 不能使用复杂的选择器，因此您很可能需要重复它。 - Harry

@Drumnbass - 看一下这个问题：https://dev59.com/IHA75IYBdhLWcg3wW3sZ - LcSalazar

Answer 2

使用：

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

相反:

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

- lmgonzalves

---

@torazaburo 这是和其他人一样的答案，而且它有效！ - lmgonzalves

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>

- Manwal