it-swarm.com.de

Gibt es einen übergeordneten CSS-Selektor?

Wie wähle ich das <li> -Element aus, das ein direktes übergeordnetes Element des Ankerelements ist?

Als Beispiel würde mein CSS ungefähr so ​​aussehen:

li < a.active {
    property: value;
}

Natürlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es eine Abhilfemaßnahme gibt, die ursprünglich für CSS Level 2 existiert.

Das Menü, das ich stylen möchte, wird von einem CMS ausgespuckt, daher kann ich das aktive Element nicht in das <li> -Element verschieben ... (es sei denn, ich habe das Modul zur Menüerstellung als Thema festgelegt, was ich lieber nicht möchte machen).

Irgendwelche Ideen?

2904
jcuenod

Derzeit gibt es keine Möglichkeit, das übergeordnete Element eines Elements in CSS auszuwählen.

Wenn es eine Möglichkeit gäbe, wäre dies in einer der aktuellen CSS-Selektorspezifikationen möglich:

In der Zwischenzeit müssen Sie auf JavaScript zurückgreifen, wenn Sie ein übergeordnetes Element auswählen müssen.


Die Selectors Level 4 Working Draft enthält eine :has() -Pseudoklasse, die genauso funktioniert wie die jQuery-Implementierung . Ab 2019 dies wird von keinem Browser unterstützt.

Mit :has() könnte die ursprüngliche Frage folgendermaßen gelöst werden:

li:has(> a.active) { /* styles to apply to the li tag */ }
2324
Dan Herbert

Ich glaube nicht, dass Sie das übergeordnete Element nur in CSS auswählen können.

Da Sie jedoch anscheinend bereits eine .active -Klasse haben, ist es einfacher, diese Klasse in die li zu verschieben (anstelle der a). Auf diese Weise können Sie sowohl auf li als auch auf a nur über CSS zugreifen.

144
jeroen

Sie können dieses Skript verwenden :

