CSS 부모 선택기가 있습니까?

Question

어떻게 선택합니까? <li> 앵커 요소의 직접적인 부모 인 요소?

예를 들어 내 CSS는 다음과 같습니다.

li < a.active {
    property: value;
}

분명히 JavaScript 로이 작업을 수행하는 방법이 있지만 CSS 레벨 2에 기본으로 존재하는 일종의 해결 방법이 있기를 바랍니다.

내가 스타일을 만들려고하는 메뉴는 CMS에 의해 분출되고 있으므로 활성 요소를 <li> 요소 ... (내가하지 않는 메뉴 작성 모듈을 테마로하지 않는 한).

어떤 아이디어?

Answer 1

현재 CSS에서 요소의 부모를 선택할 방법은 없습니다.

이를 수행하는 방법이 있으면 현재 CSS Selectors 사양 중 하나에 있습니다.

• 선택기 레벨 3 사양
• CSS 2.1 선택기 사양

그 동안 상위 요소를 선택 해야하는 경우 JavaScript에 의지해야합니다.

---

그만큼 선택기 레벨 4 작업 초안 포함 :has() the와 동일하게 작동하는 의사 클래스 jQuery 구현. 2019 년 현재 브라우저에서는 여전히 지원되지 않습니다.

사용 :has() 원래 질문은 다음과 같이 해결할 수 있습니다.

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

Answer 2

CSS에서만 부모를 선택할 수 있다고 생각하지 않습니다.

그러나 당신이 이미있는 것 같습니다 .active 클래스, 해당 클래스를 li (대신 a)? 그렇게하면 둘 다 액세스 할 수 있습니다 li 그리고 a CSS를 통해서만.

Answer 3

당신은 이것을 사용할 수 있습니다 스크립트.

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

텍스트 입력의 부모를 선택합니다. 그러나 잠깐만, 여전히 더 많은 것이 있습니다. 원하는 경우 지정된 부모를 선택할 수 있습니다.

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

또는 활성화 될 때 선택하십시오.

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

이 HTML을 확인하십시오.

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

당신은 그것을 선택할 수 있습니다 span.help 때 input 활성화되어 표시 :

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

더 많은 기능이 있습니다. 플러그인의 문서를 확인하십시오.

BTW, IE에서 작동합니다.

Answer 4

다른 두 사람이 언급했듯이 CSS 만 사용하는 요소의 부모를 스타일링하는 방법은 없지만 다음은 다음과 같습니다. jQuery:

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

Answer 5

부모 선택기는 없습니다. 이전 형제 자매 선택기가없는 방식입니다. 이러한 선택기를 갖지 않는 한 가지 이유 중 하나는 브라우저가 클래스의 적용 여부를 결정하기 위해 요소의 모든 어린이를 통과해야하기 때문입니다. 예를 들어 다음을 작성한 경우 :

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

그러면 브라우저는로드하고 모든 것을 구문 분석 할 때까지 기다려야합니다. </body> 페이지가 빨간색인지 여부를 결정합니다.

이 기사 부모 선택기가없는 이유 자세히 설명합니다.

Answer 6

CSS2에서는이 작업을 수행 할 수있는 방법이 없습니다. Li에 클래스를 추가하고 a를 참조 할 수 있습니다.

li.active > a {
    property: value;
}

Answer 7

예: :has()

브라우저 지원 : 없음

Answer 8

전환하십시오 a 에게 block 표시 한 다음 원하는 스타일을 사용하십시오. a 요소가 채워집니다 li 요소와 원하는대로 모양을 수정할 수 있습니다. 설정하는 것을 잊지 마십시오 li 0으로 패딩.

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

Answer 9

CSS 선택기“장군 형제 조합”원하는 것에 사용할 수 있습니다.

E ~ F {
    property: value;
}

이것은 어떤 것과 일치합니다 F 앞에있는 요소 E 요소.

Answer 10

내가 알고있는 한 CSS 2에 있지 않습니다. CSS 3에는보다 강력한 선택기가 있지만 모든 브라우저에서 일관되게 구현되는 것은 아닙니다. 개선 된 선택기를 사용하더라도 예제에서 지정한 내용을 정확하게 달성 할 것이라고 생각하지 않습니다.

Answer 11

OP가 CSS 솔루션을 찾고 있다는 것을 알고 있지만 jQuery를 사용하는 것은 간단합니다. 제 경우에는 찾아야했습니다 <ul> a에 대한 부모 태그 <span> 아이에 포함 된 태그 <li>. jQuery는 다음과 같습니다 :has 선택기 따라서 포함 된 어린이가 부모를 식별 할 수 있습니다.

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

