选择某个元素时遇到问题答案

【问题标题】：Trouble selecting a certain element选择某个元素时遇到问题
【发布时间】：2017-09-05 01:11:48
【问题描述】：

我编写了一个 CSS 选择器来从网页中选择特定元素。执行后，我可以看到我的选择器能够找到“流派：”，但我想要它的值，在这种情况下是“戏剧”。我该怎么做？

我试过了：

.mdif li b

项目所在的元素：

<div class="mdif">
<ul>
    <li><b>Genre:</b>Drama</li>
    <li><b>Quality:</b>1080p</li>
    <li><b>Screen:</b>1920x1080</li>
    <li><b>Size:</b>1.67G</li>
    <li><b>Rating:</b>6.1/10</li>
    <li><b>Peers:</b>17</li>
    <li><b>Seeds:</b>0</li>
</ul>
<a href="/movie/55000/download-lake-mungo-2008-1080p-mp4-yify-torrent.html" class="small button orange" target="_blank" title="Download Lake Mungo (2008) 1080p YIFY Torrent">Download</a>

【问题讨论】：

你试过.mdif > li > b 吗？这意味着您选择了一个子元素。
您能进一步解释一下吗？你想用 CSS 做什么？
@D.Simon 不行，如果你使用>，你必须考虑到父母。所以你必须像这样修改它：.mdif > ul > li > b
将值包装在 span 中并使用此选择器：.mdif li > span
感谢jackjop，您的评论。是的，此时我需要解释一下。我想在我的脚本中使用这个选择器来解析“类型：”的值，即“戏剧”。

标签： python css-selectors lxml

【解决方案1】：

如果我能够正确理解您的问题，请使用

var text_val = $('.mdif').children('Genre').text();

考虑到每个都有一个 id，将帮助您选择值，例如：

HTML：

<div id='first'>
    <div id='Genre'>Drama</div>
    <div id='Quality:'>1080p</div>
    <div id='Screen:'>1920x1080</div>
    <div id="Size:">1.67G</div>

</div>

CSS：

var text_val = $('.mdif').children('div').text();

您可以在这里查看jsfiddle

如果您正在寻找其他内容，请指定。谢谢。

【讨论】：

【解决方案2】：

您可以将所需的样式应用到.mdif li 并将此样式重置为.mdif li b

ul {
  list-style: none;
}
ul li {
  color: #ccc;
}

ul li b {
  color: #000;
}

<ul>
  <li><b>Title: </b>some text 1</li>
  <li><b>Title: </b>some text 2</li>
  <li><b>Title: </b>some text 3</li>
  <li><b>Title: </b>some text 4</li>
</ul>

【讨论】：

这是正确的，并且将是最好的解决方法（无需求助于脚本 ^_^） - 但我建议您编辑答案以包含一个工作示例您的意思是任何可能需要更好上下文的潜在未来用户。祝你好运:)
啊完美 - 不错的编辑。这正是我的意思。干得好！
@Frits：这与“求助于”脚本无关。用例涉及脚本，而不是样式元素。
@BoltClock 啊，我明白了，我误解了问题的初衷（认为它与元素的第二部分的样式有关）并且很高兴看到提供解决方案的答案没有使用脚本来做到这一点。感谢您指出我的错误:)
@Frits：这个问题最初被错误地标记了，所以我不怪你。

【解决方案3】：

看到这个我选择了戏剧。

.mdif > ul > li > i{
	color:red;
}

&lt;div class="mdif"&gt;&lt;ul&gt;&lt;li&gt;&lt;b&gt;Genre:&lt;/b&gt;&lt;i class="one"&gt;Drama&lt;/i&gt;&lt;/li&gt; &lt;li&gt;&lt;b&gt;Quality:&lt;/b&gt;1080p&lt;/li&gt; &lt;li&gt;&lt;b&gt;Screen:&lt;/b&gt;1920x1080&lt;/li&gt; &lt;li&gt;&lt;b&gt;Size:&lt;/b&gt;1.67G&lt;/li&gt; &lt;li&gt;&lt;b&gt;Rating:&lt;/b&gt;6.1/10&lt;/li&gt; &lt;li&gt;&lt;b&gt;Peers:&lt;/b&gt;17&lt;/li&gt; &lt;li&gt;&lt;b&gt;Seeds:&lt;/b&gt;0&lt;/li&gt; &lt;/ul&gt;&lt;a href="/movie/55000/download-lake-mungo-2008-1080p-mp4-yify-torrent.html" class="small button orange" target="_blank" title="Download Lake Mungo (2008) 1080p YIFY Torrent"&gt;Download&lt;/a&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

HTML

<div class="mdif">
  <ul>
    <li><b>Genre:</b><span>Drama</span></li>
    <li><b>Quality:</b><span>1080p</span></li>
    <li><b>Screen:</b><span>1920x1080</span></li>
  </ul>
</div>

CSS 选择器

.mdif li span

【讨论】：

【解决方案5】：

使用这个：

.mdif li:first-child { 
  color: red;
} 

.mdif li:first-child b{
  color: #000;
}

li {
  list-style-type: none;
  position: relative;
} 

li:before {
  content: '';
  width: 5px;
  height: 5px;
  background-color: #000;
  border-radius: 100%;
  position: absolute;
  left: -15px;
  top: 8px;

}

.mdif li:first-child { 
  color: red;
} 

.mdif li:first-child b {
  color: #000;
}

<div class="mdif">
   <ul>
    <li><b>Genre:</b><span>Drama</span></li>
    <li><b>Quality:</b><span>1080p</span></li>
    <li><b>Screen:</b><span>1920x1080</span></li>
    <li><b>Size:</b><span>1.67G</span></li>
    <li><b>Rating:</b><span>6.1/10</span></li>
    <li><b>Peers:</b><span>17</span></li>
    <li><b>Seeds:</b><span>0</span></li>
    </ul>
    <a href="/movie/55000/download-lake-mungo-2008-1080p-mp4-yify-torrent.html" class="small button orange" target="_blank" title="Download Lake Mungo (2008) 1080p YIFY Torrent">Download</a>
</div>

【讨论】：

【解决方案6】：

终于找到了解决办法。这是完整的代码。

上面帖子中也粘贴了Html元素：

html = '''
<div class="mdif">
<ul>
    <li><b>Genre:</b>Drama</li>
    <li><b>Quality:</b>1080p</li>
    <li><b>Screen:</b>1920x1080</li>
    <li><b>Size:</b>1.67G</li>
    <li><b>Rating:</b>6.1/10</li>
    <li><b>Peers:</b>17</li>
    <li><b>Seeds:</b>0</li>
</ul>
</div>
'''

脚本：

from lxml.html import fromstring

root = fromstring(html)
for items in root.cssselect(".mdif li"):
    item = items.cssselect("b")[0].tail.strip()
    print(item)

结果：

Drama
1080p
1920x1080
1.67G
6.1/10
17
0

【讨论】：