Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der neuen Verwendung von CSS-Selektoren

Detaillierte Erläuterung der neuen Verwendung von CSS-Selektoren

小云云Original: 2018-02-05 10:18:421834Durchsuche

Mittlerweile scheinen Präprozessoren (wie sass) zum Standard für die Entwicklung von CSS geworden zu sein, genauso wie jQuery vor einigen Jahren der Standard für die Entwicklung von JS war. Der querySelector von JS basiert auf den Selektorideen von jQuery, und CSS-Selektoren basieren auch auf allgemeinen Funktionen wie der Definition von Präprozessorvariablen, der Verschachtelung von Selektoren und der Wiederverwendung von Codeblöcken. In diesem Artikel wird die neue Verwendung von CSS-Selektoren ausführlich vorgestellt.

Variablen

Im Allgemeinen verfügen wir bei der Webentwicklung über eine Reihe von Variablendefinitionsspezifikationen, am Beispiel von sass, wie unten gezeigt

// 颜色定义规范
$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

Die Syntax von CSS-Variablen lautet wie folgt:

【Variablendeklaration】

Variablen muss mit -- beginnen. Beispielsweise bedeutet --example-variable: 20px, dass der Variablen --example-varibale

20px zugewiesen werden. Sie können die Anweisung, die die Variable deklariert, in einem beliebigen Element platzieren kann eingestellt werden auf: root, body oder html

:root{--bgColor:#000;}

　 Die Variablendeklaration ist wie eine normale Stildeklarationsanweisung, Sie können auch den Inline-Stil

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

【Variablen verwenden】

Verwenden Sie die Funktion var(), um Variablen zu verwenden. Sie können überall verwendet werden. Beispiel: var(--example-variable) gibt den Wert zurück, der --example-variable entspricht

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

Die Funktion var() hat auch einen optionalen Parameter , Wird verwendet, um den Standardwert festzulegen.

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

[Hinweis] Die detaillierte Verwendung von CSS Variablen werden hierher verschoben

@apply

Bevor wir @apply vorstellen, stellen wir das Mischmakro @mixin in sass vor, das sich auf einen wiederverwendbaren Codeblock bezieht

Zum Beispiel die versteckte Wiederverwendung von allgemeinem Textüberlauf

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

Und der Anwendungsregelsatz @apply implementiert auch ähnliche Funktionen. Im Vergleich zu var() bezieht sich @apply auf eine Sammlung von Stilen, während sich var() auf einen einzelnen Stilwert bezieht

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

Benutzerdefinierte Auswahl

Der benutzerdefinierte Selektor wird durch @custom-selector definiert, gefolgt von: -- gefolgt vom Namen des benutzerdefinierten Selektors, gefolgt von den Selektoren, die definiert werden müssen, Vielfache durch Kommas getrennt. Öffnen Sie

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

Auf diese Weise wird :--heading zu einem Selektor, der

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

Das Obige verwendet werden kann zwei Codeteile haben den gleichen Effekt

Selektorverschachtelung

CSS-Regeln enthalten viele wiederholte Inhalte

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;
}

Nach der Verwendung der verschachtelten Syntax lautet der Code wie folgt:

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;
  }
}

Bei der Verwendung verschachtelter Stilregeln müssen Sie in der Lage sein, auf Elemente zu verweisen, die mit übergeordneten Regeln übereinstimmen. Schließlich handelt es sich um den gesamten Verschachtelungspunkt. Um diesen Zweck zu erreichen, definiert diese Spezifikation einen neuen Selektor, den verschachtelten Selektor, geschrieben als ASCII-Symbol &

Bei Verwendung in einem Selektor einer verschachtelten Stilregel wird der verschachtelte Selektor durch das mit dem übereinstimmende Element dargestellt übergeordnete Regel. Wenn es in einem anderen Kontext verwendet wird, bedeutet es nichts. (Das heißt, es ist gültig, stimmt aber mit keinem Element überein)

[Hinweis] Die beiden falschen Schreibweisen für verschachtelte Selektoren lauten wie folgt

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

【@nest】

Um die Fragilität des verschachtelten Selektors und darüber zu lösen, können Sie den @nest-Selektor verwenden, der einen größeren Anwendungsbereich hat, sofern er mit dem kombiniert wird verschachtelter Selektor & Sie können zusammenarbeiten

.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;
  }
}

Schließlich

Leider können Variablen außer CSS-Variablen unter dem neuen verwendet werden Version von Chrome Darüber hinaus werden andere neue Verwendungsmöglichkeiten von CSS-Selektoren derzeit nicht von Browsern unterstützt. Das CSSnext-Plug-In im CSS-Postprozessor Postcss kann jedoch alle Probleme lösen

Genau wie es auf der offiziellen Website von CSSnext heißt: Beginnen Sie noch heute mit der Verwendung der CSS-Syntax von morgen

Verwandte Empfehlungen:

So implementieren Sie das Parsen von CSS-Selektorfeldern

Detaillierte Erklärung des CSS-Selektors Selector

Mit im CSS-Selektor Lösung für Punkt (.)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der neuen Verwendung von CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des HTML5-Beispiels für die Datei-Upload-Funktion „type=file“.Nächster Artikel：Detaillierte Erläuterung des HTML5-Beispiels für die Datei-Upload-Funktion „type=file“.

In Verbindung stehende Artikel

Mehr sehen