ビデオタグの下にあるすべてのタグは、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 {}に変更すると、テキストが白く表示されます。また、スパンの内側にネストすることなく、メインのdiv内にテキストがある場合は、白として表示されます。 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 > span {color:white}

するか、あなたは（推奨されません）あなたのアプローチに従って進行したい場合は、ちょうどあなたのコードを変更

#main{color:white}

白の色を<span>タグに付けます。

出典

2017-12-02 21:03:20

ビデオタグの下にあるすべてのタグは、CSSコード

答えて

関連する問題