우리는 서로 다른 CSS 규칙이 요소에 어떻게 적용되는지 알아야 깨끗한 구조화 양식을 작성할 수 있다.일반 클래스, ID 또는 다른 요소가 있을 수 있는 하위 요소의 요소에 스타일을 추가하는 방법을 알아야 합니다.이것은 보통 간단합니다. 우리는 간단한 선택기만 만들면 스타일 규칙이 자동으로 작업을 완성합니다.그러나 우리가 비교적 무거운 응용 프로그램의 스타일을 작성할 때 코드의 복잡성은 상응하여 증가할 것이다.이러한 상황에서 우리는 규칙이 서로 충돌하는 상황을 만날 수 있다. 우리는 가능한 한 가장 좋은 스타일시트를 만들기 위해 규칙 집합의 행동을 예측하고, 규칙을 어떻게 작성하는지 알아야 한다.
이런 상황에서 폭포를 이해하는 것이 도움이 될 수도 있다.

약간의 구조를 창조하다

가장 좋아하는 포켓몬스터로 구성된 간단한 카드 보기를 구축하여 레벨링을 학습합니다.
내가 제일 좋아하는 포켓몬 리스트
먼저 간단한 HTML 구조와 함께 스타일시트를 만듭니다.전체 HTML 문서를 작성하고 스타일시트를 id에 연결하는 설정 시간을 줄이기 위해 코드pen에서 이렇게 할 것입니다. (예, 최대 5초를 절약할 수 있습니다.)😀 ). 코드는 다음과 같습니다.

<div class="favorite-pokemon-container">
  <h1 id="main-title" class="title">List of my favorite pokemon!</h1>
  <ul id="main-list" class="list">
    <li>
      <a href="https://www.pokemon.com/us/pokedex/pikachu"
        >Pikachu
        <img
          src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png"
          width="100"
      /></a>
    </li>
    <li>
      <a href="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png"
        >Charizard<img
          src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png"
          width="100"
      /></a>
    </li>
    <li>
      <a href="https://assets.pokemon.com/assets/cms2/img/pokedex/full/031.png"
        >Nidoqueen<img
          src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/031.png"
          width="100"
      /></a>
    </li>
    <li>
      <a
        class="rare"
        href="https://assets.pokemon.com/assets/cms2/img/pokedex/full/144.png"
        >Articuno<img
          src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/144.png"
          width="100"
      /></a>
    </li>
    <li>
      <a href="https://assets.pokemon.com/assets/cms2/img/pokedex/full/051.png"
        >Dugtrio<img
          src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/051.png"
          width="100"
      /></a>
    </li>
    <li>
      <a href="https://assets.pokemon.com/assets/cms2/img/pokedex/full/094.png"
        >Gengar<img
          src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/094.png"
          width="100"
      /></a>
    </li>
  </ul>
</div>

기본 구조
두 개 이상의 규칙이 페이지의 같은 요소를 대상으로 할 때 충돌이 발생합니다.우리는 이것이 어떻게 가능한지 보여줄 것이다.우리는 제목을 겨냥하여 그것의 풍격을 바꿀 것이다.자세히 살펴보면 다음과 같은 두 가지 방법으로 제목을 겨냥할 수 있습니다.

h1 {
  color: red; /* tag */
}
#main-title {
  color: blue; /* id */
}
.title {
  color: black; /* class */
}

이 세 가지 규칙은 모두 같은 요소를 대상으로 하고, 모든 규칙은 제목 텍스트의 색을 바꾸려고 시도한다.
브라우저는 어떤 스타일을 사용합니까?브라우저는 규칙 세트를 따라 적용할 규칙 세트를 결정합니다.예를 들어, CSS 규칙에 따라 ID 선언자를 사용하는 두 번째 선언이 승리하고 제목이 파란색이 됩니다.우리는 이 규칙을 등급 연결이라고 부른다.캐스케이드는 CSS 스크립트 언어의 기본 중 하나인 다양한 충돌을 해결하는 방법을 결정합니다.cascade는 자주 오해를 받는다. 많은 개발자들이 문제가 있다. (우리 중 몇 명이 이 이유만으로 !important 조작부호를 사용하고 오용했는가?)

Cascade는 충돌을 어떻게 해결합니까?

충돌 선언이 발생할 경우 캐스케이드는 다음 사항을 고려합니다.

스타일시트의 기원이나 스타일의 출처.저희가 작성한 스타일은 브라우저의 기본 스타일

과 함께 적용됩니다.

선택기의 특이성, 어느 선택기가 우선인가

소스 순서 – 스타일시트

