anhaoGS 发表于 2018-10-4 21:03:44

CSS选择每个div的第一个子代元素p怎么实现啊?

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                div > p:first-child {
                        color: red;
                }

        </style>
</head>
<body>
        <div>
                <ul>列表1</ul>
                <p>列表2</p>
                <p>列表3</p>
                <p>列表4</p>
                <p>列表5</p>
        </div>
        <div>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
        </div>
        <div>
                <s>列表</s>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
        </div>
        <div>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
        </div>
        <div>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
        </div>
</body>
</html>

在东边 发表于 2018-10-5 00:14:55

from bs4 import BeautifulSoup

html = '''
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
                div > p:first-child {
                        color: red;
                }

      </style>
</head>
<body>
      <div>
                <ul>列表1</ul>
                <p>列表2</p>
                <p>列表3</p>
                <p>列表4</p>
                <p>列表5</p>
      </div>
      <div>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
      </div>
      <div>
                <s>列表</s>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
      </div>
      <div>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
      </div>
      <div>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
                <p>列表</p>
      </div>
</body>
</html>
'''

soup = BeautifulSoup(html, 'lxml')
p = soup.select('div > p:nth-of-type(1)')

不二如是 发表于 2018-10-5 09:09:46

1、目前鱼油的CSS是div下的第一个元素是p的添加样式。
    div > p:first-child {
            color: red;
      }

显然:
<div>
    <ul>列表1</ul>
    <p>列表2</p>
    <p>列表3</p>
    <p>列表4</p>
    <p>列表5</p>
</div>

第一个div下的第一个元素不是p,所以无法实现效果。

2、想要实现div下出现的第一个元素p添加样式,最‘傻’的办法指定class(id也行)。



页: [1]
查看完整版本: CSS选择每个div的第一个子代元素p怎么实现啊?