視頻標籤下方的任何標籤根據CSS代碼

沒有格式化我在HTML和CSS一個完整的初學者。我試過一些東西，有時寫的CSS代碼有時不起作用，但我不知道爲什麼？我的錯誤或錯誤在哪裏？請幫我看一下代碼，這段代碼中的錯誤是，視頻標籤之後的任何內容都不會改變它的顏色。視頻標籤下方的任何標籤根據CSS代碼

<!DOCTYPE html> 
<html> 
<head> 
    <title> 

     Just some experiments 

    </title> 
<link href="./c.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

    <h1 class="header"> 

     This is the first and biggest heading 

    </h1> 

    <h2> 

     Now comes the subheading. 

    </h2> 


    <h3 id="subheading"> 

     This is the third sub-heading. For this third sub-heading styling I 
used the styling by the adjacent selectors i.e. h2+h3 

    </h3> 
    <h3 id="subheading"> 
    This is the fourth sub-heading which has the size as that of the third 
sub-heading.</h3> 
    <p> 

     This is supposed to be a paragraph. So without any waste of time, 
I'll be pasting LOREM IPSUM.Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not only five 
centuries, but also the leap into electronic typesetting, remaining 
essentially 
    unchanged. It was popularised in the 1960s with the release of Letraset 
sheets 
containing Lorem Ipsum passages, and more recently with desktop publishing 
    software like Aldus PageMaker including versions of Lorem Ipsum 
     <br> 
     <span href="css.txt">This is the child of the above paragraph. 
    </span><br> 
     <span id="vanquish">The name of the class of this span tag is just 
seriously random and really means nothing but at the same time means a lot 
    to 
many of the youths.<br> Vanquish is the flagship model of the Aston Martin. 
</span> 
     <span href="desertsunset.png" id="vanquish"> Now we are out of the 
previous span tag.now stepping into new span tag.</span>  
    </p> 


    <span> This is written in the span tag which is outside of the 
paragraph tag which is only the descendent of the body tag.</span> 

    <video src="./video.MP4" width=640 height=480 controls> 
    Video is not supported by your browser</video> 

    <div id="main"> 
     <span>Hi this is Srajan</span> 
     <span>This is the paragraph inside another paragraph</span> 
     <div> This is inside the div tag and now we'll be adding inside another p tag 
      <p>So this is actually being written inside two levels deep to the initial p tag. </p> 
     </div> 
    </div> 

</body>

現在的CSS代碼。

*{ 
    font-family: arial; 
    color: lightgreen; 
    border-radius: 50px; 
} 

body{ 
    background-color: black; 
} 

h2+h3{ 
    color: aqua; 
} 

#subheading{ 
    color: lavenderblush; 
} 

span[href]{ 
    color: aqua; 
} 

#main{ 
    font-size: 20px; 
    font-family: monospace; 
    color: white; 
}

正如所預期的結果必須改變視頻下方的標籤的顏色，但它並沒有發生請解釋爲什麼？

來源

2017-12-02 user8590061

請把它放到Plunker（https://plnkr.co/），並在這裏發佈適當的源代碼部分，謝謝。 – Lonely

如果您使用瀏覽器工具並檢查相關元素，則可以看到原因。嵌套在「main」中的任何元素都將通過* CSS樣式設置其樣式，因爲它沒有明確設置。如果您將CSS的#main {}部分更改爲#main span {}，則會將文本顯示爲白色。此外，如果您將主文檔內的文本嵌入到跨度中，則顯示爲白色。 TL; DR - 如果您沒有明確地爲特定類型的div設置樣式，那麼您在「*」中設置的任何內容都將優先。 – ecg8

好的，所以這裏的問題不是<video></video>標籤。問題是與

*{ 
    font-family: arial; 
    color: lightgreen; 
    border-radius: 50px; 
}

在這裏你給

顏色：淺綠;

您的html文檔中的每一行文字。所以，當你寫的`

#main{color:white;}

這僅適用於你寫它的元素。在這種情況下，只有<div></div>元素獲得白色文本。所以，當你寫<span>在<div>的<span>採取默認的顏色，即淺綠。爲了更好的理解，你可以嘗試運行此代碼：

<div id="main"> 
this text will be white 
<span>this text will be lightgreen</span> 
</div>

爲了避免這個問題，不要將整個文檔給淺綠的顏色。而不是讓一個類

.gr{color:lightgreen;}

，並把它添加到你想淺綠的標籤。或者，如果你想按你的方法（不推薦）進行，那麼就改變你的代碼

#main{color:white}

到

#main > span {color:white}

這將適用白色到<span>標籤。

來源

2017-12-02 21:03:20

視頻標籤下方的任何標籤根據CSS代碼

回答

相關問題