Gibt es einen CSS-Selektor Eltern?

Question

Wie kann ich wählen Sie das <li> Element, das eine direkte Eltern des Ankerelements ist?

Im Beispiel meiner CSS etwas so sein würden:

li < a.active {
    property: value;
}

Natürlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es irgendeine Art von Problem zu umgehen ist, die CSS Level 2-nativen existiert.

Das Menü, das ich versuche, Stil wird von einem CMS ausgespuckt, so kann ich nicht das aktive Element auf das <li> Element bewegen ... (es sei denn, ich Thema des Menü Erstellungsmodul, das ich lieber nicht tun) .

Irgendwelche Ideen?

Answer 1

Es gibt derzeit keine Möglichkeit, die Eltern ein Element in CSS zu wählen.

Wenn es einen Weg, es zu tun, es in einem der aktuellen CSS-Selektoren Spezifikationen wäre:

• Selektoren Ebene 3 Spec
• CSS 2.1-Selektoren Spec

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

---

Der Selektoren Ebene 4 Working Draft enthält eine :has() pseudo-Klasse, die funktioniert gleiche wie die jQuery Implementierung . Ab 2019 dies ist noch nicht von jedem Browser unterstützt .

die ursprüngliche Frage Mit :has() konnte mit diesen gelöst werden:

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

Answer 2

Ich glaube nicht, dass Sie nur die Eltern in CSS auswählen können.

Aber wie Sie schon scheinen eine .active Klasse zu haben, wäre es nicht einfacher, diese Klasse zu dem li zu bewegen (anstatt des a)? Auf diese Weise können sowohl die li und die a über CSS zugreifen können nur.

Answer 3

Sie können mit diesem Skript .

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

Dies wird all Eltern einer Texteingabe auswählen. Aber warten Sie, es gibt noch viel mehr. Wenn Sie möchten, können Sie einen angegebenen übergeordneten wählen:

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

oder wählen Sie, wenn es aktiv:

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

Sehen Sie sich diese HTML:

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

Sie können diese span.help wählen, wenn der input aktiv und zeigen es:

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

Es gibt viele weitere Funktionen; Besuche nur die Dokumentation des Plugins.

BTW, es funktioniert im Internet Explorer.

Answer 4

Wie durch ein paar andere erwähnt, gibt es keine Möglichkeit eines Elements Eltern stylen / s mit nur CSS aber die folgenden Werke mit jQuery :..

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

Answer 5

Es gibt keinen übergeordneten Selektor; nur die Art und Weise gibt es kein vorheriges Geschwister-Selektor. Ein guter Grund für nicht diese Wähler haben ist, weil der Browser alle Kinder eines Elements zu durchqueren durch hat, um zu bestimmen, ob eine Klasse angewandt werden soll. Wenn Sie zum Beispiel schreiben:

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

Dann muss der Browser warten, bis es geladen und analysiert hat alles, bis die </body>, um zu bestimmen, ob die Seite rot sein soll oder nicht.

In diesem Artikel Warum haben wir keinen übergeordneten Selektor es in erklärt Detail.

Answer 6

gibt es keine Möglichkeit, dies in css2 zu tun. Sie können die Klasse in der li hinzuzufügen und das eine Referenz

li.active > a {
    property: value;
}

Answer 7

ja: :has()

Browserunterstützung: keine

Answer 8

Versuchen a zu wechseln Anzeige block, und verwenden Sie dann eine beliebige Art, die Sie wollen. a Element wird li Element füllen und Sie werden in der Lage es aussehen zu ändern, wie Sie wollen. 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: ...
}

Answer 9

Der CSS-Selektor „ Allgemeine Geschwister Combinator “ könnte vielleicht verwendet für das, was Sie wollen:

E ~ F {
    property: value;
}

Dies entspricht ein beliebiges F Element, das von einem E Elemente vorangestellt ist.

Answer 10

Nicht in CSS 2, soweit mir bekannt ist. CSS 3 hat robustere Selektoren aber nicht konsequent in allen Browsern implementiert. Auch bei den verbesserten Selektoren, ich glaube nicht erreichen wird es genau das, was Sie in Ihrem Beispiel angegeben haben.

Answer 11

weiß, dass ich die OP für eine CSS-Lösung suchen, aber es ist einfach mit jQuery zu erreichen. In meinem Fall musste ich den <ul> geordnete Tag für einen <span>-Tag im Kind <li> enthalten finden. jQuery hat die :has Selektor so ist es möglich, ein Elternteil die Kinder zu identifizieren, es enthält:

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

das ul Element auswählen, das ein untergeordnetes Element mit id hat someId . Oder die ursprüngliche Frage zu beantworten, so etwas wie die folgenden soll es tun (ungetestet):

