首页 新闻 会员 周边

CSS选择器结果为什么出乎意料?

0
悬赏园豆:10 [已解决问题] 解决于 2023-01-20 10:16

对于这个页面
https://fanyi.baidu.com/#en/zh/certainly
我的CSS选择器.entry-x:first-of-type p.entry-x-en预览的时候是能够选中这两个元素的,如图所示

但实际效果只能选中后一个元素,请问是什么原因?我用document.querySelectorAll('.entry-x:first-of-type p.entry-x-en')发现也只能选中后一个元素,真是奇怪了,我的原始需求请看这里https://q.cnblogs.com/q/142459/ ,望高手给个解决方案,谢谢!

css
iMath的主页 iMath | 菜鸟二级 | 园豆:202
提问于:2023-01-18 14:47
< >
分享
最佳答案
1

因为第一条前面有个 <div class="entry-xr f-gap-top">(就是那个同义词),这个元素才是 first-of-type

收获园豆:10
by.Genesis | 老鸟四级 |园豆:2719 | 2023-01-18 14:59

谢谢!CSS选择器里用到的类是.entry-x,而你说的同义词的类是entry-xr,二者不一样啊,所以怎么还会有这个问题?我不理解

iMath | 园豆:202 (菜鸟二级) | 2023-01-18 15:09

@iMath: .entry-x:first-of-type 是一个多类选择器,表示匹配的元素同时满足 .entry-x 和 :first-of-type,第一条那个同义词元素虽然满足 :first-of-type 但是不满足 .entry-x,所以没有匹配上;而 “要是不治疗,她十有八九会死。” 这句话虽然满足 .entry-x 但他已经不是 :first-of-type 了,所以也没有匹配上
我猜你应该是想从所有同级的 .entry-x 元素中匹配出第一个,这个时候可以用 :nth-child(n of selector) 这种方式,不过这种选择器目前只有 Safari 支持,写出来应该像这样

:nth-child(1 of .entry-x) {
  color: red; /* 仅 Safari */
}
by.Genesis | 园豆:2719 (老鸟四级) | 2023-01-18 15:18

@by.Genesis:
(1)结合文档的说明https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
.entry-x:first-of-type的意思按我的理解就是选择所有类为entry-x的同级元素中的第一个(这也是我的目的),我想理应选中“Without treatment, she will almost certainly die.”才对,但实际则不然,所以我的理解到底错在哪里了呢?能否举例说明下,我愿意付费请教,微信2281570025

(2)【而 “要是不治疗,她十有八九会死。” 这句话虽然满足 .entry-x 但他已经不是 :first-of-type 了】,大哥你这句话里的“但他已经不是 :first-of-type 了”,怎么让我感觉:first-of-type 的意思等同:first-child呀?这是我不理解的。另外即便把 :first-of-type 换成 :last-of-type 也无法选中第一种意思下面的任何例句,也是奇怪,我理解又出问题了?

iMath | 园豆:202 (菜鸟二级) | 2023-01-18 17:21

@iMath: :first-child 匹配同级所有元素的第一个,
:first-of-type 匹配同级相同元素的第一个,这里说的相同是指元素名相同,比如 div 和 div 相同,img 和 img 相同,如果同级中有多种元素,那么这个选择器可以匹配多个元素出来,比如所有同级 div 中的第一个 div,所有同级 img 中的第一个 img,
.entry-x:first-of-type 的意思 不是 把同级具有 entry-x 类的元素中的第一个匹配出来,而是匹配的元素需要同时满足两个条件,既要有 entry-x 类,同时也是同级中具有相同元素名元素的第一个,
匹配所有类为entry-x的同级元素中的第一个,就要用 :nth-child(1 of .entry-x),不过现在只有苹果浏览器支持这种语法
另外付费就不用了,如果有帮助的话,抽空帮我点点赞就谢谢了

by.Genesis | 园豆:2719 (老鸟四级) | 2023-01-19 10:40

@by.Genesis: 谢谢大哥!之前确实是对:first-of-type的功能理解不到位造成的困惑,想不到一个css选择器会有如此玄机,目前是我碰到过的最难的一个。后面我用Python 解决了。

import bs4
allClassList=[['entry-x', 'f-color-brown', 'f-gap-top'],['mean-example']]
def isFirstExampleSentence(element):
    for classList in allClassList:
        if element.get_attribute_list('class')==classList and not element.find_previous_sibling(class_=' '.join(classList)):
            return True

soup = bs4.BeautifulSoup(htmltext, "html.parser")
exampleSentenceElementList=soup.find_all(isFirstExampleSentence)
iMath | 园豆:202 (菜鸟二级) | 2023-01-19 23:51
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册