우리는 쉼표를 논리적으로 취급 할 수 있지만 "연산자로 취급 할 수 있지만 그룹의 각 선택기는 독립적이라는 것을 기억해야합니다. 일반적인 초보자 실수는 다음과 같은 그룹을 작성하는 것입니다.
초보자는 위의 선언 블록이 id "foo"가있는 요소의 및 요소의 모든 후손에게 적용될 것이라고 생각할 수 있습니다. 그러나 위의 선택기 그룹은 실제로 다음과 같습니다.
<code class="language-css">td, th {
/* 声明 */
}</code>
진정한 목표를 달성하려면 선택기 그룹을 다음과 같이 쓰십시오.
중요한 팁 : 쉼표를 따라 갈 필요가 없습니다 <code class="language-css">#foo td, th {
/* 声明 */
}</code> 그룹의 마지막 선택기 후에 쉼표를 떠나지 마십시오!
td
CSS 선택기 그룹화 th의 FAQ
CSS 선택기 그룹화의 목적은 무엇입니까?
CSS 선택기 그룹화는 여러 선택기에 동일한 스타일 규칙을 적용하는 CSS 기술입니다. 다른 선택기에 대해 동일한 규칙을 여러 번 쓰는 대신이를 구성하고 규칙을 한 번만 작성할 수 있습니다. 이로 인해 CSS 코드를 더 간결하고 읽기 쉽게 읽을 수있을뿐만 아니라 CSS 파일의 크기를 줄여 웹 사이트의로드 시간을 줄일 수 있습니다. <code class="language-css">#foo td {
/* 声明 */
}
th {
/* 声明 */
}</code>
CSS에서 선택기를 그룹화하는 방법은 무엇입니까?
CSS의 그룹 선택기에게 셀렉터를 그룹화하고 쉼표로 분리 한 다음 선언 블록을 나열한 다음 간단히 나열합니다. 예를 들어, 동일한 스타일을
, 및 <code class="language-css">#foo td, #foo th {
/* 声明 */
}</code> 요소에 적용하려면 다음과 같이 작성해야합니다.
이것은 모두 , 및 요소에 파란색을 적용합니다.
다른 유형의 선택기를 함께 결합 할 수 있습니까?
예, 요소 선택기, 클래스 선택기, ID 선택기 등을 포함하여 모든 유형의 선택기를 함께 결합 할 수 있습니다. 예를 들어, 요소 선택기를 다음과 같이 클래스 선택기와 결합 할 수 있습니다.
이것은 모든 요소에 파란색과 클래스 "소개"가있는 요소에 파란색을 적용합니다.
그룹의 한 선택기가 다른 스타일 규칙을 갖는 경우 단일 규칙이 그룹 규칙을 무시합니다. CSS에서 마지막으로 정의 된 규칙이 우선하기 때문입니다. 예를 들어, 다음 코드가있는 경우
요소는
의 개별 규칙이 그룹 규칙 뒤에 있기 때문에 파란색이 아닌 빨간색이됩니다.
다른 요소에 중첩 된 선택기가 그룹화 될 수 있습니까?
예, 다른 요소에 중첩 된 선택기를 그룹화 할 수 있습니다. 이것은 종종 웹 페이지의 특정 부분에 스타일을 적용하는 데 사용됩니다. 예를 들어, 요소의 모든 및 요소를 스타일링하기 위해 선택기를 그룹화 할 수 있습니다.
<code class="language-css">td, th {
/* 声明 */
}</code>
이것은 요소 내의 모든 및 div 요소에 파란색을 적용합니다. h1
셀렉터 그룹에서 의사 클래스와 의사 요소를 사용할 수 있습니까? p
예, 선택기 그룹에서 의사 클래스와 의사 요소를 사용할 수 있습니다. 예를 들어, 선택기 그룹을 그룹화하여 링크의 호버 상태와 다음과 같이 단락의
pseudo element의 스타일을 설정할 수 있습니다.
이것은 모든 링크의 호버 상태에 파란색과 모든 단락의
의사 요소에 적용됩니다.
선택기 그룹화와 선택기 체인링의 차이점은 무엇입니까? before
선택기 그룹화 및 선택기 체인은 CSS에서 두 가지 다른 기술입니다. 선택기를 그룹화하면 여러 선택기에 동일한 스타일 규칙을 적용합니다. 선택기를 연결하면 모든 링크 선택기와 일치하는 요소에 스타일 규칙을 적용합니다. 예를 들어,
는 선택기 그룹이고 <code class="language-css">#foo td, th {
/* 声明 */
}</code> 는 링크 선택기입니다.
선택기를 미디어 쿼리로 그룹화 할 수 있습니까? before
예, 선택기를 미디어 쿼리로 그룹화 할 수 있습니다. 이것은 다른 스크린 크기에 다른 스타일을 적용하는 데 유용합니다. 예를 들어, 아래와 같이 작은 화면에서
및 요소의 색상을 변경하기 위해 선택기를 그룹화 할 수 있습니다.
스크린 크기가 600px 이하이면 및 요소에 파란색을 적용합니다. h1, h2
그룹 선택기의 문제를 디버깅하는 방법은 무엇입니까? h1.h2
브라우저의 개발자 도구를 사용하여 그룹 선택기의 문제를 디버깅 할 수 있습니다. 요소를 확인하여 어떤 스타일이 적용되고 있는지, 어떤 선택기가 나오는지 확인할 수 있습니다. 스타일이 예상대로 적용되지 않으면 선택기의 오타를 확인하여 올바른 특이성을 확인하고 스타일이 다른 규칙에 의해 덮어 쓰지 않도록하십시오.
그룹 선택기 사용의 제한이나 단점은 무엇입니까?
그룹 선택기는 CSS를보다 간결하고 관리하기 쉽게 만들 수 있지만, CSS가 과도하게 사용되면 읽기가 더 어려워 질 수 있습니다. 그룹의 선택기가 너무 많으면 스타일이 적용되는 요소를 이해하기가 어렵습니다. 또한 그룹의 모든 선택기는 동일한 특이성을 공유 할 것이며, 이는 다른 충돌 규칙이있는 경우 스타일이 적용되는 방식에 영향을 줄 수 있습니다.
위 내용은 선택기 그룹화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
쉼표 (,) 분리기를 그룹 선택기에 사용하십시오. 다음 선언 블록은 그룹의 선택기와 일치하는 모든 요소에 적용됩니다.