CSS 선택기 규칙 -선택기 내의 모든 요소에 대한 Ruleset?
-
03-07-2019 - |
문제
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
글꼴 크기 등의 변수를 가질 수 있으므로 훨씬 빠르게 변경됩니다.