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이 하늘의 큰 웹 사이트로 이동 한 것 같습니다. 대신 이 아카이브 링크 를 사용해보십시오 .

는 #가 일치하는 것을 의미 id요소의이. 는 .클래스 이름을 의미한다 :

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


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

HTML 문서 에서 id 속성은 고유해야 하므로 특정 스타일이 필요한 요소가 둘 이상인 경우 클래스 이름을 사용해야합니다.

dot ( .)은 클래스 이름을 나타내며 해시 ( #)는 특정 id 속성을 가진 요소를 나타냅니다 . 클래스는 해당 특정 클래스로 장식 된 모든 요소에 적용되며 # 스타일은 해당 특정 ID를 가진 요소에만 적용됩니다.

수업 명 :

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

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

명명 된 요소 :

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

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

또한에 있음을 주목할 필요가있다 캐스케이드 , ID ( #) 선택이 더 특정 AB (이상 .) 선택기. 따라서 id 문의 규칙은 클래스 문의 규칙보다 우선합니다.

예를 들어, 다음 내용이 모두 해당되는 경우 :

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

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

동일한 HTML 요소에 적용됩니다.

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

색상 : 블루 규칙은 무시 것이다 빨간색 : 컬러 규칙을.

이미 말한 것에 대한 몇 가지 빠른 확장 ...

은 id고유해야합니다,하지만 당신은 다른 스타일을보다 구체적를 만들기 위해 동일한 ID를 사용할 수 있습니다.

예를 들어, 다음 HTML 추출이 주어진 경우 :

<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및.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

.class 다음 요소를 대상으로합니다.

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

#class 다음 요소를 대상으로합니다.

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

ID는 문서 전체에서 고유해야하며 여러 요소가 클래스를 공유 할 수 있습니다.

거의 모든 사람들이 이미 언급 한 것처럼 :

마침표 ( .)는 클래스를 나타내고 해시 ( #)는 ID를 나타냅니다 .

기본적인 차이점은 페이지의 클래스를 계속해서 재사용 할 수 있고 ID는 한 번만 사용할 수 있다는 것입니다. 물론 WC3 표준을 고수하는 경우입니다.

동일한 ID를 가진 여러 요소가있는 경우 페이지가 계속 렌더링되지만 해당 요소가 고유하지 않기 때문에 해당 요소를 ID로 호출하여 동적으로 업데이트하려고하면 문제가 발생합니다.

ID 속성이 클래스 속성을 대체한다는 점에도 유의하십시오.

#은 id 선택기입니다. ID가 일치하는 요소 만 일치합니다. 다음 스타일 규칙은 id 속성이있는 요소와 "green"값이 일치합니다.

#green {color: green}

자세한 내용은 http://www.w3schools.com/css/css_syntax.asp 를 참조하십시오

여기에 설명 테 규칙 제 aproach입니다 .style및 #style매트릭스의 일부입니다. 올바른 순서가 아닌 경우 서로 무시하거나 충돌을 일으킬 수 있습니다.

라인업입니다.

매트릭스

#style 0,0,1,0 id

.style 0,1,0,0 class

이 두 가지를 재정의하려면 <style></style>마녀가 매트릭스 수준을 사용하거나 1,0,0,0. @media 쿼리가 위의 모든 것을 재정의 할 수 있습니다 ...이 확실하지 않지만 ID 선택기 #는 한 페이지에서 한 번만 사용할 수 있다고 생각합니다 .