Question

我在CSS方面不是更好。我必须在特定标签后更改字体颜色。例如。

<div class='showContent'>
    <ul>
    <li><span style='color:green;'><strong>Advantages</strong</span><strong>my title :</strong> My message </li> <!-- i should not change this because <strong> tag is not next to <li> tag , here <span> tag comes next to <li> -->
    <li><strong>my title :</strong> My message </li> <!-- i should change this title <strong> tag color because this comes next to <li> tag -->
    <li><strong>My title1 : </strong> My message my message <strong>My message in bold</strong> my message again </li>
    <li><span style='color:red;'>Disadvantages</span><strong>my title :</strong> My message </li>
    <li><strong>My title1 : </strong> My message my message <strong><a href=''>My message in bold</a></strong> my message again </li>
    </ul>
</div>

所以我的要求是，我必须将所有'<strong>my title</strong>'更改为仅在<li> tags旁边的某种颜色而不是在任何其他地方

所以我用css写了

.showContent li strong:first-line
{
   color : blue;
}

但它并没有改变。

Answer 1

仅改变直接第一个孩子的颜色。

试试这个：

.showContent ul li > strong:first-child {
   color : blue;
}

＆gt;运算符意味着它将仅选择匹配的子项这是已定义父级的直接子级（因此深一级），而不是匹配定义的所有级别的所有子项父节点。

<强> Credits

<强> JSFiddle Demo

感谢@MiljanPuzović

Answer 2

Demo

ul li strong
{
  color: red;
}

它将更改放在li下的所有强标记。

[另一个演示] （http://jsfiddle.net/GopsAB/458aR/2/）

如果您只想更改第一个强标签，可以使用此

ul li strong:nth-of-type(1)
{
  color: red;
}

[另一种方式] （http://jsfiddle.net/GopsAB/458aR/4/）

ul li strong:first-child
{
  color: red;
}

如果你想改变'showContent'下的所有强标签，你必须在.showContent

前面加上所有上面的css

Answer 3

您可以使用first-child属性设置第一个元素strong的颜色，例如：

strong:first-child{
   color: blue;
}

了解详情：http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 4

你可以做到

.showContent ul li strong
{
    color: red;
}

您可以查看演示here。

Answer 5

然后你可以尝试这样： DEMO

<强> CSS：

ul li span + strong
{
    color: blue;
}
ul li strong
{
    color: #c47400;
}

Answer 6

我将从不同角度处理这个问题。

您所说的我的标题是某种标题，所以也许使用hx代码。另一种方法是使用带有“标题”类的跨度。

Using an h3 tag

<div class='showContent'>
    <ul>
    <li><span style='color:green;'>Advantages</span><h3>my title :</h3> My message </li>
    <li><h3>my title :</h3> My message </li>
    <li><h3>My title1 : </h3> My message my message <strong>My message in bold</strong> my message again </li>
    <li><span style='color:red;'>Disadvantages</span><h3>my title :</h3> My message </li>
    <li><h3>My title1 : </h3> My message my message <strong><a href=''>My message in bold</a></strong> my message again </li>
    </ul>
</div>

CSS

.showContent ul h3
{
    font-weight:bold;
    display:inline;
    color:blue;
    font-size:1em;
}

.showContent ul *+h3
{
    color:inherit;
}

css在特定HTML标记后更改颜色

6 个答案: