programing

아님:첫 번째 자식 선택기

skycolor 2023. 7. 11. 21:57
반응형

아님:첫 번째 자식 선택기

나는 있습니다div여러 개가 포함된 태그ul꼬리표

첫 번째 CSS 속성을 설정할 수 있습니다.ul태그만:

div ul:first-child {
    background-color: #900;
}

하지만, 나의 다음 시도들은 서로에 대한 CSS 속성을 설정하는 것입니다.ul첫 번째 태그를 제외하고 태그가 작동하지 않습니다.

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

어떻게 CSS로 쓸 수 있습니까: "첫 번째 요소를 제외한 각 요소"?

당신이 게시한 버전 중 하나는 실제로 모든 최신 브라우저에서 작동합니다(CSS 선택기 레벨 3이 지원되는 경우).

div ul:not(:first-child) {
    background-color: #900;
}

기존 브라우저를 지원해야 하는 경우 또는 다음으로 인해 방해를 받는 경우:not선택기의 제한(단순 선택기만 인수로 허용)을 사용하면 다음과 같은 다른 기법을 사용할 수 있습니다.

의도한 범위보다 큰 범위를 가진 규칙을 정의한 후 조건부로 "해제"하여 해당 범위를 의도한 범위로 제한합니다.

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

범위를 제한할 때는 설정 중인 각 CSS 특성에 대해 기본값을 사용합니다.

이 CSS2 솔루션("임의의")ul차례차례로ul")도 작동하며 더 많은 브라우저에서 지원됩니다.

div ul + ul {
  background-color: #900;
}

와는 달리:not그리고.:nth-sibling인접 형제 선택기는 IE7+에서 지원됩니다.

페이지가 로드된 후 JavaScript에서 이러한 속성을 변경하는 경우 이를 구현한 IE7 및 IE8에서 알려진 버그를 확인해야 합니다.이 링크를 참조하십시오.

모든 정적 웹 페이지에 대해 완벽하게 작동합니다.

부터:notIE6-8에서 승인되지 않았습니다. 다음과 같이 제안합니다.

div ul:nth-child(n+2) {
    background-color: #900;
}

그래서 당신은 모든 것을 선택합니다.ul첫 번째 요소를 제외한 상위 요소에서.

자세한 내용은 크리스 코이어의 "유용한 : n번째 아이 레시피" 기사를 참조하십시오.nth-child 예문

"not()" 유사 클래스 내에서 "첫 번째 자식" 유사 클래스를 사용할 수 있습니다.

div ul:not(:first-child){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

대체 방법,

  1. "n번째 자식()"으로 n번째 자식 수를 선택합니다.

div ul:not(:nth-child(1)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  1. "n번째-of-type()"을 사용하여 상위 요소의 n번째 수를 선택합니다. 

    div ul:not(:nth-of-type(1)){
    background-color: #900;
}
    <html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  2. "n번째 마지막 자녀()"를 사용하면 마지막 자녀 중에서 n번째 자녀 수를 선택합니다.만약 당신이 4개의 "ul" 태그를 가지고 있다면, 당신은 이렇게 쓸 수 있습니다.

div ul:not(:nth-last-child(4)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

  1. "n번째 유형의 마지막()"을 사용하면 마지막 자식에서 부모 계수 요소의 n번째 수를 선택합니다.만약 당신이 4개의 "ul" 태그를 가지고 있다면, 당신은 이렇게 쓸 수 있습니다.

div ul:not(:nth-last-of-type(4)){
    background-color: #900;
}
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

이러한 상황을 처리하는 가장 좋은 방법은 다음과 같습니다.

not(:first-child)더 이상 작동하지 않는 것 같습니다.적어도 크롬과 파이어폭스의 최신 버전에서는 그렇습니다.

대신 다음을 시도합니다.

ul:not(:first-of-type) {}

div li~li {
    color: red;
}

IE7 지원

모든 선택기를 사용할 수 있습니다.not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

는 선기를수있다니습과 함께 할 수 .:not아래와 같이 당신은 내부의 어떤 선택기도 사용할 수 있습니다.:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

사용할 수 있습니다.:not부모 선택기도 없습니다.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

기타 예제

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

위의 것들 중 일부는 운이 없었습니다.

이것이 나에게 실제로 효과가 있는 유일한 것이었습니다.

ul:not(:first-of-type) {}

페이지에 표시되는 첫 단추가 여백 왼쪽 옵션에 의해 영향을 받지 않도록 하려고 할 때 이 작업이 효과가 있었습니다.

이것이 제가 처음 시도한 옵션이었지만 작동하지 않았습니다.

ul:not(:first-child)

내가 사용한 것처럼ul:not(:first-child)완벽한 해결책입니다.

div ul:not(:first-child) {
    background-color: #900;
}

왜 이것이 완벽한 이유는 사용하기 때문입니다.ul:not(:first-child)우리는 내부 요소에 CSS를 적용할 수 있습니다.맘에 들다li, img, span, a태그 등

그러나 다른 솔루션을 사용할 경우:

div ul + ul {
  background-color: #900;
}

그리고.

div li~li {
    color: red;
}

그리고.

ul:not(:first-of-type) {}

그리고.

div ul:nth-child(n+2) {
    background-color: #900;
}

이들은 UL 레벨 CSS만 제한합니다.가 CSS에 할 수 없다고 해 보겠습니다.li+div + ulli로로

내부 레벨 요소의 경우 첫 번째 솔루션이 완벽하게 작동합니다.

div ul:not(:first-child) li{
        background-color: #900;
    }

등등...

li + li {
    background-color: red;
}

이것은 기본 "ul" 요소 뒤에 배치된 요소의 배경색을 변경하는 간단한 방법입니다. 단, 첫 번째 요소는 예외입니다.

자세한 작동 방법은 :nth-child() 설명서를 참조하십시오.

div ul:nth-child(n+2)::after {
    background-color: #900;
}

div ul::nth-child(n+2){
    background-color: #900;
}

나도 작동하고 있어요.

언급URL : https://stackoverflow.com/questions/12289853/notfirst-child-selector

반응형

'programing' 카테고리의 다른 글

데이터베이스에서 CSV 파일로 테이블 내보내기  (0) 2023.07.11
다시 클릭할 때까지 요소 UI 날짜 선택기 구성 요소가 값을 업데이트하지 않는 이유는 무엇입니까?  (0) 2023.07.11
봄 @Bean(이름 ="이름") vs @Bean @Qualifier("이름")  (0) 2023.07.11
다음 예제에 포함된 이유는 무엇입니까?  (0) 2023.07.11
PostgreSQL을 사용하여 문자열을 정수로 캐스팅하고 캐스트에서 오류가 발생할 경우 0을 가지려면 어떻게 해야 합니까?  (0) 2023.07.11

'programing'의 다른글

  • 현재글아님:첫 번째 자식 선택기

관련글

댓글

티스토리툴바