当前位置: 首页 > 面试题库 >

CSS选择器,涉及伪类的第一个孩子和dropcap

曹原
2023-03-14
问题内容

我需要格式化类似于下面的HTML。基本上,引号是 可选的 ,我需要删除正文段落的首字母。

<article>
 <p class="quote"> <!-- quote is optional -->
   Genius begins great works; labor alone finishes them.-- Joseph Joubert
 </p>
 <p> <!-- "L" is a dropcap -->
  Life is like a box of chocolates.
 </p>
 <p>...</p>
 <p>...</p>
</article>

我的CSS看起来像这样:

article > p:first-child:first-letter
{
 float: left;
 font-family: Georgia, serif;
 font-size: 360%;
 line-height: 0.85em;
 margin-right: 0.05em;
}
p.quote {
 font-weight: bold;
}

引入报价后,该功能目前不起作用。AFAIK我无法选择不是“
quote”类的文章的第一个子项P。如果无法弄清楚,我将使用jQuery,但现在我正在寻找一种仅使用CSS的方法。

提前致谢!


问题答案:

如果可以使用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

大致是这样的:

  1. 找到每个p元素。

    • 如果找不到,请忽略。
  2. 如果找到,请检查是否p:first-child 如果为:not(.quote)

    • 如果不是第一个孩子,请忽略。
    • 如果具有quote该类,请忽略。
  3. 如果它与两个伪类都匹配,请检查这是否p是的子类article

    • 如果没有,请忽略。
  4. 如果是这样,请抓住它:first-letter

  5. 应用规则。

另一方面,第二个选择器相对简单:

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

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



 类似资料:
  • 我有一个标签,包含几个标签。 我只能为第一个标记设置CSS属性: 但是,我下面尝试为每个标记设置CSS属性,但第一个除外,但都不起作用: 我如何用CSS写:“每个元素,除了第一个”?

  • 本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。 以下是正文。 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“伪类”。 静态

  • 问题内容: 我有一堆带有类名的元素,但是我似乎无法使用以下CSS规则选择第一个元素: 该选择器有什么问题,我该如何纠正? 多亏了这些评论,我才知道该元素必须是其父元素的第一个子元素才能被选中,而事实并非如此。我具有以下结构,并且该规则失败,如注释中所述: 我该如何针对上课的第一个孩子? 问题答案: 这是作者误解工作方式的最著名例子之一。在CSS2介绍,该伪类表示其父的第一个孩子。而已。有一个非常普

  • 问题内容: 以下是我的HTML页面的摘要: 在这里我想选择id =’platinum’的第三个td元素 我试过的是。 和 两者对于如何选择第三个td都不起作用 问题答案: 有一个没有ID 的空值,这会干扰计数。选择器的意思是“第n个元素”,而不是“第n个元素”。因此,具有该ID 的第三个实际上是整个行中的第四个。 使用CSS选择器无法选择具有特定ID 的第三个元素。您应该改用XPath:

  • 问题内容: 我试图在ID或类’B’的元素中选择类’A’的第一个元素。我尝试了> +和第一个子选择器的组合,因为它不是类元素’B’中的第一个元素。它起作用了,但是…我试图覆盖一些默认的CSS,并且我无法控制服务器端,似乎类’A’元素有时在不同的位置生成。这是一个例子: 有时,“ B”类的名称有所不同,“ A”之前的元素也有所不同。那么,有什么方法可以选择元素“ C”中首次出现的“ A”吗?因为“ C

  • 问题内容: 可以说我们有以下代码: 您将如何选择第一个属性等于3的孩子?我在想,也许这可以做到: …但是没有用 问题答案: 该伪类仅着眼于第一子节点,因此,如果第一个孩子是不是,则选择一无所有。 没有类似的属性过滤器伪类。一种简单的解决方法是选择每个对象,然后排除第一个对象之后的内容 当然,这仅适用于样式。如果您要出于样式之外的目的挑选该元素(因为标记看起来是任意XML而不是HTML),则必须使用