CSS 클래스가 하나 이상의 다른 클래스를 상속할 수 있습니까?
다른 CSS 클래스(또는 둘 이상)에서 "상속"하는 CSS 클래스를 만들 수 있습니까?
예를 들어 다음과 같이 가정합니다.
.something { display:inline }
.else { background:red }
제가 하고 싶은 일은 다음과 같습니다.
.composite
{
.something;
.else
}
여기서 ".vmdk" 클래스는 인라인으로 표시되고 빨간색 배경을 가집니다.
LESS와 같은 도구가 있는데, 이를 통해 당신이 설명하는 것과 유사한 더 높은 수준의 추상화에서 CSS를 작성할 수 있습니다.
이러한 "믹스인"을 덜 부릅니다.
대신에
/* CSS */
#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#footer {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
라고 말할 수 있습니다.
/* LESS */
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners;
}
하나의 DOM 요소에 여러 클래스를 추가할 수 있습니다.
<div class="firstClass secondClass thirdclass fourthclass"></div>
이후 클래스에 지정된 규칙(또는 보다 구체적인 규칙)이 재정의됩니다.그래서 그fourthclass그 예에서 일종의 우세.
상속은 CSS 표준의 일부가 아닙니다.
네, 하지만 그 구문으로는 정확하지 않습니다.
.composite,
.something { display:inline }
.composite,
.else { background:red }
공통 속성을 함께 유지하고 특정(또는 재정의) 속성을 다시 할당합니다.
/* ------------------------------------------------------------------------------ */
/* Headings */
/* ------------------------------------------------------------------------------ */
h1, h2, h3, h4
{
font-family : myfind-bold;
color : #4C4C4C;
display:inline-block;
width:900px;
text-align:left;
background-image: linear-gradient(0, #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}
h1
{
font-size : 300%;
padding : 45px 40px 45px 0px;
}
h2
{
font-size : 200%;
padding : 30px 25px 30px 0px;
}
주어진 예에 대한 SCSS 방법은 다음과 같습니다.
.something {
display: inline
}
.else {
background: red
}
.composite {
@extend .something;
@extend .else;
}
자세한 정보, sas 기본 사항 확인
요소는 여러 클래스를 사용할 수 있습니다.
.classOne { font-weight: bold; }
.classTwo { font-famiy: verdana; }
<div class="classOne classTwo">
<p>I'm bold and verdana.</p>
</div>
그리고 그것은 여러분이 불행하게도 거의 가까워질 것입니다.언젠가 클래스 별칭과 함께 이 기능을 보고 싶습니다.
아니요, 당신은 할 수 없습니다.
.composite
{
.something;
.else
}
이것은 OO 의미의 "클래스" 이름이 아닙니다. .something그리고..else그저 선택자일 뿐입니다.
그러나 요소에 두 개의 클래스를 지정할 수 있습니다.
<div class="something else">...</div>
아니면 다른 형태의 상속을 조사할 수도 있습니다.
.foo {
background-color: white;
color: black;
}
.bar {
background-color: inherit;
color: inherit;
font-weight: normal;
}
<div class="foo">
<p class="bar">Hello, world</p>
</div>
, 는 문의의배경색같동다이경설우정상로부터속는..foo사양을 할.당신은 정확한 W3C 사양을 확인해야 할 수도 있습니다. inherit모든 속성이 아닌 대부분의 속성에 대해 기본값입니다.
저는 같은 문제에 부딪혔고 결국 클래스가 다른 클래스를 상속할 수 있는 것처럼 보이게 하기 위해 JQuery 솔루션을 사용하게 되었습니다.
<script>
$(function(){
$(".composite").addClass("something else");
});
</script>
클래스 "composite"가 있는 모든 요소를 찾고 "something" 및 "else" 클래스를 요소에 추가합니다. 래서뭐 그런거 그거▁like 같은 거.<div class="composite">...</div>될 것입니다.
<div class="composite something else">...</div>
할 수 있습니다.
CSS
.car {
font-weight: bold;
}
.benz {
background-color: blue;
}
.toyota {
background-color: white;
}
HTML
<div class="car benz">
<p>I'm bold and blue.</p>
</div>
<div class="car toyota">
<p>I'm bold and white.</p>
</div>
잊지 마십시오.
div.something.else {
// will only style a div with both, not just one or the other
}
역방향 접근법을 사용하여 합성에서 시작한 다음 키워드를 사용하여 스타일을 제거하는 등 동일한 결과를 얻을 수 있습니다.예를 들어, 다음 샘플 구성으로 시작하는 경우:
.composite {
color: red;
margin-left: 50px;
background-color: green
}
그런 다음 선택기 특수성을 증가시켜 선택적으로 스타일을 제거할 수 있습니다.unset:
.composite.no-color {
color: unset
}
.composite.no-margin-left {
margin-left: unset
}
.composite.no-background-color {
background-color: unset
}
이 접근법의 한 가지 이점은 다음과 같습니다.specificity복합 선택기 중에서 복합 선택기가 복합 자체보다 높기 때문에 여러 조합에 대해 원하는 결과를 얻기 위해 클래스의 모든 조합이 필요한 것은 아닙니다.
/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
background-color: unset;
color: unset;
margin-left: unset
}
또한 96%의 지원을 통해unset키워드, 브라우저 적용 범위가 훌륭합니다.
Ruby 라이브러리인 Less를 사용하면 다음과 같은 작업을 수행할 수 있습니다.
때부터super 와꼭닮다니습았처럼 보입니다.footer그러나 다른 글꼴을 사용하여 Less의 클래스 포함 기술(믹스인이라고 함)을 사용하여 다음 선언도 포함하도록 할 것입니다.
#super {
#footer;
font-family: cursive;
}
CSS 파일:
p.Title
{
font-family: Arial;
font-size: 16px;
}
p.SubTitle p.Title
{
font-size: 12px;
}
안타깝게도 CSS는 C++, C# 또는 Java와 같은 프로그래밍 언어가 제공하는 방식으로 '상속'을 제공하지 않습니다.CSS 클래스를 선언한 다음 다른 CSS 클래스로 확장할 수 없습니다.
그러나 마크업의 태그에 하나 이상의 클래스를 적용할 수 있습니다...이 경우 브라우저에서 적용할 실제 스타일을 결정하는 정교한 규칙 집합이 있습니다.
<span class="styleA styleB"> ... </span>
CSS는 당신의 마크업을 기반으로 적용할 수 있는 모든 스타일을 찾고, 그 여러 규칙의 CSS 스타일을 함께 결합합니다.
일반적으로 스타일은 병합되지만 충돌이 발생하면 나중에 선언된 스타일이 일반적으로 승리합니다(!important 특성이 스타일 중 하나에 지정되지 않은 경우 승리).또한 HTML 요소에 직접 적용된 스타일은 CSS 클래스 스타일보다 우선합니다.
저는 이 질문이 이제 매우 오래되었다는 것을 알지만, 여기서 아무것도 진행되지 않습니다!
여러 클래스의 속성을 암시하는 단일 클래스를 추가하려는 의도라면 네이티브 솔루션으로 JavaScript/jQuery를 사용하는 것이 좋습니다(jQuery는 정말 필요하지 않지만 확실히 유용합니다).
를 들면 예들어있, 만약다면이 있으면,.umbrellaClass "물inherits"에서 온 그 "온""..baseClass1그리고..baseClass2당신은 자바스크립트를 준비할 수 있습니다.
$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");
이모든요가의 이..umbrellaClass두 가지 특성을 모두 가질 것입니다..baseClass로 OOP도 마찬가지입니다.umbrellaClass고유한 속성이 있을 수도 있고 없을 수도 있습니다.
여기서 유일하게 주의해야 할 것은 이 코드가 실행될 때 존재하지 않는 동적으로 생성되는 요소가 있는지 여부를 고려하는 것입니다. 하지만 그에 대한 간단한 방법도 있습니다.
엿같은 CSS는 선천적인 유전을 가지고 있지 않습니다.
CSS 클래스를 객체 지향 클래스로 생각하지 말고, HTML 요소가 스타일링되는 속성 클래스를 지정하는 다른 선택기 중 하나의 도구로 생각합니다.중괄호 사이의 모든 것을 속성 클래스로 생각하고 왼쪽의 선택기는 속성 클래스에서 속성을 상속하기 위해 선택한 요소를 알려줍니다.예:
.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
에 때class="foo"을 상속하는 것이 아니라고 생각하면 유용합니다..foo그러나 속성 클래스 A와 속성 클래스 B. 즉, 상속 그래프는 속성 클래스에서 파생된 요소와 에지가 어디로 가는지 지정하고 경쟁 속성이 있을 때 우선 순위를 결정하는 한 수준입니다(메소드 해결 순서와 유사).
프로그래밍에 대한 실질적인 의미는 이것입니다.위에, 를 추가하고 ..baz그것이 동일해야 하는 곳에.font-size~하듯이.foo단순한 해결책은 다음과 같습니다.
.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}
제가 무언가를 두 번 타이핑해야 할 때마다 저는 너무 화가 납니다!두 번이나 써야 할 뿐만 아니라, 이제는 프로그래밍적으로 그것을 나타낼 방법이 없습니다..foo그리고..baz한 해야합니를 .font-size그리고 나는 숨겨진 의존성을 만들었습니다!나의 위 패러다임은 내가 추상화해야 한다고 제안할 것입니다.font-size특성 클래스 A의 특성:
.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}
여기서 주요 불만 사항은 이제 속성 클래스 A의 모든 선택기를 다시 입력하여 선택해야 하는 요소가 속성 기본 클래스 A의 속성도 상속하도록 지정해야 한다는 것입니다.그러나 다른 대안으로는 무언가가 변경될 때마다 숨겨진 종속성이 있는 모든 속성 클래스를 편집하거나 타사 도구를 사용하는 것을 기억해야 합니다.첫 번째 선택은 신을 웃게 하고, 두 번째 선택은 스스로 목숨을 끊고 싶게 만듭니다.
그것은 CSS에서는 불가능합니다.
CSS에서 지원되는 유일한 것은 다른 규칙보다 구체적인 것입니다.
span { display:inline }
span.myclass { background: red }
클래스가 "myclass"인 범위는 두 가지 속성을 모두 가집니다.
다른 방법은 두 개의 클래스를 지정하는 것입니다.
<div class="something else">...</div>
"else" 스타일은 "something" 스타일을 무시하거나 추가합니다.
다른 사용자가 말했듯이 요소에 여러 클래스를 추가할 수 있습니다.
하지만 그것이 정말 중요한 것은 아닙니다.상속에 대한 당신의 질문을 알겠습니다.진짜 요점은 CSS의 상속은 클래스를 통해 이루어지는 것이 아니라 요소 계층을 통해 이루어진다는 것입니다.따라서 유전된 특성을 모델링하려면 DOM의 다양한 수준의 요소에 적용해야 합니다.
직접 상속은 불가능하지만,
부모 태그에 클래스(또는 ID)를 사용한 다음 CSS 결합기를 사용하여 하위 태그 동작을 계층 구조에서 변경할 수 있습니다.
p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>예처럼 스팬을 그렇게 많이 사용하는 것은 제안하지 않지만, 개념 증명일 뿐입니다.이러한 방식으로 CSS를 적용하려고 할 때 발생할 수 있는 버그가 여전히 많습니다. (예: 텍스트 장식 유형 변경)
나도 미친 듯이 그것을 찾다가 다른 것들을 시도해서 알게 되었습니다:P...다음과 같이 할 수 있습니다.
composite.something, composite.else
{
blblalba
}
갑자기 저에게 효과가 있었습니다 :)
특정 상황에서 "소프트" 상속을 수행할 수 있습니다.
.composite
{
display:inherit;
background:inherit;
}
.something { display:inline }
.else { background:red }
이것은 .composite 클래스를 하위 요소에 추가하는 경우에만 작동합니다..composite에 지정되지 않은 값은 명확하게 상속되지 않으므로 "소프트" 상속입니다.단순히 "inline"과 "red"를 "inherit" 대신 쓰는 것이 여전히 문자 수가 적습니다.
다음은 속성 목록과 속성이 자동으로 이 작업을 수행하는지 여부입니다.
Less 및 Sass는 CSS 언어를 가치 있는 방식으로 확장하는 CSS 사전 프로세서입니다.그들이 제공하는 많은 개선 사항 중 하나는 바로 여러분이 찾고 있는 옵션입니다.Less와 함께 매우 좋은 답변이 몇 가지 있는데 Sass 솔루션을 추가하겠습니다.
Sass에는 한 클래스를 다른 클래스로 완전히 확장할 수 있는 확장 옵션이 있습니다.이 기사에서 읽을 수 있는 확장에 대한 자세한 내용
저는 이것이 더 나은 해결책이라고 생각합니다.
[class*=“button-“] {
/* base button properties */
}
.button-primary { ... }
.button-plain { ... }
실제로 당신이 요청하는 것은 존재하지만 추가 모듈로 수행됩니다.예를 들어 .NET의 Better CSS에서 이 질문을 확인하십시오.
LESS 사용에 대한 Larsenal의 답변을 확인하여 이러한 추가 기능이 무엇을 하는지 알아보십시오.
CSS는 당신이 요구하는 것을 실제로 하지 않습니다.만약 여러분이 그러한 복합적인 아이디어를 염두에 두고 규칙을 작성하고 싶다면, 나침반을 확인해 보는 것이 좋을 것입니다.이미 언급한 Less와 비슷하게 생긴 스타일시트 프레임워크입니다.
그것은 당신이 믹스인과 그 모든 좋은 사업을 할 수 있게 해줍니다.
언급된 (우수한) 게시물에 만족하지 못하는 사람들을 위해, 당신은 당신의 프로그래밍 기술을 사용하여 변수(PHP 또는 그 중 하나)를 만들고 그것이 여러 클래스 이름을 저장하도록 할 수 있습니다.
그게 내가 생각해낸 최고의 해킹입니다.
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
<? define('DANGERTEXT','red bold'); ?>
그런 다음 클래스 이름 대신 원하는 요소에 전역 변수를 적용합니다.
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
CSS 구성을 보세요: https://bambielli.com/til/2017-08-11-css-modules-composes/
그들에 따르면:
.serif-font {
font-family: Georgia, serif;
}
.display {
composes: serif-font;
font-size: 30px;
line-height: 35px;
}
저는 제 반응 프로젝트에 사용합니다.
LESS보다 강력한 텍스트 전처리기를 사용하려면 PPWizard를 확인하십시오.
http://dennisbareis.com/ppwizard.htm
웹사이트에 경고하는 것은 정말 끔찍하고 작은 학습 곡선이 있지만 매크로를 통해 CSS와 HTML 코드를 모두 구축하기에 완벽합니다.왜 더 많은 웹 코더들이 그것을 사용하지 않는지 이해할 수 없습니다.
php를 통해 .css 파일을 사전 처리하면 원하는 것을 달성할 수 있습니다.
$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something .$else '}';
...
언급URL : https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes
'programing' 카테고리의 다른 글
| 활동에서 원래 추가된 창이 누출되었습니다. (0) | 2023.06.23 |
|---|---|
| MongoDB 노드 드라이버가 인스턴스 풀을 생성하는 동안 오류가 발생하는 이유는 무엇입니까? (0) | 2023.06.03 |
| 차이가 무엇을 합니까?추적()이 수행하지 않는 대로? (0) | 2023.06.03 |
| Xcode 6 스토리보드 사이즈가 잘못되었습니까? (0) | 2023.06.03 |
| 파일 대화상자를 열고 WPF 컨트롤 및 C#을 사용하여 파일을 선택합니다. (0) | 2023.06.03 |