[css] CSS에서 “.”의 차이점은 무엇입니까? 스타일 집합을 선언 할 때“#”?

예, 그들은 다릅니다 …

#은 고유 한 ID를 가진 단일 특정 요소 를 타겟팅하는 데 사용되는 id selector 이지만 A는 클래스 선택기 타겟팅하는 데 다수의 특정 클래스 요소. 다시 말하면 :

• #foo {}속성으로 선언 된 단일 요소의 스타일을 지정 합니다.id="foo"
• .foo {}속성으로 모든 요소의 스타일을 지정 합니다 ( 요소에 class="foo"여러 클래스를 할당 할 수 있습니다 (예 🙂 class="foo bar")

일반적인 용도

일반적으로 사이드 바, 배너 영역 등과 같은 높은 수준의 레이아웃 div와 같이 한 번만 표시되는 스타일을 지정하려면 #을 사용하십시오.

클래스는 스타일이 반복되는 곳에서 사용됩니다. 예를 들어 오류 메시지에 대한 특수한 형태의 헤더를 사용하는 h1.error {}경우에만 적용 되는 스타일 을 만들 수 있습니다<h1 class="error">

특성

셀렉터가 다른 또 다른 측면은 그 특성에 있습니다. id 셀렉터는 클래스 셀렉터보다 더 구체적으로 간주됩니다. 즉 , 요소 에서 스타일이 충돌 하는 경우보다 구체적인 선택기로 정의 된 스타일 은 덜 특정한 선택기를 재정의합니다. 예를 들어, 주어진 <div id="sidebar" class="box">위해 어떤 규칙을 #sidebar재정의 규칙과 충돌.box

CSS 선택기에 대해 더 알아보기

CSS 셀렉터에 대한 더 좋은 입문서는 Selectutorial 을 참조하십시오. 엄청나게 강력하며 개념이 단순히 “#이 DIV에 사용된다”는 것이라면 CSS를보다 효과적으로 사용하는 방법을 정확하게 읽어 보는 것이 좋습니다.

편집 : Selectutorial이 하늘의 큰 웹 사이트로 이동 한 것 같습니다. 대신 이 아카이브 링크 를 사용해보십시오 .

답변

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

<style>
   #name { ... }
</style>

<div id="name"></div>

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

<h1 id="specials" class="headline">Today's Specials</h1>

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

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

<div id="class"></div>