CSS 사용 방법: 불확정 선택기

이 글에서는 CSS에서 불확정 선택자를 사용하는 방법과 이를 사용할 수 있는 요소를 소개합니다. 아래의 구체적인 내용을 살펴보겠습니다.

: 불확정 선택자에 대한 간략한 소개

#🎜 🎜# :indeterminate는 불확정 상태에 있는 사용자 인터페이스 요소를 선택하는 데 사용되는 CSS 의사 클래스 선택기입니다.

예를 들어 라디오 및 체크박스 요소는 선택됨 상태와 선택 해제됨 상태 사이를 전환할 수 있지만 때로는 선택됨도 선택 해제됨도 아닌 불확정 상태에 있습니다. 마찬가지로, 완료율을 알 수 없을 때 진행률 표시줄()이 불확실한 상태가 되도록 하는 HTML5 태그가 있습니다.

따라서 구체적으로 :indeterminate 의사 클래스 선택자는 다음 요소에서 사용할 수 있다고 할 수 있습니다:

1, 확인 버튼(), 불확정 속성이 true로 설정됩니다.

2. 라디오 버튼(), 양식의 동일한 이름 값을 가진 라디오 버튼 그룹에서 선택되지 않은 경우의 라디오 버튼입니다.

3. 값 속성( 태그)이 없는 진행률 표시줄 요소입니다. 진행률 태그 요소는 작업 완료 진행률을 나타내는 데 사용되는 HTML5 요소입니다.

요소의 불확실한 상태는 시각적 상태라고 할 수 있습니다. 확인란의 세 가지 상태는 선택됨, 선택 취소됨, 불확실함입니다.

#🎜 🎜 #

참고: 요소의 불확실한 상태는 JavaScript를 통해서만 동적으로 설정할 수 있습니다. 위에서 언급한 불확정 속성은 JavaScript로만 적용할 수 있습니다. 즉, 다음과 같이 HTML을 통해 요소의 상태를 불확정으로 설정할 수 없습니다.

<input type="checkbox" indeterminate> <!-- 如果我们通过HTML添加它，则不起作用 -->

요소를 불확정 상태로 설정하려면 다음을 수행하세요. JavaScript를 통해서만 수행할 수 있습니다. 예를 들어 페이지에 일련의 확인란이 있는 경우 다음 줄은 첫 번째 행을 선택하고 상태를 불확정으로 변경합니다.

document.getElementsByTagName("input")[0].indeterminate = true;

예: 중첩된 확인란 체크박스의 상태(및 스타일)를 정의되지 않음으로 설정하기 유용할 수 있는 한 가지 사용 사례는 체크박스를 중첩할 때 A 체크박스에 하위 체크박스가 있도록 하는 것입니다. 일반적으로 이는 다중 선택을 제공하는 사용자 인터페이스에서 볼 수 있으며 일부 옵션에는 "하위 옵션"이 있습니다.

일반적으로 모든 하위 체크박스의 스타일을 전환하는 데 사용할 수 있도록 "상위" 체크박스를 설정합니다. 이 체크박스를 선택하면 모든 하위 체크박스가 선택되고, 선택을 취소하면 모든 하위 체크박스가 선택 해제됩니다. 선택을 취소하면 사용자가 하위 확인란의 일부 옵션을 선택하고 다른 옵션은 선택하지 않은 상태로 둘 수 있습니다.

따라서 이 개념을 사용하면 확인란에 모든 하위 항목 확인란이 선택되어 있는지 확인할 수 있으며, 모든 하위 항목 확인란이 선택되어 있지 않으면 해당 "상위" 확인란의 상태가 정의되지 않은 것입니다. 예:

중첩된 확인란 집합에서 하위 옵션을 선택하면 "상위" 확인란의 상태가 "불확실"입니다.

#🎜 🎜#하위 옵션 2개를 선택해도 "상위" 체크박스의 상태는 여전히 "불확실"입니다.

모든 하위 옵션이 선택된 경우에만 선택하면 상위" 확인란의 상태가 "선택됨"이 됩니다.

확인란의 중첩 코드:

체크박스 라벨이 불확정 상태인 경우 상위 체크박스 라벨의 색상은 deepPink가 됩니다.

HTML 코드:

<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="option"><label for="option"> 选择喜欢的水果</label>
      <ul>
        <li><label><input type="checkbox" class="subOption"> 苹果、香蕉、橘子</label></li>
        <li><label><input type="checkbox" class="subOption"> 柚子、橙子、西瓜</label></li>
        <li><label><input type="checkbox" class="subOption"> 芒果、火龙果、哈密瓜</label></li>
      </ul>
    </li>
  </ul>
</div>

css 코드:
# 🎜🎜#

ul {
  list-style: none;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-top: 1em;
}

label {
  font-weight: bold;
}

input[type="checkbox"]:indeterminate + label {
  color: deepPink;
}

js 코드:

var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option');

for(var i=0; i<checkboxes.length; i++) {
  checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll(&#39;input.subOption:checked&#39;).length;

    checkall.checked = checkedCount > 0;
    checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  }
}

checkall.onclick = function() {
  for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
}

동적 렌더링: # 🎜🎜#

요약: 이상이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다

.

위 내용은 CSS 사용 방법: 불확정 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!