*! > input[type=text] { background: #000; }

Dadurch wird ein beliebiges übergeordnetes Element einer Texteingabe ausgewählt. Aber warte, es gibt noch viel mehr. Wenn Sie möchten, können Sie ein bestimmtes übergeordnetes Element auswählen:

.input-wrap! > input[type=text] { background: #000; }

Oder wählen Sie es aus, wenn es aktiv ist:

.input-wrap! > input[type=text]:focus { background: #000; }

Schauen Sie sich dieses HTML an:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

Sie können diesen span.help auswählen, wenn input aktiv ist, und ihn anzeigen:

.input-wrap! .help > input[type=text]:focus { display: block; }

Es gibt viel mehr Möglichkeiten; Schauen Sie sich einfach die Dokumentation des Plugins an.

Übrigens funktioniert es im Internet Explorer.

117
Idered

Wie von einigen anderen erwähnt, gibt es keine Möglichkeit, die übergeordneten Elemente eines Elements nur mit CSS zu formatieren, aber die folgenden Möglichkeiten funktionieren mit jQuery :

$("a.active").parents('li').css("property", "value");
98
zcrar70

Es gibt keinen übergeordneten Selektor. Nur so gibt es noch keinen Geschwisterwähler. Ein guter Grund, diese Selektoren nicht zu haben, ist, dass der Browser alle untergeordneten Elemente eines Elements durchlaufen muss, um zu bestimmen, ob eine Klasse angewendet werden soll oder nicht. Zum Beispiel, wenn Sie geschrieben haben:

body:contains-selector(a.active) { background: red; }

Dann muss der Browser warten, bis er alles geladen und analysiert hat, bis der </body> angezeigt wird, um festzustellen, ob die Seite rot sein soll oder nicht.

Der Artikel Warum wir keinen Elternselektor haben erklärt es im Detail.

63
Salman A

In CSS 2 gibt es keine Möglichkeit, dies zu tun. Sie können die Klasse zum li hinzufügen und auf das a verweisen:

li.active > a {
    property: value;
}
52
Josh

Ja: :has()

Browser-Unterstützung: keine

43
Yukulélé

Versuchen Sie, a auf block umzuschalten, und verwenden Sie dann einen beliebigen Stil. Das a -Element füllt das li -Element und Sie können sein Aussehen nach Belieben ändern. Vergessen Sie nicht, li padding auf 0 zu setzen.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}
34
Raseko

Der CSS-Selektor " General Sibling Combinator " könnte möglicherweise für das verwendet werden, was Sie möchten:

E ~ F {
    property: value;
}

Dies entspricht jedem F Element, dem ein E Element vorangestellt ist.

33
cobaasta

Soweit ich weiß, nicht in CSS 2. CSS 3 verfügt über robustere Selektoren, ist jedoch nicht in allen Browsern konsistent implementiert. Trotz der verbesserten Selektoren glaube ich nicht, dass sie genau das erreichen werden, was Sie in Ihrem Beispiel angegeben haben.

26
Mark Hurd

Ich weiß, dass das OP nach einer CSS-Lösung gesucht hat, aber mit jQuery ist dies einfach zu erreichen. In meinem Fall musste ich das übergeordnete <ul> -Tag für ein im untergeordneten <span> enthaltenes <li> -Tag finden. jQuery hat den Selektor :has, so dass es möglich ist, ein Elternteil anhand der darin enthaltenen Kinder zu identifizieren:

$("ul:has(#someId)")

wählt das ul -Element mit einem untergeordneten Element mit der ID someId aus. Oder um die ursprüngliche Frage zu beantworten, sollte etwas wie das Folgende den Trick machen (ungetestet):

$("li:has(.active)")
24
David Clarke

Dies ist der am häufigsten diskutierte Aspekt der Spezifikation Selectors Level 4. Mit dieser Option kann ein Selektor ein Element entsprechend seinem untergeordneten Element mit einem Ausrufezeichen nach dem angegebenen Selektor (!) Formatieren.

Zum Beispiel:

body! a:hover{
   background: red;
}

setzt eine rote Hintergrundfarbe, wenn der Benutzer über einen Anker schwebt.

Aber wir müssen auf die Implementierung des Browsers warten :(

21
Marco Allori

Sie können versuchen, einen Hyperlink als übergeordnetes Element zu verwenden und dann die inneren Elemente beim Bewegen des Mauszeigers zu ändern. So was:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

Auf diese Weise können Sie den Stil in mehreren inneren Tags basierend auf dem Rollover des übergeordneten Elements ändern.

20
riverstorm

Das Pseudoelement :focus-within ermöglicht die Auswahl eines übergeordneten Elements, wenn ein untergeordnetes Element den Fokus hat.

Ein Element kann fokussiert werden, wenn es ein tabindex -Attribut hat.

Browser-Unterstützung für Focus-Within

Tabindex

Beispiel

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>
19
sol

Nur eine Idee für horizontales Menü ...

Teil von HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

Teil von CSS

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Aktualisierte Demo und der Rest des Codes

Ein weiteres Beispiel Verwendung mit Texteingaben - übergeordnetes Feldset auswählen

14
Ilya B.

Derzeit gibt es keinen übergeordneten Selektor und er wird in keinem der W3C-Vorträge diskutiert. Sie müssen verstehen, wie CSS vom Browser ausgewertet wird, um zu verstehen, ob wir es benötigen oder nicht.

Hier gibt es viele technische Erklärungen.

Jonathan Snook erklärt, wie CSS bewertet wird .

Chris Coyier über die Gespräche der Elternauswahl .

Harry Roberts erneut über das Schreiben effizienter CSS-Selektoren .

Aber Nicole Sullivan hat einige interessante Fakten zu positiven Trends .

Diese Leute sind alle erstklassig im Bereich der Front-End-Entwicklung.

14
Suraj Naik

Es gibt ein Plugin, das CSS um einige nicht standardmäßige Funktionen erweitert, die beim Entwerfen von Websites wirklich hilfreich sein können. Es heißt EQCSS .

Eines der Dinge, die EQCSS hinzufügt, ist ein übergeordneter Selektor. Es funktioniert in allen Browsern, Internet Explorer 8 und höher. Hier ist das Format:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Hier haben wir also eine Elementabfrage für jedes Element a.active geöffnet, und für die Stile in dieser Abfrage sind Dinge wie $parent sinnvoll, da es einen Referenzpunkt gibt. Der Browser kann das übergeordnete Element finden, da es parentNode in JavaScript sehr ähnlich ist.

Hier ist eine Demo von $parent und einer weiteren $parent -Demo, die in Internet Explorer 8 funktioniert sowie ein Screenshot für den Fall, dass Sie keinen Internet Explorer 8 zum Testen haben .

EQCSS enthält auch Meta-Selektoren : $prev für das Element vor einem ausgewählten Element und $this für nur die Elemente, die mit einem übereinstimmen Elementabfrage und mehr.

12
innovati

Technisch gibt es dafür keinen direkten Weg. Sie können dies jedoch entweder mit jQuery oder JavaScript regeln.

Sie können jedoch auch so etwas tun.

a.active h1 {color: blue;}
a.active p {color: green;}

jQuery

$("a.active").parents('li').css("property", "value");

Wenn Sie dies mit jQuery erreichen möchten, finden Sie hier die Referenz für den jQuery-übergeordneten Selektor .

11
Prabhakar

Das W3C hat einen solchen Selektor aufgrund der enormen Auswirkungen auf die Leistung eines Browsers ausgeschlossen.

9
rgb

Die kurze Antwort lautet NEIN; In CSS ist derzeit kein parent selector vorhanden. Wenn Sie die Elemente oder Klassen jedoch ohnehin nicht austauschen müssen, wird JavaScript als zweite Option verwendet. Etwas wie das:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; // Your property: value;
  }
});

Oder einen kürzeren Weg, wenn Sie in Ihrer Anwendung jQuery verwenden:

$('a.active').parents('li').css('color', 'red'); // Your property: value;
8
Alireza

Es ist jetzt 2019, und der neueste Entwurf des CSS-Verschachtelungsmoduls hat tatsächlich so etwas. Einführung von @nest at-rules.

3.2. Die Verschachtelungsregel: @nest

Direkte Verschachtelung sieht zwar gut aus, ist aber etwas zerbrechlich. Einige gültige Schachtelungsselektoren, wie .foo &, sind nicht zulässig, und das Bearbeiten des Selektors auf bestimmte Weise kann die Regel unerwartet ungültig machen. Einige Leute finden es auch schwierig, das Nest von den umgebenden Deklarationen visuell zu unterscheiden.

Um all diese Probleme zu lösen, definiert diese Spezifikation die @ nest-Regel, mit der weniger Einschränkungen für die gültige Verschachtelung von Stilregeln gelten. Ihre Syntax lautet:

@nest = @nest <selector> { <declaration-list> }

Die @ nest-Regel funktioniert identisch mit einer Stilregel: Sie beginnt mit einem Selektor und enthält Deklarationen, die für die Elemente gelten, denen der Selektor entspricht. Der einzige Unterschied besteht darin, dass der in einer @ nest-Regel verwendete Selektor nest-haltig sein muss. Dies bedeutet, dass er irgendwo einen nest-haltigen Selektor enthält. Eine Liste von Selektoren enthält Nester, wenn alle ihre einzelnen komplexen Selektoren Nester enthalten.

(Kopieren und Einfügen von der obigen URL).

Beispiel für gültige Selektoren unter dieser Spezifikation:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */
7
Roberrrt

Obwohl es derzeit keinen übergeordneten Selektor in Standard-CSS gibt, arbeite ich an einem (persönlichen) Projekt mit dem Namen ax (dh Erweiterte CSS-Selektorsyntax/ACSSSS ), die unter ihren 7 neuen Selektoren beides enthält:

  1. ein unmittelbarer übergeordneter Selektor < (der die entgegengesetzte Auswahl zu > ermöglicht)
  2. ein beliebiger Vorfahrenselektor ^ (der die entgegengesetzte Auswahl zu [SPACE] ermöglicht)

ax befindet sich derzeit in einem relativ frühen BETA-Entwicklungsstadium.

Sehen Sie sich hier eine Demo an:

http://rounin.co.uk/projects/axe/axe2.html

(Vergleichen Sie die beiden Listen auf der linken Seite mit Standard-Selektoren und die beiden Listen auf der rechten Seite mit Axt-Selektoren.)

5
Rounin

Hier ist ein Hack mit pointer-events mit hover:

<!doctype html>
<html>
        <head>
                <title></title>
                <style>
/* accessory */
.parent {
        width: 200px;
        height: 200px;
        background: gray;
}
.parent, 
.selector {
        display: flex;
        justify-content: center;
        align-items: center;
}
.selector {
        cursor: pointer;
        background: silver;
        width: 50%;
        height: 50%;
}
                </style>
                <style>
/* pertinent */
.parent {
        background: gray;
        pointer-events: none;
}
.parent:hover {
        background: Fuchsia;
}
.parent 
.selector {
        pointer-events: auto;
}
                </style>
        </head>
        <body>
                <div class="parent">
                        <div class="selector"></div>
                </div>
        </body>
</html>
5
Jan Kyu Peblik

Zumindest bis einschließlich CSS 3 können Sie dies nicht auswählen. Aber heutzutage ist das mit JavaScript ziemlich einfach. Sie müssen nur ein bisschen Vanilla JavaScript hinzufügen. Beachten Sie, dass der Code ziemlich kurz ist.

cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
    //console.log(el.nodeName)
    if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
        console.log(el)
    };
});
<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>
4

Es ist möglich mit kaufmännischem Und in Sass :

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS-Ausgabe:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

Nein, Sie können das übergeordnete Element nicht nur in CSS auswählen.

Da Sie jedoch anscheinend bereits eine .active -Klasse haben, ist es einfacher, diese Klasse in die li zu verschieben (anstelle der a). Auf diese Weise können Sie sowohl auf li als auch auf a nur über CSS zugreifen.

3
Gaurav Aggarwal

Irgendwelche Ideen?

CSS 4 wird schick, wenn es einige Haken in einfügt, die rückwärts gehen . Bis dahin ist es möglich (obwohl nicht ratsam), checkbox und/oder radioinputs zu verwenden unterbricht die gewohnte Art und Weise, wie Dinge verbunden sind, und ermöglicht dadurch auch CSS, außerhalb seines normalen Bereichs zu arbeiten ...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}
<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... ziemlich grob , aber mit nur CSS und HTML ist es möglich, alles außer body und :root von ungefähr zu berühren und erneut zu berühren durch Verknüpfen der Eigenschaften id und for von radio/checkboxinputs und label löst aus; wahrscheinlich wird jemand zeigen, wie man diese irgendwann wieder anfasst.

Eine zusätzliche Einschränkung ist, dass nur einsinput eines bestimmten id verwendet werden kann, zuerst checkbox/radio gewinnt Ein umgeschalteter Zustand mit anderen Worten ... Aber Mehrere Bezeichnungen können alle auf dasselbe input verweisen, obwohl dadurch sowohl HTML als auch CSS noch gröber aussehen würden.


... Ich hoffe, dass es eine Art Workaround für CSS Level 2 gibt ...

Ich bin mir nicht sicher, was die anderen : Selektoren angeht, aber ich :checked für Pre-CSS 3. Wenn ich mich richtig erinnere, war es so etwas wie [checked], weshalb Sie es vielleicht in der finden über Code, zum Beispiel,

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... aber für Dinge wie ::after und :hover bin ich mir überhaupt nicht sicher, in welcher CSS-Version diese zuerst erschienen sind.

Alles in allem, bitte verwenden Sie dies niemals in der Produktion, auch nicht im Zorn. Als Witz sicher, oder mit anderen Worten, nur weil etwas getan werden kann , heißt das nicht immer, dass es sollte .

2
S0AndS0

@dokumentieren

Obwohl es sich technisch gesehen nicht um einen übergeordneten Selektor handelt, können Sie mit will die Seiten-URL auswählen, die so ungefähr "übergeordnet" ist, wie es nur geht. Bitte denken Sie daran, dass Sie sich dafür aussprechen müssen (weitere Anweisungen finden Sie am Ende dieses Beitrags). Ich werde diesen Beitrag aktualisieren, sobald diese Methode für Webautoren realisierbar ist.

Angenommen, Sie möchten den background-image des Navigationsheaders für jede Seite ändern. Ihr HTML würde im Allgemeinen wie folgt aussehen:

<body>

<main id="about_"></main>

<header><nav></nav></header>

</body>

Das Hinzufügen eines Attributs id zu den Elementen head und body ist nicht professionell und entspricht nicht Web 3.0. Durch Auswahl von URL müssen Sie jedoch in keiner Weise HTML-Code hinzufügen:

@document url('https://www.example.com/about/')
{
 body > header
 {
  background-image: url(about.png);
 }
}

Weil Sie sind ein Fachmann (Sie sind es, nicht wahr?), immer testen Sie Ihren Code lokal, bevor Sie ihn auf dem Live-Server bereitstellen. Statische URLs funktionieren also nicht für localhost, 127.0.0.1, :1 usw. - standardmäßig. Dies impliziert, dass Sie, wenn Sie Ihren Code erfolgreich testen und verifizieren möchten, serverseitiges Scripting in Ihrem CSS ausführen müssen. Dies bedeutet auch, dass, wenn Sie Benutzern erlauben, CSS auf Ihrer Site auszuführen, Sie sicherstellen sollten, dass ihr CSS-Code keine serverseitigen Skripts ausführen kann, obwohl dies bei Ihnen möglich ist. Die meisten Leute, die this als einen Teil des Beitrags nützlich finden, sind sich möglicherweise nicht sicher, wie sie damit umgehen sollen, und es kommt darauf an, wie Sie Ihr Arbeitsumfeld organisieren.

  1. Führen Sie Ihre lokale Umgebung immer auf RAID 1, 5, 6, 1 + 0 oder 0 + 1 aus (häufig als nicht vorhandenes "RAID 10" verwechselt und 0 + 1 und 1 + 0 sind sehr unterschiedlich Bestien).
  2. Speichern Sie Ihre Arbeit (nd persönliche Dateien) nicht auf demselben Laufwerk wie Ihr Betriebssystem. Sie werden irgendwann neu formatieren, ob Sie Lust dazu haben oder nicht.
  3. Ihr Root-Pfad sollte ungefähr so ​​aussehen (auf einem WAMP-Server (Windows, Apache, MariaDB und PHP)): D:\Web\Version 3.2\www.example.com\.
  4. In PHP beginnen Sie mit Ihrem $_SERVER['DOCUMENT_ROOT'] (Sie können ein Linux-Betriebssystem über die Bedingung if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} bestimmen).
  5. Sie behalten Kopien älterer Versionen, weil Sie Arbeitskopien sehen müssen, falls Sie etwas vergessen und vermasselt haben, daher die Versionierung.

