CSS 선택기 규칙 -선택기 내의 모든 요소에 대한 Ruleset?

StackOverflow https://stackoverflow.com/questions/809385

문제

AT-Rules를 사용하면 해당 AT-RULE 이벤트 (인쇄, 모바일 장치 등) 동안 요소에 대한 규칙 세트를 가질 수 있지만 특정 선택기는 어떻습니까?

더 큰 사이트의 하위 페이지에서 작업 중이며 내 페이지에 마스터 스타일 시트를 사용해야합니다. 때로는 스타일 규칙이 마스터 스타일 시트의 규칙에 의해 우선됩니다. 이것을 극복하기 위해, 나는 CSS가 더 구체적인지 확인하기 위해 모든 규칙에 "#mypage #content blah blah"를 추가해야합니다. 매우 빨리 지저분 해집니다. 내가 원하는 것은 다음과 같습니다.

@#mypage {
       div {
           border: 1px solid #000;
           }
       div p {
           color: #00f;
           }
       }

내가 구성하는 모든 규칙이 내가 작업중인 페이지 섹션의 ID에 포함되도록합니다.

오, 나는 언급하는 것을 잊었다. 나는 내 페이지가 템플릿 프레임 내에 있기 때문에 (이해하는 한) @namespace를 사용할 수 없다 (따라서 마스터 스타일 시트가 필요함). Page-url) 내 스타일 시트가 마스터 스타일 시트를 덮어 씁니다.

간단한 것을 놓치고 있습니까?

설명:

죄송합니다. 단순하게 유지하려는 시도에서 너무 모호했다고 생각합니다 ...

글로벌 스타일 시트가있는보다 일반적인 템플릿 (Masthead, Sidebar Navigation 등) 내부에 배치 될 페이지의 내용을 개발하고 있으며 해당 콘텐츠를 제어 할 수 없습니다.

내 섹션에 대한 스타일 시트에 약간의 자유가 있습니다. 내 규칙이 우연히 글로벌 스타일 시트를 덮어 쓰는 것을 원하지 않으며, 스타일 시트를 덮어 쓰는 글로벌 스타일 시트를 피하기 위해 규칙에 정말 긴 선택기를 사용하지 않아도됩니다. 예를 들어, 내가 말하고 싶다면

"모든 테이블에는 검은 테두리가 있습니다."

나는 사이드 바의 일부 테이블 주위에 검은 색 테두리를 넣을 위험이 있습니다. 그러나 내가 말하면

"Div #Content 내의 모든 테이블에는 검은 테두리가 있습니다."

이것은 더 구체적인 규칙이없는 한만 작동합니다.

이제 각 규칙을 거치고 긴 선택기 열차를 추가하여 각 규칙이 내 섹션에서만 작동하는지 확인할 수 있지만 실제로 매력적이거나 재미는 아닙니다. 위의 예에서와 같이 더 큰 규칙 내부의 모든 규칙을 중첩시켜 주된 규칙을 가질 수 있기를 바랐습니다.

  #content {

    //and place all of my style rules inside of that:



 p {
     border: pink;
   }

그래서 나는 내 특이성을 한 번만 선언해야하며 해당 주요 규칙 내부의 모든 규칙을 다룹니다.

도움이 되었습니까?

해결책

내가 읽은 내용에서 다음 규칙에 맞는 법안에 맞는 것은 한 수준의 깊이에 불과하며, 내가보고 사용했던 대부분의 웹 사이트에서 솔직히 전형적입니다.

#content div {
  ... your rules ...
}

그것은 내용의 ID와 함께 요소 아래에있는 div에만 영향을 미칩니다.

이 규칙을 "그룹"하는 방법은 없습니다.

#content {
  div {
    ... your rules ...
  }
}

그것은 좋을 것이지만 아아, 그것은 그것이 쓰여진 방식이 아닙니다.

다른 팁

PHP 기반 서버 측 처리를 사용하기 때문에 완벽한 솔루션은 아니지만 이는 충분할 수 있습니다.

http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor

ㅏ 매우 유사한 질문 (제목이 다소 열악한)는 얼마 전에 물었다.

가장 인기있는 대답은 Shaun Inman의 서버 측 사전 처리기 (지금은 대체되었습니다 CSSCACHEER).

내 제안은 사스.

두 경우 모두 바닐라 CSS의 결함입니다.

"! 중요한"선언으로 다른 스타일 시트를 ovveride 할 수 있습니다.

div {
    border: 1px solid #000 !important;
    }
div p {
    color: #00f !important;
    }

더 많은 정보: http://www.w3.org/tr/css2/cascade.html#important-rules

CSS 엔진을 사용하여이를 수행하는 방법이 있습니다. less (node.js 라이브러리).

에 따르면 Lesscss'웹 사이트 (및 개인 경험) 당신은 다음과 같은 CSS 규칙을 중첩 할 수 있습니다.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

그리고 명령 줄 유틸리티 사용 less 이것을 컴파일합니다

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

와 함께 less 글꼴 크기 등의 변수를 가질 수 있으므로 훨씬 빠르게 변경됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top