효율적인 CSS 선택자를 작성하는 방법-CSS 튜토리얼-php.cn

효율적인 CSS 선택자를 작성하는 방법

小云云

풀어 주다： 2017-11-30 10:43:12

원래의

1655명이 탐색했습니다.

CSS 선택자에는 다양한 종류가 있다는 것을 모두 알고 있습니다. 많은 사람들이 CSS 페이지를 작성할 때 그것이 재미있고 단순하다고 생각할 수도 있지만, 효과는 얻을 수 있지만, 규칙 없이 작성하는 것일 뿐이라는 것을 천천히 깨닫게 될 것입니다. , 실제 개발에서는 불필요하거나 반복적인 작업이 될 수 있으며 CSS는 효율적이지 않습니다. 따라서 이 글에서는 주로 다음과 같은 측면에서 효율적이고 재사용 가능한 CSS를 작성하는 방법을 알려드리겠습니다.

먼저 짧은 CSS 코드를 살펴보세요.

#menus > li { font-size: 14px; }

로그인 후 복사

아마도 브라우저가 위 규칙을 왼쪽에서 오른쪽으로 일치할 것이라고 추측할 수 있습니다. 우리는 브라우저가 먼저 메뉴 ID를 가진 유일한 요소를 찾는다고 가정할 것입니다. 그런 다음 직접 하위 요소 li에 스타일을 적용합니다. 요소에. 이게 상당히 효율적인 것 같습니다.

그러나 CSS 선택자는 실제로 오른쪽에서 왼쪽으로 일치합니다. 따라서 위의 규칙은 효율적이지 않습니다. 브라우저는 페이지의 각 li 요소를 순회하여 해당 상위 요소의 ID가 다음과 같은지 확인해야 합니다. 메뉴.

스타일 시스템은 가장 오른쪽 선택기부터 왼쪽으로 규칙 일치를 시작합니다. 현재 선택기 왼쪽에 다른 선택기가 있는 한 스타일 시스템은 규칙과 일치하는 요소를 찾거나 불일치로 인해 종료될 때까지 계속 왼쪽으로 이동합니다.

효율적인 CSS 선택자를 작성하기 위한 일반적인 규칙은 다음과 같습니다.

1. 와일드카드 규칙 사용을 피하세요

전통적인 의미의 와일드카드 선택자 외에도 인접한 형제 선택자, 하위 선택자 및 하위 항목 선택자를 사용합니다. 와일드카드 규칙에 따라 분류되며 ID, 클래스, 태그 선택기만 사용하는 것이 좋습니다.

2. ID 선택자를 제한하지 마세요.

지정된 ID는 페이지의 하나의 요소에만 대응할 수 있으므로 추가 한정자를 추가할 필요가 없습니다. 예를 들어 div#header는 불필요하므로 #header로 단순화해야 합니다.

3. 클래스 선택자를 제한하지 마세요

클래스 선택자를 특정 라벨로 제한하지 말고, 실제 상황에 맞게 클래스 이름을 확장하세요. 예를 들어, li.chapter를 .li-chapter 또는 더 나은 .list-chapter로 변경하세요.

4. 규칙을 최대한 구체적으로 만드세요

ol li a처럼 긴 선택자를 작성하려고 하지 마세요. .list-anchor와 같은 클래스를 만들어 적절한 요소에 추가하는 것이 좋습니다.

5. 하위 선택자를 사용하지 마세요

일반적으로 하위 선택자를 처리하는 데 비용이 가장 많이 들지만 하위 선택자를 사용하면 원하는 결과를 얻을 수 있으며 더 효율적입니다.

6. 태그 하위 선택기 사용을 피하세요

#menus > li > a와 같은 태그 기반 하위 선택기가 있는 경우 .menus-item과 같은 클래스를 사용하여 각 태그 요소를 연결해야 합니다. .

7. 하위 선택기의 모든 용도에 대해 질문하세요.

하위 선택기가 사용되는 모든 위치를 확인하고 가능하면 이를 구체적인 클래스로 바꾸세요.

8. 상속에 의존

어떤 속성이 상속될 수 있는지 이해하고 이러한 속성에 대한 규칙을 반복적으로 지정하지 마세요. 예를 들어, 각 목록 요소가 아닌 목록 요소에 list-style-image를 지정하십시오. 각 요소의 상속 가능한 속성에 대해 알아보려면 상속된 속성 목록을 참조하세요.

위 내용은 효율적인 CSS 선택자를 작성하는 방법에 대한 튜토리얼입니다. 모두에게 도움이 되기를 바랍니다.