Das Folgende setzt voraus, dass Ihr Live-Server www. ( https://www.example.com/ anstelle von https://example.com/ ) verwendet:

<?php
if (!isset($_SERVER['HTTP_Host']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
 //Get the domain name.
 if (substr($_SERVER['HTTP_Host'],0,4) === 'www.')
 {//Live Server
  $p0 = explode('www.',$_SERVER['HTTP_Host'],2);
  $domain = $p0[1];
 }
 else
 {//localhost
  $p0 = explode('www.',$_SERVER['REQUEST_URI']);

  if (isset($p0[2]))
  {
   $p1 = explode('/',$p0[2],2);
   $domain = $p1[0];
  }
  else
  {
   $p1 = explode('/',$p0[1],2);
   $domain = $p1[0];
  }
 }


 //Now reconstruct your *relative* URL.
 if (isset($_SERVER['HTTPS'])) {$https = 'https';}
 else {$https = 'http';}

 $p0 = explode('www.',$_SERVER['HTTP_Host']);

 if (stristr($_SERVER['HTTP_Host'],'www.'))
 {
  $a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
 }
 else
 {
  $dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);

  if ($_SERVER['HTTP_Host']=='localhost' || $_SERVER['HTTP_Host']==$_SERVER['SERVER_NAME'])
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_Host'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
  else if (substr($_SERVER['HTTP_Host'],0,7)=='192.168' || substr($_SERVER['HTTP_Host'],0,4)=='127.')
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_Host'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
 }

 print_r($a);
}
?>

Der $a gibt zwei Teile Ihrer URL zurück. Die Stamm-URL Ihrer Startseite oder Website lautet /, also ungefähr/wäre about/, sobald Sie explode oder split beim Vergleichen von Zeichenfolgen. Damit haben Sie ungefähr 80% der Zeit (sowohl für lokale als auch für Live-Tests), sodass Sie denselben Code in both -Umgebungen ausführen und ihn im CSS verwenden können, um die URLs zu rekonstruieren.

Browser-Unterstützung

Ab 2019 unterstützt nur Gecko 61+ diese Funktion und nur hinter einer Flagge. Ich habe mich bereits dafür ausgesprochen, dass es von Webautoren verwendet werden kann. David Baron ist der Autor von CSS Conditional Rules Module Level. Der Hauptgrund dafür, dass ein tatsächlicher CSS- "Elternselektor" nicht vorhanden ist, liegt in den Auswirkungen auf die Leistung. Diese Methode würde die Leistung beeinträchtigen. Ich habe mich auch dafür ausgesprochen, dass relative URLs in Gegenwart des HTML-Elements base unterstützt werden sollten. Wenn Sie dies in oder kurz nach dem Jahr 2019 lesen (Hallo an alle im Jahr 47.632!), Verweisen Sie bitte first ​​auf die folgenden URLs:

1
John

Ich würde etwas JavaScript-Code mieten, um das zu tun. Wenn Sie beispielsweise in React ein Array durchlaufen, fügen Sie der übergeordneten Komponente eine weitere Klasse hinzu, die angibt, dass sie Ihre untergeordneten Elemente enthält:

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {hasKiddos && kiddos.map(kid => (
        <div key={kid.id} className="kid">kid</div>
    ))}
</div>

Und dann einfach:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}
0
Damiano

Das Ändern des übergeordneten Elements basierend auf dem untergeordneten Element kann derzeit nur erfolgen, wenn das übergeordnete Element ein <input> -Element enthält. Wenn eine Eingabe den Fokus erhält, kann das entsprechende übergeordnete Element mithilfe von CSS beeinflusst werden.

Das folgende Beispiel soll Ihnen helfen, die Verwendung von :focus-within in CSS zu verstehen.

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}
<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>
0
Sethuraman