CSS에서 스타일 집합을 선언할 때 "."와 "#"의 차이점은 무엇입니까?

CSS에서 스타일 집합을 선언할 때 "."와 "#"의 차이점은 무엇입니까?

이 질문에는 이미 다음과 같은 답이 있습니다.

id와 클래스의 차이점은 무엇입니까? (17개 답변)

마감됨1년 전에.

사이의 차이점은 무엇입니까?#그리고..요소에 대한 스타일 집합을 선언할 때 그리고 어떤 것을 사용할지 결정할 때 실행되는 의미론은 무엇입니까?

네, 그들은 다릅니다...

#는 고유한 ID를 가진 단일 특정 요소를 대상으로 하는 데 사용되는 ID 선택기이지만 . 는 특정 클래스를 가진 여러 요소를 대상으로 하는 데 사용되는 클래스 선택기입니다.다른 말로 하자면:

• #foo {}속성으로 선언된 단일 요소 스타일 지정id="foo"
• .foo {}속성을 가진 모든 요소 스타일 지정class="foo"요소에 여러 클래스를 할당할 수도 있습니다. 예를 들어 공백으로 구분합니다.class="foo bar")

일반적인 용도

일반적으로 당신은 사이드바, 배너 영역 등과 같은 고급 레이아웃 디브와 같이 한 번만 나타나는 것을 스타일링하기 위해 #을 사용합니다.

는 스타일이를 들어 메시지에 수 . 예를 들어 오류 메시지의 헤더 형식을 머리글로 지정하고 스타일을 만들 수 있습니다.h1.error {}그것은 오직 에만 적용될 것입니다.<h1 class="error">

특수성

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

CSS 선택기에 대해 자세히 알아보기

CSS 선택기의 더 훌륭한 프라이머는 선택서를 참조하십시오. CSS 선택기는 믿을 수 없을 정도로 강력하며, 만약 당신의 개념이 단순히 "#이 DIV에 사용된다"라면 CSS를 더 효과적으로 사용하는 방법에 대해 정확히 읽어보는 것이 좋을 것입니다.

편집: Selectorial이 하늘의 큰 웹 사이트로 이동했을 수도 있으므로 대신 이 아카이브 링크를 사용해 보십시오.

그#일치한다는 것을 의미합니다.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 속성은 고유해야 하므로 특정 스타일이 필요한 요소가 둘 이상 있는 경우 클래스 이름을 사용해야 합니다.

점).)는 클래스 이름을 나타내며 해시(#)는 특정 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(#) 선택기가 b보다 더 구체적입니다(.) 선택합니다.따라서 id 문의 규칙이 클래스 문의 규칙을 재정의합니다.

예를 들어, 다음과 같은 두 가지 문장이 모두 있는 경우:

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

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

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

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

color:blue 규칙은 color:red 규칙을 재정의합니다.

이미 언급된 내용에 대한 몇 가지 간단한 설명입니다.

안 안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 ▁styles▁using여▁with를 사용한 특정 .main.menu그리고..sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

모두가 이미 언급한 것과 거의 같습니다.

마침표 (A간기(간).)는 클래스 및 해시를 나타냅니다.#)는 ID를 나타냅니다.

기본적인 차이점은 ID를 한 번 사용할 수 있는 반면 페이지의 클래스를 반복적으로 재사용할 수 있다는 것입니다.물론 WC3 기준을 고수한다면 그렇습니다.

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

ID 속성이 클래스 속성을 대체한다는 점도 유용합니다.

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

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

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

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

ID는 문서 전체에서 고유해야 하며, 요소 수에 관계없이 클래스를 공유할 수 있습니다.

#은 ID 선택기입니다.일치하는 ID를 가진 요소만 일치시킵니다.다음 스타일 규칙은 값이 "녹색"인 ID 특성을 가진 요소와 일치합니다.

#green {color: green}

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

rules 다은 음칙규설을하방법다니입는명가제aining▁te▁ap▁rules다▁expl니▁here입법방▁ofroach▁my다를 설명하는 방법입니다..style그리고.#style올바른 순서가 아닐 경우 서로를 재정의하거나 충돌을 일으킬 수 있는 행렬의 일부입니다.

여기 줄 서 있습니다.

매트릭스

#style 0,0,1,0 id

.style 0,1,0,0 class

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

언급URL : https://stackoverflow.com/questions/602168/in-css-what-is-the-difference-between-and-when-declaring-a-set-of-styles