$("li:has(.active)")

Answer 12

Dies ist der am meisten diskutierten Aspekt der Selektoren Ebene 4 Spezifikation. Mit diesem Selektor in der Lage, ein Element nach seinem Kind stylen durch ein Ausrufezeichen nach dem angegebenen Selektor (!).

Zum Beispiel:

body! a:hover{
   background: red;
}

eine rote Hintergrund-Farbe gesetzt, wenn der Benutzer eines beliebigen Anker schwebt über.

Aber wir müssen Browser Implementierung warten: (

Answer 13

Sie könnten versuchen, Hyper-Link als Mutter zu verwenden, und dann die inneren Elemente auf schweben ändern. Wie folgt aus:

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 ändern können, basierend auf dem Umsatz des übergeordneten Elements.

Answer 14

Das Pseudoelement :focus-within ermöglicht ein Elternteil ausgewählt werden, wenn ein Nachkomme Fokus hat.

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

Browser-Unterstützung für Fokus innerhalb

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>

Answer 15

Hat jemand so etwas wie dies vorgeschlagen? 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%; }

Demo und den Rest des Code aktualisiert

Ein weiteres Beispiel , wie es verwenden, um mit Text-Eingaben - wählen Eltern Fieldset

Answer 16

Zur Zeit gibt es keine Eltern Selektor & es ist nicht einmal in einem der Gespräche von W3C diskutiert. Sie müssen verstehen, wie CSS vom Browser ausgewertet wird, um tatsächlich zu verstehen, wenn wir sie brauchen oder nicht.

Es gibt viele technische Erklärung hier.

Jonathan Snook erklärt, wie CSS ausgewertet .

Chris Coyier über die Gespräche der Eltern Wähler .

Harry Robert wieder auf dem Schreiben effiziente CSS-Selektoren .

Aber Nicole Sullivan hat einige interessante Fakten auf positive Trends .

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

Answer 17

Es gibt ein Plugin, das CSS erweitert einige Nicht-Standard-Funktionen enthält, die wirklich helfen können, wenn die Gestaltung von Websites. Es heißt EQCSS .

Eines der Dinge, EQCSS hinzufügt, ist ein Elternteil Selektor. Es funktioniert in allen Browsern IE8 und höher. Hier ist das Format:

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

Also hier haben wir ein Element Abfrage auf jedem Element a.active geöffnet und für die Stile innerhalb dieser Abfrage, Dinge wie $parent Sinn machen, weil es ein Bezugspunkt ist. Der Browser kann die Eltern, weil sie sehr ähnlich ist in JavaScript parentNode.

Hier ist eine Demo von $parent und eine andere $parent Demo, die in IE8 arbeitet, sowie ein Screenshot, falls Sie nicht über IE8 um mit zu testen.

EQCSS umfasst auch Meta-Selektoren $prev für das Element vor einem ausgewählten Element, $this für nur diejenigen, Elemente, die ein Element Abfrage entsprechen, und vieles mehr.

Answer 18

Technisch gibt es keine direkte Möglichkeit, dies jedoch zu tun, Sie, dass entweder mit Jquery oder Javascript sortieren.

Howeve, r Sie auch so etwas tun kann.

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

jQuery

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

Wenn Sie diese mit jQuery hier erreichen wollen ist die Referenz für jQuery Eltern Selektor

Answer 19

Das W3C eine solche Wähler wegen der großen Auswirkungen auf die Leistung ausgeschlossen es auf einem Browser haben.

Answer 20

Kurze Antwort NEIN , wir haben keine parent selector in diesem Stadium in CSS, aber wenn Sie nicht ohnehin die Elemente oder Klassen zu tauschen, die zweite Option JavaScript verwendet, so etwas wie folgt aus:

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 ein kürzerer Weg, wenn Sie mit jQuery in der Anwendung:

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

Answer 21

Es ist jetzt 2019 und die neuesten Entwurf des CSS-Nesting-Modul tatsächlich hat etwas wie das. Die Einführung @nest at-Regeln.

  

3.2. Die Verschachtelung At-Regel: @nest

     

Während der direkte Verschachtelung sieht nett aus, es ist etwas zerbrechlich. Einige gültige Verschachtelung Selektoren, wie .foo & sind nicht zulässig, und die Bearbeitung der Wähler in gewisser Weise kann die Regel unerwartet ungültig machen. Wie gut, einige Leute finden die Verschachtelung optisch von den umgebenden Erklärungen zu unterscheiden herausfordernd.

     

in all diesen Fragen zu unterstützen, definiert diese Spezifikation die @nest Regel, die weniger Beschränkungen auf, wie man rechtsgültig Nest Stilregeln auferlegt. Die Syntax ist:

     

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

     