선택합니다 ul ID가있는 자식 요소가있는 요소 일부. 또는 원래 질문에 답하기 위해 다음과 같은 것은 트릭을 수행해야합니다 (테스트되지 않은).

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

Answer 12

이것은 가장 논의 된 측면입니다 선택기 레벨 4 사양. 이 선택기를 사용하면 주어진 선택기 (!) 후에 느낌표를 사용하여 자식에 따라 요소를 스타일링 할 수 있습니다.

예를 들어:

body! a:hover{
   background: red;
}

사용자가 앵커 위로 호버링하면 빨간색 배경색을 설정합니다.

그러나 우리는 브라우저 구현을 기다려야합니다 :(

Answer 13

하이퍼 링크를 부모로 사용하고 호버의 내부 요소를 변경하려고 시도 할 수 있습니다. 이와 같이:

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

이렇게하면 부모 요소의 롤오버에 따라 여러 내부 태그로 스타일을 변경할 수 있습니다.

Answer 14

의사 요소 :focus-within 후손이 초점을 맞추면 부모를 선택할 수 있습니다.

요소가있는 경우 요소를 집중시킬 수 있습니다 tabindex 기인하다.

Focus-within에 대한 브라우저 지원

tabindex

예시

.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

누군가 이와 같은 것을 제안 했습니까? 수평 메뉴에 대한 아이디어 ...

HTML의 일부

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

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

업데이트 된 데모 및 나머지 코드

또 다른 예 텍스트 입력으로 사용하는 방법 - 부모 필드셋을 선택하십시오.

Answer 16

현재 부모 선택기는 없으며 W3C의 대화에서도 논의되지 않습니다. 브라우저에서 CSS를 어떻게 평가하는지 이해해야합니다.

여기에는 많은 기술적 인 설명이 있습니다.

Jonathan Snook은 CSS를 어떻게 평가하는지 설명합니다.

Chris Coyier는 부모 선택자의 대화에 관한 것입니다.

Harry Roberts는 효율적인 CSS Selectors를 작성합니다.

하지만 Nicole Sullivan은 긍정적 인 트렌드에 대한 흥미로운 사실을 가지고 있습니다.

이 사람들은 모두 프론트 엔드 개발 분야에서 최고 수준입니다.

Answer 17

웹 사이트를 디자인 할 때 실제로 도움이 될 수있는 비표준 기능을 포함하도록 CSS를 확장하는 플러그인이 있습니다. 라고 불린다 EQCS.

EQCSS가 추가하는 것 중 하나는 상위 선택기입니다. 모든 브라우저 IE8 이상에서 작동합니다. 다음은 형식입니다.

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

그래서 여기에서 우리는 모든 요소에 대한 요소 쿼리를 열었습니다. a.active, 그리고 그 쿼리 내부의 스타일을 위해 $parent 기준점이 있기 때문에 의미가 있습니다. 브라우저는 부모를 찾을 수 있습니다. parentNode JavaScript에서.

여기에 데모가 있습니다 $parent 그리고 또 다른 $parent IE8에서 작동하는 데모, 만큼 잘 테스트 할 IE8이없는 경우 스크린 샷.

EQCSS도 포함됩니다 메타 선택자 $prev 선택한 요소 앞의 요소의 경우 $this 요소 쿼리와 일치하는 요소 만

Answer 18

기술적 으로이 작업을 수행하는 직접적인 방법은 없지만 jQuery 또는 JavaScript로 정렬 할 수 있습니다.

그러나, 당신은 이런 일도 할 수 있습니다.

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

jQuery

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

jQuery를 사용하여 이것을 달성하려면 여기에 참조가 있습니다. jQuery 부모 선택기

Answer 19

W3C는 브라우저에 미칠 성능에 큰 영향을 미치기 때문에 이러한 선택기를 배제했습니다.

Answer 20

짧은 대답입니다 아니, 우리는 없습니다 parent selector CSS 의이 단계에서는 요소 나 클래스를 교체 할 필요가 없다면 두 번째 옵션은 JavaScript를 사용하는 것입니다.

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

또는 사용하는 경우 짧은 방법 jQuery 귀하의 신청서에서 :

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

Answer 21

지금은 2019 년입니다 CSS 중첩 모듈의 최신 초안 실제로 이와 같은 것이 있습니다. 소개 @nest at-rules.

3.2. 둥지 AT-RULE : @nest

직접 중첩은 멋지게 보이지만 다소 깨지기 쉽습니다. .foo &와 같은 일부 유효한 중첩 선택기는 허용되지 않으며 특정 방식으로 선택기를 편집하면 규칙이 예기치 않게 유효하지 않을 수 있습니다. 또한 어떤 사람들은 주변 선언과 시각적으로 구별하기 위해 둥지가 도전적인 것을 발견합니다.

이러한 모든 문제를 돕기 위해이 사양은 @nest 규칙을 정의하여 스타일 규칙을 유효하게하는 방법에 대한 제한이 적습니다. 구문은 다음과 같습니다.

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

@nest 규칙은 스타일 규칙과 동일하게 작동합니다. 선택기로 시작하며 선택기 일치 요소에 적용되는 선언이 포함되어 있습니다. 유일한 차이점은 @nest 규칙에 사용 된 선택기가 둥지 함유이어야한다는 것입니다. 즉, 어딘가에 둥지 선택기가 포함되어 있음을 의미합니다. 모든 개별 복잡한 선택기가 둥지 함유 인 경우 선택기 목록이 둥지 함유됩니다.

(위의 URL에서 복사 및 붙여 넣기).

이 사양에 따라 유효한 선택기의 예 :

.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

현재 표준 CSS에는 부모 선택자가 없지만 (개인) 프로젝트를 수행하고 있습니다. 도끼 (즉. 증강 된 CSS 선택기 구문 / ACSSS) 7 개의 새로운 셀렉터 중 하나는 다음을 모두 포함합니다.

1. an 직계 부모 선택자 < (이는 반대 선택을 가능하게합니다 >)
2. an 모든 조상 선택기 ^ (이는 반대 선택을 가능하게합니다 [SPACE])

도끼 현재 비교적 초기 베타 개발 단계에 있습니다.

여기에서 데모를 참조하십시오.

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

(표준 선택기와 함께 스타일의 왼쪽 목록과 AX SELECTORS와 함께 오른쪽 스타일의 두 목록을 비교)

Answer 23

여기에 해킹이 있습니다 pointer-events ~와 함께 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

최소한 CSS3를 포함하여 그렇게 선택할 수 없습니다. 그러나 요즘 JS에서는 매우 쉽게 수행 할 수 있습니다. 바닐라 JavaScript를 약간 추가하면 코드가 매우 짧습니다.

      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

아니요 CSS에서만 부모를 선택할 수 없습니다.

그러나 당신이 이미있는 것 같습니다 .active 클래스, 해당 클래스를 li (대신 a)? 그렇게하면 둘 다 액세스 할 수 있습니다 li 그리고 a CSS를 통해서만.

Answer 26

Sass의 암페어와 함께 가능합니다.

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

CSS 출력 :

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

Answer 27

어떤 아이디어?

CSS 4는 일부를 추가하면 화려할 것입니다 후크 ~ 안으로 뒤로 걷는다. 그때까지 가능합니다 (그러나 ~ 아니다 사용하는 것이 좋습니다 checkbox 및/또는 radio input에스 에게 부서지다 사물이 연결되어있는 일반적인 방법과이를 통해 CSS는 일반적인 범위 밖에서 작동 할 수 있습니다 ...

/* 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>

... 예쁜 역겨운 그러나 CSS와 HTML만으로도 body 그리고 :root 연결하여 어디서나 id 그리고 for 속성 radio/checkbox input에스 그리고 label 트리거; 아마도 누군가는 어느 시점에서 사람들을 다시 터치하는 방법을 보여줄 것입니다.

한 가지 추가 경고는 그게 만입니다 하나 input 특정의 id 먼저 사용했을 수도 있습니다 checkbox/radio 승리 다시 말해 토글 상태 ... 하지만 다중 레이블은 모두 동일하게 가리킬 수 있습니다 input, 그러나 그것은 HTML과 CSS를 모두 더 거칠게 보이게 할 것입니다.

---

... CSS 레벨 2에 기본으로 존재하는 일종의 해결 방법이 있기를 바랍니다.

다른 사람에 대해 확실하지 않습니다 : 선택기이지만 :checked Pre-CSS3의 경우, 내가 정확하게 기억한다면 [checked] 그렇기 때문에 위 코드에서 찾을 수 있습니다.

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

...하지만 같은 것들 ::after 그리고 :hover 나는 그것이 처음 나타난 CSS 버전을 전혀 확실하지 않습니다.

모든 것이 언급 된 바에 따르면, 분노조차도, 농담으로, 또는 다른 말로 ~할 수 있다 끝이 항상 의미하는 것은 아닙니다 ~해야 한다.

Answer 28

나는 그것을하기 위해 JS 코드를 고용 할 것입니다. 예를 들어 REACTJS에서 배열을 반복 할 때 부모 구성 요소에 다른 클래스를 추가합니다. 여기에는 자녀가 포함되어 있음을 나타냅니다.

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

그리고 간단히

.parent {
    color: #000;
}

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

Answer 29

@문서

기술적으로는 부모 선택기가 아닙니다 ~ 할 것이다 "부모"에 관한 페이지 URL을 선택할 수 있습니다. 이를 옹호해야한다는 것을 명심하십시오 (추가 지침은이 게시물의 하단 참조). 웹 저자 가이 방법을 실행할 수있게되면이 게시물을 업데이트하겠습니다.

당신이 당신이 바꾸고 싶다고 말합시다 background-image 각 페이지의 탐색 헤더 HTML은 일반적으로 다음과 같습니다.

<body>

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

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

</body>

추가 id 에 귀속 head 그리고 body 요소는 전문 적이 지 않으며 웹 3.0에서는 준수하지 않습니다. 그러나 선택함으로써 URL 어떤 의미에서도 HTML 코드를 추가 할 필요가 없습니다.

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

당신 때문에 ~이다 전문가 (당신은 그렇지 않습니까?) 당신 언제나 라이브 서버에 배포하기 전에 코드를 로컬로 테스트하십시오. 따라서 정적 URL은 작동하지 않습니다 localhost, 127.0.0.1, :1 기타 등등 - 기본적으로. 이는 CSS에서 서버 측 스크립팅을 실행해야한다는 코드를 성공적으로 테스트하고 확인하려는 경우를 의미합니다. 또한 사용자가 사이트에서 CSS를 실행하도록 허용하는 경우 그들의 CSS 코드는 할 수 있지만 서버 측 스크립팅을 실행할 수 없습니다. 찾을 대부분의 사람들 이것 유용한 게시물의 일부는 어떻게 접근 해야하는지 확실하지 않을 수 있으며 모든 것이 작업 환경을 구성하는 방법에 달려 있습니다.

1. RAID 1, 5, 6, 1+0 또는 0+1에서 항상 로컬 환경을 실행하십시오 (일반적으로 존재하지 않는 "RAID 10"및 0+1 및 1+0으로 오인됩니다. 매우 다른 짐승).
2. 작업을 저장하지 마십시오 (그리고 개인 파일) OS와 동일한 드라이브에서; 너 ~ 할 것이다 당신이 분위기에 있는지 여부에 관계없이 결국 재 포장하십시오.
3. 루트 경로는 이와 같은 것으로 보일 것입니다 (WAMP (Windows, Apache, Mariadb 및 PHP) 서버에서) : D:\Web\Version 3.2\www.example.com\.
4. PHP에서 당신은 당신의 것으로 시작합니다 $_SERVER['DOCUMENT_ROOT'] (Linux OS를 통해 Linux OS를 결정할 수 있습니다 if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} 상태).
5. 무언가를 잊어 버리고 망친 경우를 대비하여 작업 사본을 볼 필요가 있으므로 이전 버전의 사본을 보관하십시오.

다음은 라이브 서버가 사용하는 것으로 추정됩니다 www. (https://www.example.com/ 대신에 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);
}
?>

그만큼 $a 돌아올 것입니다 둘 URL의 일부. 첫 페이지 또는 웹 사이트의 루트 URL은 / 그래서/ 할 것입니다 about/ 일단 당신 explode 또는 split 문자열을 비교할 때. 그것은 당신에게 동일한 코드를 실행할 수 있으므로 (로컬 및 라이브 테스트 모두) 둘 다 CSS에서 환경을 사용하여 URL을 재구성하십시오.

브라우저 지원

2019 년 현재 Gecko 61+ 만이이 기능을 지원하며 깃발 뒤에만 지원합니다. 나는 이미 웹 작가들에 의해 그것을 사용할 수 있다고 주장했다. David Baron은 저자입니다 CSS 조건부 규칙 모듈 레벨 3. 실제 CSS "상위 선택기"가 존재하지 않는 주요 추론은 성능 영향 때문입니다. 이 방법은 성능 영향을 무효화합니다. 또한 HTML의 존재하에 상대 URL이 지원되어야한다고 옹호했습니다. base 요소. 2019 년 이후 에이 내용을 읽거나 얼마 지나지 않으면 (47,632 년의 모든 사람에게 안녕하세요!) 첫 번째 다음 URL을 참조하십시오.

• https://developer.mozilla.org/en-us/docs/web/css/@document
• https://www.w3.org/tr/css3-conditional/

Answer 30

자식 요소를 기준으로 부모 요소를 변경하면 부모 요소 내부에 입력 요소가있을 때 발생할 수 있습니다. 입력이 초점을 맞추면 해당 상위 요소가 CSS를 사용하여 반사됩니다.

다음 예제는 사용을 이해할 수 있습니다 :focus-within CSS에서

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