에서 스타일을 선언하는 순서
이러한 규칙을 통해 브라우저는 CSS에서 명확하지 않은 선언 충돌을 해결할 때 적절한 동작을 수행할 수 있습니다.

기원 충돌

이것들은 모두 그다지 사람들에게 알려지지 않았다.기본적으로 모든 브라우저는 자신의 기본 스타일 집합을 가지고 있으며, 다른 스타일이 적용되지 않을 때 브라우저는 이러한 기본 스타일을 적용한다.이를 브라우저 스타일이라고 합니다.이러한 우선 순위는 일반적으로 스타일시트(작성자 스타일)보다 낮지만 제목, 단락, 목록의 스타일을 설정하고 기본 브라우저 모양(위쪽 및 아래쪽 여백, 왼쪽 채우기, 링크의 파란색 등)을 제공합니다.
우리의 예시에서, 우리는 이러한 요점을 만드는 데 사용되는 기본적인 브라우저 스타일을 볼 수 있다. 목록에 목록 스타일 형식의 CD가 있다.또한 링크는 파란색이고 밑줄이 그어져 있습니다.제목에는 위쪽 여백과 아래쪽 여백이 있습니다.
우리 스타일로 간단하게 이 내용을 덮어쓸 수 있습니다.의외의 일을 하지 않고 덮어쓰기 쉽다는 점을 감안하면 스타일시트에 자신의 값을 설정하기만 하면 사실상 쉽게 해결된다.개발자 도구를 열고 '요소' 부분을 보면 모든 대체 브라우저 스타일의 목록을 볼 수 있습니다.

이거!주요 운영자

브라우저와 작성자 규칙 집합 외에 스타일시트의 다른 조작부호를 덮어쓸 수 있는 조작부호가 있습니다.만약 우리의 양식에 중요한 성명이 표시되어 있다면, 성명 끝에 추가!important를 통해, 이 성명들은 더욱 높은 우선순위의 규칙 집합으로 간주될 것입니다.우선순위에 따라, 그것들은 모든 다른 등급 연결 스타일 앞에 배열된다.이것은 간단한 해결 방안으로 현재 이 문제를 해결했지만, 우리는 앞으로 많은 번거로움을 겪을 것이다. 특히 우리가 여러 성명에 계속 추가하면 !important.나는 네가 그것을 반대할 것을 건의하지는 않겠지만, 그것의 사용을 통제해야 한다.

특정 충돌 기반

만약 충돌 성명이 그들의 출처에 따라 해결되지 않는다면 브라우저는 그것들의 특수성에 따라 그것들을 해결하려고 시도할 것이다.특수성은 일반적으로 HTML에서 내연적으로 적용되는 스타일과 선택기로 적용되는 스타일로 두 부분으로 나뉜다.

인라인 스타일

HTML의 스타일 속성을 사용하여 스타일을 적용하면 해당 요소에만 선언이 적용되고 사용자가 가질 수 있는 다른 선언이 무시됩니다.그것들은 원소에 직접 적용되기 때문에 선택기가 없다.예를 들어 우리의 포켓몬 리스트에'희귀'링크가 있는 포켓몬이 있습니다.우리는 이 특정 요소에 내연 스타일을 적용할 수 있다.

    <li>
      <a
        class="rare"
        style="background-color: purple;"
        href="https://assets.pokemon.com/assets/cms2/img/pokedex/full/144.png"
        >Articuno<img
          src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/144.png"
          width="100"
      /></a>
    </li>

그러면 요소의 배경색만 보라색으로 설정됩니다.
내연 성명을 다시 쓰는 유일한 방법은 !important 연산자를 사용하여 스타일을 실제적으로 더 높은 우선순위의 원본으로 바꾸는 것이다.만약 내연 스타일 자체가 !important 로 표시된다면, 실제로는 그것들을 덮어쓸 수 있는 것이 없다.따라서 HTML 코드에서 직접 스타일을 변경하는 대신 스타일시트에서 스타일을 변경하는 것이 좋습니다.이 변경 사항을 복구하고 선택기 작업을 수행할 것입니다.

선택기 스타일

지금 그것은 매우 재미있게 변했다.CSS 캐스케이드에 대해 실제로 이야기할 때 일반적으로 선택기의 특수성만 언급합니다.예를 들어 두 종류의 선택기가 한 종류의 선택기보다 더욱 높은 특이성을 가진다.
하나의 규칙이 배경색을 주황색으로 설정하고 다른 특이성을 가진 규칙이 배경색을 녹색으로 설정하면 녹색 스타일이 적용됩니다.무슨 좋은 점이 있습니까?만약 우리가 클래스 선택기로 우리의 '희귀' 요소를 덮어쓰려고 시도한다면... 그것은 통하지 않을 것이다.첫 번째 선택기는 두 번째 선택기보다 구체적이기 때문에 하나의 ID와 하나의 태그 이름으로 구성되고, 두 번째 선택기는 하나의 클래스 이름으로만 구성된다.

