홈>

css - 스타일에 영향을주는 입력 및 레이블 요소의 HTML 순서

체크 박스 및 라벨 목록이 있습니다. checbox를 확인할 때이 CSS를 사용하여 레이블에 스타일을 적용하고 있습니다.

input[type=checkbox]:checked + .CheckLabels {background-color: green;}

HTML을 다음과 같이 주문하면

<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>
<label class="CheckLabels" for="checkD">D</label>

의도 한대로 작동합니다. C 레이블을 클릭하면 녹색 스타일이 추가되거나 제거됩니다. 그러나전에레이블을 입력 할 때 레이블을 클릭하면다음레이블에 스타일이 적용/제거됩니다. 예 : C 라벨을 클릭하면D라벨에 녹색이 추가되거나 제거됩니다 (적절한 확인란이 계속 선택되어 있음)

<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkD">D</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>

이러한 이유는 무엇입니까? display:none 를 사용하기 때문에 레이블과 확인란의 순서에 특별히 첨부되지 않았습니다. . 그러나 무슨 일이 일어나고 있는지 아는 것이 좋을 것입니다.

htmlcssinputlabel
  • 답변 # 1

    그것은 pyzwyz와 관련이 있습니다.  선택기는 a+b 를 선택합니다   b 바로 뒤에 배치 .

    따라서 (입력 전에 라벨을 붙일 때) a  C label 직후  D input 입니다 .

  • 답변 # 2

    label  형제 선택기입니다. 구체적으로 A + B를 순서대로 선택합니다. 즉, 요소 ​​A를 따라갈 때 요소 B를 선택합니다.

    형식적으로, 자손 선택기와 유사합니다 (예 : + ). div p 를 선택합니다   p 내부 와 직계 자손 선택기 (예 : div ) div > p 를 선택합니다  그것이 p 의 직접적인 아이 (손자 아님) 인 경우에만 .

    +는 직접 형제 자매이지만 유용한 일반 형제 선택기 (예 : div )도 있습니다.  어떤 p ~ p 를 선택합니다   p 가 앞에 옴  같은 부모 아래.

    자세한 내용은 MDN 기사를 확인한 다음 관련 선택기 (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)를 참조하십시오

    p

관련 자료

  • 이전 maven - 다중 파티션으로 zookeeper 실행 kafka - 자바
  • 다음 sql - substring_index MySQL을 사용하여 대시로 이름 가져 오기
    • 관련 질문