Question

<ol>
  <li>Text</li>
  <li>Text</li>
  <li><a href="#"> Hyper Text 1</a></li>
  <li><a href="#"> Hyper Text 2</a></li>
  <li>Text</li>
</ol>

我想仅在第二个锚标记（超文本2）上应用css。我想只在可能的情况下用css做。我搜索了很多，但无法弄清楚如何做到这一点。

更新：我不知道将来会在列表中添加多少li。我不想一次又一次地改变第n项（不是）。这就是为什么只把第二个孩子放在李身上也无济于事。但我证明带有锚标签的li只会是2。

Answer 1

请注意：此答案为OP的具体问题提供了一个可能的解决方案，该问题已经澄清in a comment并且不必须解决问题问题的标题＆＃34;如何在第n个列表项的锚标记上应用css？＆＃34; 。

如果你...

可以控制这些链接指向的网址，
不要指望这些网址突然改变（除非你也改变了CSS），

...然后您可能想要使用CSS attribute selectors。

使用此HTML指定菜单：

<ol class="some-menu">
  <li>Text</li>
  <li>Text</li>
  <li><a href="http://url_abc#"> Hyper Text 1</a></li>
  <li><a href="http://url_def#"> Hyper Text 2</a></li>
  <li>Text</li>
</ol>

...您可以根据该元素的属性值选择具有CSS的特定元素：

ol.some-menu li a[href*="url_def"] {
  outline: 5px solid red;
}

此选择器选择<a>值href 的所有url_def元素 - 这些元素也位于<li>内，位于<ul class="some-menu">内//create scatter series to draw point m_pSeries1 = new QtCharts::QScatterSeries(); m_pSeries1->setName("trig"); m_pSeries1->setMarkerSize(100.0); //draw a thin rectangle (50 to 50) QPainterPath linePath; linePath.moveTo(50, 0); linePath.lineTo(50, 100); linePath.closeSubpath(); //adapt the size of the image with the size of your rectangle QImage line1(100, 100, QImage::Format_ARGB32); line1.fill(Qt::transparent); QPainter painter1(&line1); painter1.setRenderHint(QPainter::Antialiasing); painter1.setPen(QColor(0, 0, 0)); painter1.setBrush(painter1.pen().color()); painter1.drawPath(linePath); //attach your image of rectangle to your series m_pSeries1->setBrush(line1); m_pSeries1->setPen(QColor(Qt::transparent)); //then use the classic QtChart pipeline...元素。

工作示例：https://codepen.io/anon/pen/jxWmxR。

属性选择器确实有一些 modi operandi 可用，这里有很好的描述：MDN web docs。

Answer 2

您可以使用 jQuery ：

进行一些操作

＆＃13;

$('li:has(a) a').last().css('color','red');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li><a href="#">Hyper Text 1</a></li>
  <li><a href="#">Hyper Text 2</a></li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

＆＃13;

Answer 3

只有css是不可能的......你可以做的一件事就是简单地将类添加到第二个锚标签......然后你就去了..

＆＃13;

.Changecolor{
color:green;
}

＆＃13;

<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li><a href="#"> Hyper Text 1</a></li>
  <li><a href="#" class="Changecolor"> Hyper Text 2</a></li>
  <li>Text</li>
</ol>

＆＃13;

如何在第n个列表项的锚标记上应用css？

3 个答案: