CSS에서 "."의 차이점은 무엇입니까? 스타일 세트를 선언 할 때 "#"?
-
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 선택기는 생각합니다. #
한 페이지에서 한 번만 사용할 수 있습니다.