특정 클래스가있는 요소를 어떻게 선택합니까?

특정 클래스가있는 요소를 어떻게 선택합니까?

---

내 이해는 사용 element.class하면 클래스에 할당 된 특정 요소가 나머지 클래스와 다른 "스타일"을받을 수 있어야한다는 것입니다. 이것은 이것이 사용되어야하는지 여부에 대한 질문이 아니라이 선택기가 어떻게 작동하는지 이해하려고 노력하고 있습니다. 인터넷에서 수많은 예제를 살펴보면 구문이 정확하다고 믿고 이것이 작동하지 않는 이유를 이해하지 못합니다.

다음은 그 예입니다.

CSS :

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML :

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

---

다음과 같이해야합니다.

h2.myClass클래스와 함께 h2를 찾습니다 myClass. 그러나 실제로 h2에 스타일을 적용 .myClass하여 자손 선택자를 사용할 수 있습니다 .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

데모

이 참조 는 선택자에 대한 몇 가지 기본 아이디어를 제공하고 하위 선택자를 살펴 봅니다.

---

h2.myClass모두 h2를 참조하십시오 class="myClass".

.myClass h2를 h2가진 요소 (즉, 중첩)의 자식 인 모든 것을 참조합니다 class="myClass".

당신이 원하는 경우 h2파란색으로 표시되도록 HTML에, 다음에 CSS를 변경 :

.myClass h2 {
    color: blue;
}

h2태그가 아닌 클래스 로 참조 할 수 있도록 하려면 CSS를 그대로두고 h2HTML에서 클래스를 제공해야 합니다.

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

---

element.class 선택기는 다음과 같은 스타일링 상황을위한 것입니다.

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

span과 p는 모두 .large에서 font-size와 font-weight가 할당되지만 파란색은 p에만 할당됩니다.

다른 사람들이 지적했듯이 작업중인 것은 하위 선택자입니다.

---

h2.myClassh2클래스가 myClass직접 할당 된 요소 에만 유효합니다 .

다음과 같이 메모하고 싶습니다.

.myClass h2

Which selects all children of myClass which have the tagname h2

참고URL : https://stackoverflow.com/questions/16946878/how-do-i-select-an-element-that-has-a-certain-class