CSS 선택기의 새로운 사용법에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS 선택기의 새로운 사용법에 대한 자세한 설명

小云云

풀어 주다： 2018-02-05 10:18:42

원래의

1876명이 탐색했습니다.

몇 년 전 JS 개발의 표준이 jQuery였듯이 이제는 전처리기(sass 등)가 CSS 개발의 표준이 된 것 같습니다. JS의 querySelector는 jQuery의 선택기 아이디어를 활용하고 CSS 선택기도 전처리기 변수 정의, 선택기 중첩 및 코드 블록 재사용과 같은 일반적인 기능을 활용합니다. 이 글에서는 CSS 선택자의 새로운 사용법을 자세히 소개합니다.

Variables

일반적으로 웹 개발을 할 때 아래와 같이 sass를 예로 들어 일련의 변수 정의 사양을 갖게 됩니다

// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333
//字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px

로그인 후 복사

CSS 변수의 구문은 다음과 같습니다

【변수 선언】

　 변수는 --로 시작해야 합니다. 예를 들어 --example-variable: 20px는 --example-varibale 변수에 20px를 할당한다는 의미입니다

변수를 선언하는 문을 모든 요소 내에 배치할 수 있습니다. 전역 변수를 설정하려면 다음과 같이 설정할 수 있습니다. : root, body 또는 html

:root{--bgColor:#000;}

로그인 후 복사

　 변수 선언은 일반 스타일 선언문과 동일하며 인라인 스타일도 사용할 수 있습니다

<body style="--bgColor:#000">

로그인 후 복사

【변수 사용】

var() 함수를 사용하여 변수를 사용하면 어디서나 사용할 수 있습니다. 예: var(--example-variable)은 --example-variable

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    
</body>

로그인 후 복사

　에 해당하는 값을 반환합니다. var() 함수에는 옵션 매개변수도 있는데, 이 매개변수는 변수가 변경될 때 기본값을 설정하는 데 사용됩니다. 값을 얻을 수 없으면 기본값을 사용하세요

<p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>

로그인 후 복사

　　[참고] CSS 변수의 자세한 사용법은 여기로 이동합니다

@apply

　@apply를 소개하기 전에 먼저 믹싱 매크로 @mixin을 소개하겠습니다. 재사용 가능한 코드 블록을 가리키는 sass에서

　예를 들어 일반 텍스트 오버플로 숨겨진 재사용

@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
p {
    @include  overflow-ellipsis;
}

로그인 후 복사

　 그리고 애플리케이션 규칙 세트 @apply도 비슷한 기능을 구현합니다. var()와 비교할 때 @apply는 스타일 모음을 나타내고 var()는 단일 스타일 값을 나타냅니다

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

로그인 후 복사

Custom selector

사용자 정의 선택기는 @custom-selector 정의를 통해 제공되며 그 뒤에는 다음이 따릅니다. --그런 다음 사용자 정의 선택기의 이름과 정의해야 하는 선택기가 쉼표로 구분된 여러 개

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

로그인 후 복사

이런 식으로 :--heading이 사용 가능한 선택 선택기가 됩니다

:--heading{
  margin: 0;
}
h1, h2, h3, h4, h5, h6｛
   margin: 0; 
｝

로그인 후 복사

위의 두 코드는 동일한 효과를 가집니다

Selector 중첩

CSS 규칙에는 반복되는 내용이 많이 포함되어 있습니다

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

로그인 후 복사

중첩 구문을 사용한 후의 코드는 다음과 같습니다

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

로그인 후 복사

사용 시 중첩 스타일 규칙을 사용하려면 상위 규칙과 일치하는 요소를 참조할 수 있어야 합니다. 이는 결국 전체 중첩 지점입니다. 이 목적을 달성하기 위해 이 사양에서는 ASCII 표기법 &

으로 작성된 새로운 선택기인 중첩 선택기를 정의합니다. 중첩 스타일 규칙의 선택기에서 사용될 때 중첩 선택기는 상위 규칙과 일치하는 선택을 나타냅니다. 다른 상황에서 사용하면 아무 의미가 없습니다. (즉, 유효하지만 어떤 요소와도 일치하지 않습니다)

　　[참고] 중첩 선택자를 작성하는 두 가지 잘못된 방법은 다음과 같습니다

.foo {
  color: red;
  .bar & { color:blue; }
}
.foo {
  color: red;
  &.bar, .baz { color: blue; }
}

로그인 후 복사

【@nest】

　위의 문제를 해결하기 위해 중첩된 선택기는 & 깨지기 쉬우므로 @nest 선택기를 사용할 수 있습니다. @nest는 중첩된 선택기와 함께 작동하는 한 더 넓은 범위의 응용 프로그램을 제공합니다. &

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .foo > .bar { color: blue; }

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .parent .foo { color: blue; }

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   :not(.foo) { color: blue; }

　　[注意]@nest选择符的两种错误写法如下所示

.foo {
  color: red;
  @nest .bar {
    color: blue;
  }
}
.foo {
  color: red;
  @nest & .bar, .baz {
    color: blue;
  }
}

로그인 후 복사

Finally

변수는 새 버전의 Chrome에서 사용할 수 있지만 CSS 선택기의 다른 새로운 사용은 현재 브라우저에서 지원되지 않습니다. 그러나 CSS 후처리기 postcss의 cssnext 플러그인은 모든 문제를 해결할 수 있습니다

cssnext 공식 웹사이트에 나와 있는 것처럼 오늘부터 내일의 CSS 구문을 사용해 보세요