CSS는

2017-02-02 1 views
0

여기CSS는

- body 
    - #yes1.parent 
    - #no1.other 
    - #no2.parent 
     - #no3.parent 
    - #yes2.parent 
    - #yes3.parent 
     - #yes4.parent 

의 일종 인 나의 HTML입니다 그리고 여기 HTML에서와 동일 몸에서 직접 연결 일치하는 모든 노드를 선택

<body> 
    <div id="yes1" class="parent"> 
    <div id="no1" class="other"> 
     <div id="no2" class="parent"> 
     <div id="no3" class="parent"></div> 
     </div> 
    </div> 
    <div id="yes2" class="parent"> 
     <div id="yes3" class="parent"> 
     <div id="yes4" class="parent"></div> 
     </div> 
    </div> 
    </div> 
</body> 

선택의 유형 내가 좋아하는 것 셀렉터가 완전한 정규식 이었는지 여부 :

body (> .parent > .parent)* 

그래서 모든 yes1-4와 일치하지 않을 수 있으므로 에스. 예를 들어,

.parent > .parent 

은 또한 #의 NO2의 부모는 .parent 아니므로 직접 본체에 연결하지 마십시오 NO2와 NO3 일치하기 때문에 작동하지 않을 것입니다.

유효한 CSS 선택기가 있습니까?

+0

무엇 정확히 어떻게하려고? 탐색 메뉴 또는 다른 것을 만드시겠습니까? –

+0

DIVs *가 실제로 'yes'로 시작하는 ID를 가지고 있다고 가정하면'div [id^= "yes"]'를 사용할 수 있습니다. 또는 ID를 설정할 수 없습니까? –

+0

선택할 수있는 선택기가 있는지 이해하고 싶습니다. – nick

답변

0

https://fiddle.jshell.net/m35r2995/2/

확인 바이올린 :

나는 선택 ".parent .parent"와 값에 갈 것

.parent{ 
    background-color: #00ff00; 
} 
.parent .parent{ 
    background-color: inherit; 
} 
.other{ 
    background-color: #ffffff; 
} 
1

간단한 접근 방식을 "상속"하지만,하지만이 개 클래스를 필요 :

  1. 모두 영향을 미치는 영향은 단지 .parent입니다.
  2. 영향 .parent [id^=no].parent 안에 id = "no"로 시작하는 div를 분리합니다.

.parent { 
 
    height: 50px; 
 
    width: 150px; 
 
    border: 2px solid white; 
 
    padding: 10px; 
 
    background: green; 
 
} 
 
.parent [id^=no] { 
 
    height: 50px; 
 
    width: 150px; 
 
    border: 2px solid white; 
 
    padding: 10px; 
 
    background: gray; 
 
}
<body> 
 
    <div id="yes1" class="parent"> 
 
    <div id="no1" class="other"> 
 
     <div id="no2" class="parent"> 
 
     <div id="no3" class="parent"></div> 
 
     </div> 
 
    </div> 
 
    <div id="yes2" class="parent"> 
 
     <div id="yes3" class="parent"> 
 
     <div id="yes4" class="parent"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>