は#control {} CSSではなく、HTMLやJS

Question

IはCodepen（以下のリンクを参照）Codeplayerためにこのコードを通過したが、ある理由#control {}がCSSコードにリストされなくHTMLまたはJSコードのいずれかに記述されています。だれかが私に理由を教えてくれますか？これは間違いですか？私はWeb開発の初心者ですので、これが標準かどうかを理解したいと思っています。ありがとう！

https://codepen.io/likezli/pen/dXPdJL

CSSコード：

body { 
     margin: 0; 
     padding: 0; 
     font-family: 'Lato', sans-serif; 
    } 

    li { 
     list-style: none; 
     float: left; 
    } 

    a { 
     color: black; 
    } 

    .clear { 
     clear: both; 
    } 

    #logo { 
     font-weight: bold; 
     padding: 10px 0 0 10px; 
     float: left; 
    } 

    #menuBar { 
     height: 40px; 
     width: 100%; 
     background-color: #EDEDED; 
     border-bottom: 1px solid #C8C8C8; 
     box-sizing: border-box; 
    } 

    #buttonDiv { 
     float: right; 
     padding: 5px 15px 0 0; 
    } 

    #runButton { 
     font-size: 110% 
    } 

    #control {} 

    #toggleDiv { 
     height: 40px; 
     margin: auto; 
     width: 20%; 
     box-sizing: border-box; 
     padding-top: 5px; 
     position: relative; 
    } 

    #toggles { 
     float: left; 
     margin: 0; 
     list-style: none; 
     padding-left: 0; 
     box-sizing: border-box; 
     border: 1px solid #D3D3D3; 
     border-radius: 5px; 
    } 

    #toggles li { 
     float: left; 
     border-right: 1px solid #D3D3D3; 
     box-sizing: border-box; 
     padding: 5px 8px 4px 7px; 
    } 

    .codeContainer { 
     height: 100%; 
     width: 50%; 
     float: left; 
     position: relative; 
    } 

    .codeContainer textarea { 
     width: 100%; 
     height: 100%; 
     border: none; 
     border-right: 1px solid #E5E5E5; 
     font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace; 
     font-size: 90%; 
     box-sizing: border-box; 
     padding: 30px 0 5px 5px; 
    } 

    .codeLabel { 
     position: absolute; 
     right: 10px; 
     top: 10px; 
    } 

    #cssContainer, 
    #jsContainer { 
     display: none; 
    } 

    iframe { 
     height: 100%; 
     position: relative; 
     width: 100%; 
     border: none; 
     padding-top: 30px; 
    } 

    .selected { 
     background-color: #EAF3FF; 
    } 

    a { 
     text-decoration: none; 
    } 

    a:visited { 
     color: #000000; 
    } 

**here is the html code:** 

     <div id="container"> 
     <div id="menuBar"> 
     <div id="logo"> 
      CodePlayer 
     </div> 

     <div id="buttonDiv"> 
      <button id="runButton">Run</button> 
     </div> 

     <div id="toggleDiv"> 
      <ul id="toggles"> 
      <a href="#"> 
       <li class="toggle selected">HTML</li> 
      </a> 
      <a href="#"> 
       <li class="toggle">CSS</li> 
      </a> 
      <a href="#"> 
       <li class="toggle">JS</li> 
      </a> 
      <a href="#"> 
       <li class="toggle selected" style="border:none">Result</li> 
      </a> 
      </ul> 
     </div> 


     </div> 

     <div class="clear"></div> 

     <div class="codeContainer" id="htmlContainer"> 
     <div class="codeLabel">HTML</div> 
     <textarea id="htmlCode"><div id="test"></div></textarea> 
     </div> 

     <div class="codeContainer" id="cssContainer"> 
     <div class="codeLabel">CSS</div> 
     <textarea id="cssCode"></textarea> 
     </div> 

     <div class="codeContainer" id="jsContainer"> 
     <div class="codeLabel">Javascript</div> 
     <textarea id="jsCode"></textarea> 
     </div> 

     <div class="codeContainer" id="resultContainer"> 
     <div class="codeLabel">Output</div> 
     <iframe id="resultFrame"></iframe> 
     </div> 
    </div> 

**JS Code:** 

var windowHeight = $(window).height(); 
var menuBarHeight = $("#menuBar").height(); 

// code container height calculated 
var codeContainerHeight = windowHeight - menuBarHeight; 
$(".codeContainer").height(codeContainerHeight + "px"); 

// Toggling between HTML, CSS, JS and Output 
$(".toggle").click(function(event) { 
    // toggle items in menuBar 
    $(this).toggleClass("selected"); 

    // get html of list item (html, css, js or result) in lowercase 
    var activeDiv = $(this).html().toLowerCase(); 

    // combine it to one of the cor container id's (htmlContainer, cssContainer, etc.) 
    // toggle show or hide 
    $("#" + activeDiv + "Container").toggle(); 

    // count the container id's which are not hidden (display != none) 
    var showingDivs = $(".codeContainer").filter(function() { 
    return ($(this).css("display") != "none"); 
    }).length; 

    // 100% width divided by active divs 
    var width = 100/showingDivs; 

    // set the width 
    $(".codeContainer").width(width + "%"); 

}); 

$("#runButton").click(function(event) { 
    // find html tag in iframe and set this to html("text") 
    $("iframe").contents().find("html").html('<style>' + $("#cssCode").val() + '</style>' + $("#htmlCode").val()); 

    // run javascript code in iframe 
    document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val()); 
}); 

Answer 1

任意のIDがある場合は,,} {#controlを言ったように私たちは,,, CSSで何idのスタイル、またはクラスを作成することができますまたはタグ/要素に割り当てられたクラスの場合、スタイルだけが反映されます。そうでなければ、CSSは適用されません。