스타일 코드를 더욱 간결하게 만들기 위해 CSS의 :is() 및 :where()에 대해 자세히 알아보세요!

이 글에서는 CSS에서 더 효율적인 두 가지 선택기에 대해 자세히 설명합니다. 이를 통해 더 적은 코드로 요소를 더 효과적으로 선택할 수 있으므로 코드를 단순화할 수 있습니다.

초보자가 CSS를 시작할 때 가장 혼란스러워하는 경우는 두 가지(개인 생각)입니다. 1. CSS는 문서 흐름을 기반으로 하며 때로는 작성된 코드가 기대에 미치지 못하는 경우도 있습니다! 2. 다양한 시나리오에서 선택기를 사용해야 하는 복잡한 선택기와 선택기가 너무 길어서 초보자가 매우 혼란스러워집니다. 최근 회사 코드에서 이런 코드가 발견됐다.

.home .col .card a i.i1,
.home .col .card a i.i2,
.home .col .card a i.i3,
.home .col .card a i.i4,
.home .col .card a i.i5,
.home .col .card a i.i5,
.home .col .card a i.i6,
.home .col .card a i.i7 {
  background-size: 35px;
  width: 60px;
  height: 42px;
  margin: auto;
}

인계자로서 얼핏보면 정말 너무 많아서 깜놀했어요.

당신의 작은 두뇌를 사용하여 이 코드의 약어를 단순화하기 위해 다양한 솔루션을 시도해 볼 수 있습니다!

이 기사에서는 눈길을 끄는 선택기를 보장하는 CSS3의 보다 효율적인 선택기에 대해 이야기하겠습니다.

:is

더 적은 코드로 요소를 더 효율적으로 선택하세요! 666, 대단해요! ! !

간단히 말하면, 공통 선택자를 추출하여 코드를 단순화한 것입니다!

참고: :is() 원래 이름 :match()

예제 1. 전역:is

시나리오: 프런트 엔드 개발 중에 경우에 따라 텍스트 색상이 다른 div에서 동일할 수 있습니다. 의.

예를 들어 아래 세 개의 div에서 세 개의 div의 텍스트 색상은 모두 빨간색입니다.

    <div class="div1">
        <p>p1</p>
    </div>
    <div class="div2">
        <p>p2</p>

    </div>
    <div class="div3">
        <p>p3</p>
    </div>

기본 버전(초보자)

많은 초보자에게는 다음과 같은 작성 방법이 실제로 나타날 것입니다. 다른 div에 동일한 p를 설정합니다.

.div1>p{
    color:red;
}
.div2>p{
    color:red;
}
.div3>P{
    color:red;
}

고급 버전

작성되는 코드의 수가 늘어나면서 초보자도 점차적으로 추출할 수 있는 공통 코드가 많다는 것을 알게 됩니다. 예를 들어 여기에서는 color:red를 추출할 수 있습니다. 와, 코드가 순식간에 많이 줄어들었어요! ! !

.div1>p,
.div2>p,
.div3>P{
    color:red;
}

고급 버전(:is)

이때 초보자는 color:red를 언급할 수 있으니 p는 어떨까? 그래서 다음과 같은 더 간결한 버전이 나타났습니다.

:is(.div1,.div2,.div3) >P {
  color:red;
}

예제 2 특정 요소: is

아래 코드를 살펴보세요. div의 색상이 빨간색이고 색상 정의가 textColor에 있으며 p를 검정색으로 유지한다는 것을 알고 싶습니다.

<div class="textColor">
        p1
</div>
<div class="textColor">
    p2
</div>
<div class="textColor">
    p3
</div>
<p class="textColor">p4</p>

위의 예제 1을 읽고 나면 일부 초보자는 다음과 같이 쓰기 시작할 것입니다. p 태그에 새 스타일을 직접 추가합니다.

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
<p class="textColor pColor">p4</p>

But: is는 특정 요소의 작성을 지원합니다.:is: is

div:is(.textColor) {
    color:red;
}

weight

:is 앞에

div:is(.textColor) :is(h1,h4){
  color:red;
}
<div class="textColor">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
</div>

만 추가하면 됩니다. 가중치는 제공된 ID에 따라 결정됩니다. 요소와 같은 선택기로 인해 이해하기 어려울 수 있습니다. 예를 들어보면 바로 알 수 있을 것입니다.

<ol id="olID">
    <li>li1</li>
    <li>li2</li>
</ol>

li의 글꼴 색상을 변경해 보겠습니다.

:is(ol) li {
  color: red;
}
ol li {
  color: blue;
}

어떤 색인지 짐작이 가실 거예요.

is blue: 첫째, is의 매개변수는 ol이며, 이는 아래 ol 선택기의 가중치와 일치합니다. 그리고 파란색이 맨 아래에 있기 때문에 브라우저는 자동으로 파란색을 사용하여 빨간색을 덮습니다.

아래 글을 보면 is 매개변수에 #olID ID를 추가하고 최종 색상은 빨간색입니다. 이는 더 높은 가중치의 ID 선택기를 사용하기 때문입니다.

 :is(ol,#olID) li {
        color: red;
      }
      ol li {
        color: blue;
      }

:where

::where와 :is의 구문 매개변수는 정확히 동일합니다. 유일한 차이점은 where의 가중치가 항상 0, 즉 가장 낮은 값이라는 것입니다. 위의 예는 여전히 동일합니다.

<ol id="olID">
  <li>li1</li>
  <li>li2</li>
</ol>

여기 있습니다:

:where(ol,#olID) li {
  color: red;
}
ol li {
  color: blue;
}

최종 결과는 파란색입니다

응용 시나리오

왜 필요한지 말해야 하기 때문에 지금 우리가 가지고 있는 것은 다음과 같습니다. 개인적으로 아직은 어디에 있습니까? 유용한. 예를 들어, 컴포넌트 라이브러리를 개발할 때, where의 가중치가 매우 낮아서 사용자가 쉽게 커버할 수 있고, imprtant, v-deep 등이 필요 없기 때문에 사용할 수 있습니다!

PS: 서문의 작은 밤은 최적화할 수 있습니다

원본 주소: https://juejin.cn/post/7005366966554722312

저자: Front-end picker

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 스타일 코드를 더욱 간결하게 만들기 위해 CSS의 :is() 및 :where()에 대해 자세히 알아보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!