css在特定HTML標記后更改顏色

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;
}

>運算符意味着它將僅選擇匹配的子節點，這些子節點是已定義父節點的直接子節點（因此深度為一級），而不是匹配定義父節點的所有級別上的所有子節點。

積分

JSFiddle演示

感謝@MiljanPuzović

Answer 2

演示

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;
}

你可以在這里看一下demo。

Answer 5

然后你可以嘗試這樣： DEMO

CSS：

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

Answer 6

我將從另一個角度來看待這個問題。

你在談論我的標題是某種標題，所以也許使用hx標簽。 另一種方法是使用帶有“標題”類的span。

使用h3標簽

<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;
}