#main-list .rare {
  background-color: salmon; /* this rule has an ID and it overrides the one below that consists of two classes */
}
.list .rate {
  background-color: grey;
}

왜?ID 선택기는 클래스 선택기보다 더 높은 특이성을 가지기 때문에 더욱 정확하게 말하면 단일 ID 선택기는 클래스 선택기보다 더 높은 특이성을 가지고 클래스 선택기는 표기 선택기보다 더 높은 특이성을 가진다.

ID> 클래스 > 태그

기본적으로 선택기에 ID가 있으면 다른 스타일을 덮어씁니다. 만약 같은 수량의 ID가 있다면 가장 많은 종류의 선택기가 이길 것입니다. 그렇지 않으면 탭이 가장 많은 선택기가 이길 것입니다.예를 들어 제목을 다시 선택하고 색깔을 바꾸려면 아래 목록과 비슷한 동작을 수행할 것입니다.

html body div h1 {
  color: red; /* fifth most specific rule, consists of tags */
}

body .favorite-pokemon-container h1 {
  color: blue; /* fourth most specific rule, has a class */
}

.title {
  color: pink; /* third most specific rule, only one class */
}

.favorite-pokemon-container .title {
  color: skyblue; /* second most specific rule, having two classes */
}

#main-title {
  color: orange; /* most specific rule, only one ID */
}

여기서 가장 구체적인 선택기는 마지막입니다. 이것은 하나의 ID만 포함하고, 그 다음은 두 개의 클래스 이름으로 구성된 선택기입니다. 그 다음은 하나의 클래스 이름을 가진 선택기입니다. 그 다음은 앞의 두 개의 선택기입니다. 사용하는 클래스 때문에 두 번째 선택기가 첫 번째 선택기보다 우선합니다.
일반적으로 스타일에 영향을 미치지 않는 성명은 더욱 구체적인 규칙에 의해 덮어씌운다.초보자 개발자들은 아이디를 자주 사용하는데 아이디 자체가 매우 높은 특이성을 만들어 앞으로 덮어쓰기 어렵다.우리는 단지 하나의 더 구체적인 ID를 사용하여 그것들을 덮어쓸 수 있을 뿐이다. 우리가 배운 내용을 다시 한 번 되돌아보기 위해서, ID는 항상 다른 어떤 것보다 구체적이고, 더 많은 ID는 하나의 ID보다 구체적이며, 특수성 면에서, 클래스는 ID 뒤에 있고, 표시는 가장 구체적이지 않다.
다른 양식을 다시 쓸 때 성명을 작성하는 가장 좋은 실천은 기존의 규칙 집합을 다시 쓰기 위해 더 높은 특정성을 가진 규칙 집합을 만들거나, 우리가 다시 쓸 규칙 집합의 특정성을 줄여서 새로운 성명을 양식화하기 쉽도록 하는 것이다.

소스 순서 충돌

이것은 등급 연결 문제를 해결하는 세 번째 단계이자 마지막 단계다.소스 코드와 특수성이 같으면 스타일시트 뒤에 나타나는 성명이 이전에 나타난 성명보다 우선합니다.
스타일시트를 직접 관리함으로써 우리는 이 문제를 쉽게 처리할 수 있다.만약 두 개의 특정성이 같은 선택기를 만들었다면, 마지막에 나타난 하나가 승리할 것이다.

a.rare {
  color: pink;
}
.list a {
  color: blue;
}

위풍

위원소도 어떤 구조를 따라야 한다. 왜냐하면 위원소의 원본 순서는 등급의 연결에 영향을 줄 수 있기 때문이다.위원소의 정확한 순서는:link,:visited,:hover와:active이다.우리는 뒤의 스타일이 앞의 스타일을 덮어쓸 수 있기 때문에 이러한 규칙을 따라야 한다.사용자가 마우스 포인터를 링크 위에 놓으면 마우스 포인터가 우선이지만 사용자가 링크를 클릭하면 활성 스타일이 우선입니다.
가장 중요한 힌트를 간단히 살펴보고 선택기에서 ID를 사용하거나 사용하지 마라!important.ID는 전체 스타일시트의 특수성을 파괴할 수 있으며 중요한 조작부호를 다시 쓸 필요가 거의 없다.
이것은 우리의 코드 펜입니다:
만약 당신이 이 글을 좋아한다면, 제 blog 를 방문하여 더 많은 과학 기술 문장을 얻거나, here 를 클릭하여 원시 댓글을 얻으십시오.🤘