Die @nest Regel funktioniert genauso wie eine Stilregel: es beginnt mit einem Selektor und enthält Erklärungen, die die Elemente der Wähler Streichhölzer anzuwenden. Der einzige Unterschied besteht darin, dass die Wähler in einer @nest Regel verwendet werden müssen Nest enthält, das heißt, es in ihm irgendwo eine Verschachtelung Selektor enthält. Eine Liste der Wähler ist Nest enthaltenden, wenn alle ihre einzelnen komplexen Selektoren sind Nest enthält.

(kopieren und von der URL eingefügt oben).

Beispiel gültiger Selektoren unter dieser Beschreibung:

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

Answer 22

Auch wenn es keine übergeordneten Wähler in Standard CSS derzeit ist, arbeite ich an einem (persönlichen) Projekt mit dem Namen ax (dh. Augmented CSS-Selektor-Syntax / ACSSSS ) die unter seinen 7 neuen Selektoren umfasst beides:

1. ein unmittelbar übergeordnete Selektor < (die die entgegengesetzte Auswahl ermöglicht >)
2. ein jeder Vorfahr Selektor ^ (die die entgegengesetzte Auswahl ermöglicht [SPACE])

ax ist derzeit in einem relativ frühen Beta-Stadium der Entwicklung.

Sehen Sie eine Demo hier:

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

(vergleiche die beiden Listen auf der linken Seite mit Standard-Selektoren gestylt und die beiden Listen auf der rechten Seite mit Axt Selektoren gestylt)

Answer 23

Hier ist ein Hack 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>

Answer 24

Mindestens bis einschließlich CSS3 können Sie nicht so aus. Aber es kann ziemlich leicht heutzutage in JS getan werden, man muss nur ein bisschen Vanille JavaScript hinzufügen, feststellen, 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>

Answer 25

Nein, Sie können nicht wählen Sie die Eltern in CSS nur.

Aber wie Sie schon scheinen eine .active Klasse zu haben, würde nicht es einfacher sein, diese Klasse zu den li zu bewegen (anstatt der a)? Auf diese Weise können sowohl die li und die a über CSS zugreifen können nur.

Answer 26

Es ist möglich, mit Et-Zeichen 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;
}

Answer 27

  

    

Irgendwelche Ideen?

  

CSS 4 wird Phantasie, wenn es einige fügt Haken in Rückwärtsgehen . es möglich, bis dahin ist (obwohl nicht ratsam) checkbox zu verwenden und / oder radio inputs brechen die übliche Art und Weise, dass die Dinge verbunden sind, und durch, dass auch CSS erlauben außerhalb, es ist normal Umfang ...

zu betreiben

/* 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 MS 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;
}

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

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


/* Customize to look more `select` like if ya 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 ya 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); /* MS!? */
}


