CSS에서 "."의 차이점은 무엇입니까? 스타일 세트를 선언 할 때 "#"?

StackOverflow https://stackoverflow.com/questions/602168

  •  03-07-2019
  •  | 
  •  

문제

차이점은 무엇 입니까? # 그리고 . 요소에 대한 스타일 세트를 선언할 때 어떤 스타일을 사용할지 결정할 때 작용하는 의미는 무엇입니까?

도움이 되었습니까?

해결책

응, 둘은 달라...

# 이다 아이디 선택기, 다음을 타겟팅하는 데 사용됩니다. 하나의 고유한 ID를 가진 특정 요소이지만 .는 클래스 선택자 타겟팅하는 데 사용됨 다수의 특정 클래스를 가진 요소.다른 말로 하면:

  • #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 선택기에 대한 더 훌륭한 입문서는 놀라울 정도로 강력합니다. 단순히 "#은 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 속성은 고유해야합니다, 특정 스타일이 필요한 요소가 둘 이상인 경우 클래스 이름을 사용해야합니다.

점 (.)는 a를 의미합니다 수업 해시의 이름#)은 특정 요소를 의미합니다 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>

또한 주목할만한 가치가 있습니다 종속, an 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>

그만큼 파란색 규칙은 색상 : 빨간색 규칙.

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

an 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
{ ... }

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

기간 (.)을 나타냅니다 수업, 및 해시 (#)를 나타냅니다 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 자세한 내용은

다음은 TE 규칙을 설명하는 내 aproach입니다 .style 그리고 #style 매트릭스의 일부입니다. 올바른 순서가 아니라면 서로를 무시하거나 충돌을 일으킬 수 있습니다.

여기 라인업이 있습니다.

행렬

#style 0,0,1,0 id

.style 0,1,0,0 class

이 두 가지를 무시하려면 사용할 수 있습니다 <style></style> 마녀는 매트릭스 레벨을 가지고 있습니다 1,0,0,0.그리고 @Media query는 위의 모든 것을 무시할 것입니다 ... 나는 이것에 대해 잘 모르겠지만 ID 선택기는 생각합니다. # 한 페이지에서 한 번만 사용할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top