CSS 선택기의 새로운 사용법에 대한 자세한 설명
- 小云云원래의
- 2018-02-05 10:18:421841검색
몇 년 전 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 구문을 사용해 보세요
관련 권장 사항:
위 내용은 CSS 선택기의 새로운 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!