视频标签下方的任何标签根据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代码

回答

相关问题