/**
 * 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 ya 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 gross , aber mit nur CSS und HTML es möglich ist, zu berühren und erneut berühren etwas anderes als die body und :root von fast überall durch die id und for Eigenschaften von radio Verknüpfung / checkbox inputs und label Trigger ; wahrscheinlich someone'll zeigt, wie diejenigen, irgendwann wieder zu berühren.

  

Ein weiterer Nachteil ist, dass nur ein input eines bestimmten id vielleicht verwendet, erster checkbox / radio gewinnt ein Toggle-Status in anderen Worten ... Aber mehrere Etiketten können alle auf die gleiche input, obwohl das sowohl die HTML- und CSS-Look auch gröberen machen würde.

---

  

    

... Ich hoffe, dass es irgendeine Art von Problem zu umgehen, die auf CSS Level nativen gibt es 2 ...

  

Nicht sicher über den anderen : Selektoren aber :checked für Pre-CSS3, wenn ich so etwas wie [checked] richtig war erinnern, weshalb Sie es in dem obigen Code finden können, zum Beispiel ...

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

... aber Dinge wie ::after und :hover Ich bin nicht sicher, wie auf die CSS-Version der zuerst erschien.

Das ist alles gesagt, bitte dies nicht immer tut in der Produktion verwenden, auch nicht im Zorn, als Witz sicher, oder mit anderen Worten, nur weil etwas kann getan werden, bedeutet nicht immer sollte .

Answer 28

Ich würde einige JS-Code einstellen, das zu tun. z.B. in ReactJS wenn Sie ein Array iterieren, eine andere Klasse an die übergeordnete Komponente hinzuzufügen, die sie enthält Ihre Kinder zeigt:

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

Answer 29

@document

Während technisch nicht ein Elternteil Wähler es wird können Sie die URL der Seite wählen, die etwa als „Eltern“ ist, wie es erhält. Bitte beachten müssen Sie für diesen (siehe unten auf diesen Beitrag für weitere Anweisungen) befürworten. Ich werde diesen Beitrag aktualisieren, sobald diese Methode von Webautoren lebensfähig wird.

Lassen Sie uns sagen, Sie wollen für jede Seite die background-image des Navigations Header ändern. Ihre HTML würde in der Regel wie folgt aussehen:

<body>

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

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

</body>

Das Hinzufügen eines id Attribut zu den head und body Elemente ist nicht professionell und nicht konform mit Web 3.0. Jedoch, indem Sie die URL Sie müssen keine HTML-Code in irgendeiner Weise hinzufügen:

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

Weil Sie sind ein professionelles (du bist, nicht wahr?) Sie immer Testen Sie Ihr Code-Lokal, bevor es zu dem Live-Server bereitstellen. So statische URLs werden nicht zur Arbeit gehen auf localhost, 127.0.0.1, :1 und so weiter - standardmäßig . Das bedeutet, dass, wenn Sie gehen erfolgreich zu testen und Ihren Code zu überprüfen, dass Sie gehen zu müssen, Server-Side-Scripting auf Ihrem CSS laufen. Das bedeutet auch, dass, wenn Sie Benutzer erlauben, CSS auf Ihrer Website ausführen, sollten Sie sicherstellen, ihr CSS-Code nicht serverseitige Skript laufen kann, obwohl Sie können. Die meisten Leute, die finden würden das einen Teil des Stiftes nützlich kann nicht sicher sein, wie es zu nähern und es kommt alles darauf an, wie Sie Ihre Arbeitsumgebung organisieren.

1. Immer führen Sie Ihre lokale Umgebung auf RAID 1, 5, 6, 1 + 0 oder 0 + 1 (allgemein verwechselt, als nicht-existent "RAID 10" und 0 + 1 und 1 + 0 sind sehr andere Tiere).
2. Sie nicht speichern Sie Ihre Arbeit ( und persönliche Dateien) auf dem gleichen Laufwerk wie Ihr Betriebssystem; Sie wird schließlich werden Neuformatierung, ob Sie oder nicht in der Stimmung.
3. Ihr Root-Pfad sollte wie folgt aussehen (auf einem WAMP (Windows, Apache, MariaDB und PHP) Server). D:\Web\Version 3.2\www.example.com\
4. In PHP werden Sie mit Ihrem $_SERVER['DOCUMENT_ROOT'] starten (Sie ein Linux-OS über if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} Zustand bestimmen kann).
5. Sie halten Kopien von älteren Versionen, weil Sie Kopien für den Fall sehen müssen arbeiten Sie vergessen haben und geschraubt etwas nach oben, damit die Versionierung.

Im Folgenden geht davon aus, dass Ihr Live-Server verwendet www. ( https://www.example.com/ statt https://example.com/ ):

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

Die $a kehrt zwei Teile der URL. Ihre Titelseite oder Stamm-URL der Website wird der / so über / würde about/ werden, sobald Sie explode oder split wenn Strings zu vergleichen. Das wird Sie etwa 80% aus dem Weg (für lokale und Live-Tests), damit Sie den gleichen Code in beide Umgebungen und verwenden Sie es in der CSS zu rekonstruieren die URLs ausgeführt werden.

Browser-Unterstützung

Ab 2019 nur Gecko 61+ diese Funktion unterstützt und nur hinter einer Fahne. Ich habe bereits dafür ausgesprochen, dass es von Web-Autoren nutzbar wird. David Baron ist der Autor von CSS Conditional Regeln des Moduls 3 . Die primäre Überlegung, dass eine tatsächliche CSS „Eltern-Selektor“ existiert nicht ist wegen der Auswirkungen auf die Leistung; Dieses Verfahren würde die Auswirkungen auf die Leistung negieren. Ich befürwortete auch, dass relative URLs sollten in Anwesenheit des HTML base Element unterstützt werden. Wenn Sie dies in oder kurz nach dem Jahr 2019 (hallo an alle im Jahr 47.632!) Bitte zuerst lesen Referenz folgende Webadressen:

• https://developer.mozilla.org/en- US / docs / Web / CSS / @ Dokument
• https://www.w3.org/TR/css3-conditional/

Answer 30

Ändern Elternelement basierend auf untergeordnetes Element passieren kann, wenn wir Eingabeelement innerhalb des übergeordneten Element haben. wenn eine Eingabe erhalten ihre entsprechenden Mutter Element den Fokus erhalten reflektieren mit CSS.

Das folgende Beispiel werden Sie mit :focus-within in CSS 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>