คลาส CSS สามารถสืบทอดคลาสอื่นอย่างน้อยหนึ่งคลาสได้หรือไม่?

ฉันรู้สึกโง่ที่เคยเป็นโปรแกรมเมอร์เว็บมานานและไม่รู้คำตอบของคำถามนี้ฉันหวังว่ามันจะเป็นไปได้และฉันก็ไม่รู้เหมือนกันมากกว่าที่ฉันคิดว่าเป็นคำตอบ (ซึ่งเป็นไปไม่ได้) .

คำถามของฉันคือว่าเป็นไปได้ที่จะสร้างคลาส CSS ที่ "สืบทอด" จากคลาส CSS อื่น (หรือมากกว่าหนึ่ง)

ตัวอย่างเช่นเรามี:

.something { display:inline }
.else      { background:red }

สิ่งที่ฉันต้องการทำคืออะไรเช่นนี้:

.composite 
{
   .something;
   .else
}

โดยที่คลาส ".composite" จะแสดงแบบอินไลน์และมีพื้นหลังสีแดง

มีเครื่องมือเช่นLESSที่ให้คุณเขียน CSS ในระดับที่สูงกว่าของนามธรรมที่คล้ายกับสิ่งที่คุณอธิบาย

เรียก "Mixins" เหล่านี้น้อยลง

แทน

/* 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;
}

องค์ประกอบสามารถมีหลายคลาส:

.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เป็นเพียง selectors ไม่มีอะไรเพิ่มเติม

แต่คุณสามารถระบุสองคลาสบนองค์ประกอบ

<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>

ตำแหน่งที่สีพื้นหลังและสีของย่อหน้าได้รับมาจากการตั้งค่าใน div ที่ล้อมรอบซึ่งมี.fooสไตล์ คุณอาจต้องตรวจสอบคุณสมบัติ W3C ที่แน่นอนinheritเป็นค่าเริ่มต้นสำหรับคุณสมบัติส่วนใหญ่ แต่ไม่ใช่สำหรับทั้งหมด

ฉันพบปัญหาเดียวกันนี้และลงเอยด้วยการใช้โซลูชัน JQuery เพื่อให้ดูเหมือนว่าคลาสสามารถสืบทอดคลาสอื่นได้

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

นี่จะค้นหาองค์ประกอบทั้งหมดที่มีคลาส "คอมโพสิต" และเพิ่มคลาส "บางอย่าง" และ "อื่น ๆ " ให้กับองค์ประกอบ ดังนั้นสิ่งที่ชอบ<div class="composite">...</div>จะจบลงเช่นนั้น:
<div class="composite something else">...</div>

SCSSทางสำหรับตัวอย่างที่ได้รับจะเป็นสิ่งที่ชอบ

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

ข้อมูลเพิ่มเติมตรวจสอบพื้นฐาน sass

สิ่งที่ดีที่สุดที่คุณสามารถทำได้คือ

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

}

ในไฟล์ Css:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

ฉันรู้ว่าคำถามนี้ตอนนี้เก่ามาก แต่ที่นี่ไม่มีอะไรเลย!

หากเจตนาคือการเพิ่มคลาสเดียวที่มีความหมายคุณสมบัติของหลายคลาสเป็นวิธีแก้ปัญหาพื้นเมืองฉันขอแนะนำให้ใช้ JavaScript / jQuery (jQuery ไม่จำเป็นจริงๆ แต่มีประโยชน์อย่างแน่นอน)

หากคุณมีตัวอย่างเช่น.umbrellaClass"สืบทอด" จาก.baseClass1และ.baseClass2คุณอาจมี JavaScript บางส่วนที่พร้อมใช้งาน

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

ตอนนี้ทุกองค์ประกอบของ.umbrellaClassจะมีคุณสมบัติทั้งหมดของทั้งสอง.baseClasss โปรดทราบว่าเช่นเดียวกับการสืบทอด OOP .umbrellaClassอาจมีหรือไม่มีคุณสมบัติของตนเอง

ข้อแม้เดียวที่นี่คือการพิจารณาว่ามีองค์ประกอบที่ถูกสร้างแบบไดนามิกที่จะไม่อยู่เมื่อรหัสนี้ไฟ แต่มีวิธีที่ง่ายรอบที่เช่นกัน

แม้ว่า CSS ไม่ได้มีการถ่ายทอดทางพันธุกรรม

ช่วงเวลาที่สมบูรณ์แบบ : ฉันไปจากคำถามนี้ไปยังอีเมลของฉันเพื่อค้นหาบทความเกี่ยวกับLess , ไลบรารี Ruby ที่เหนือสิ่งอื่นใด:

เนื่องจาก super ดูเหมือนว่า footerแต่มีแบบอักษรที่แตกต่างกันฉันจะใช้เทคนิคการรวมคลาสของ Less (พวกเขาเรียกว่า mixin) เพื่อบอกให้รวมการประกาศเหล่านี้ด้วย:

#super {
  #footer;
  font-family: cursive;
}

น่าเสียดายที่ CSS ไม่มี 'การสืบทอด' ในวิธีการเขียนโปรแกรมภาษาเช่น C ++, C # หรือ Java คุณไม่สามารถประกาศคลาส CSS แล้วขยายด้วยคลาส CSS อื่น

อย่างไรก็ตามคุณสามารถใช้มากกว่าคลาสเดียวกับแท็กในมาร์กอัปของคุณ ... ซึ่งในกรณีนี้จะมีกฎที่ซับซ้อนซึ่งกำหนดว่ารูปแบบใดที่เบราว์เซอร์จะนำไปใช้จริง

<span class="styleA styleB"> ... </span>

CSS จะมองหาสไตล์ทั้งหมดที่สามารถนำไปใช้โดยขึ้นอยู่กับว่ามาร์กอัปของคุณคืออะไรและรวมสไตล์ CSS จากกฎหลายข้อเข้าด้วยกัน

โดยทั่วไปแล้วสไตล์จะถูกรวมเข้าด้วยกัน แต่เมื่อความขัดแย้งเกิดขึ้นสไตล์ที่ประกาศในภายหลังโดยทั่วไปจะชนะ (เว้นแต่ว่าจะมีการระบุแอตทริบิวต์! important ในสไตล์หนึ่งซึ่งในกรณีนี้จะชนะ) นอกจากนี้สไตล์ที่นำไปใช้กับองค์ประกอบ HTML จะมีความสำคัญมากกว่าสไตล์คลาส CSS

นอกจากนี้ยังมี SASS ซึ่งคุณสามารถหาที่http://sass-lang.com/ มีแท็ก @extend รวมถึงระบบพิมพ์แบบผสม (ทับทิม)

เป็นคู่แข่งกับ LESS

ไม่สามารถทำได้ใน CSS

สิ่งเดียวที่ได้รับการสนับสนุนใน CSS นั้นมีความเฉพาะเจาะจงมากกว่ากฎอื่น:

span { display:inline }
span.myclass { background: red }

ช่วงที่มีคลาส "myclass" จะมีคุณสมบัติทั้งสอง

อีกวิธีคือโดยการระบุสองคลาส:

<div class="something else">...</div>

รูปแบบของ "else" จะแทนที่ (หรือเพิ่ม) สไตล์ของ "some"

คุณสามารถใช้คลาส CSS ได้มากกว่าหนึ่งคลาสกับองค์ประกอบโดยสิ่งนี้เช่น class = "อย่างอื่น"

อย่างที่คนอื่นพูดคุณสามารถเพิ่มหลายคลาสให้กับองค์ประกอบ

แต่นั่นไม่ใช่ประเด็น ฉันได้รับคำถามเกี่ยวกับการสืบทอด จุดที่แท้จริงคือการสืบทอดใน CSS ไม่ได้ทำผ่านคลาส แต่ผ่านลำดับชั้นขององค์ประกอบ ดังนั้นเพื่อจำลองลักษณะที่สืบทอดมาคุณจำเป็นต้องใช้มันกับองค์ประกอบในระดับต่างๆใน DOM

ฉันกำลังมองหาสิ่งที่คลั่งไคล้เช่นกันและฉันก็คิดออกโดยลองสิ่งที่แตกต่าง: P ... คุณสามารถทำเช่นนั้นได้:

composite.something, composite.else
{
    blblalba
}

ทันใดนั้นก็ใช้งานได้สำหรับฉัน :)

ในสถานการณ์ที่เฉพาะเจาะจงคุณสามารถทำการรับมรดก "อ่อน":

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

ใช้งานได้เฉพาะถ้าคุณกำลังเพิ่มคลาส. composite ให้กับองค์ประกอบลูก มันคือการสืบทอด "soft" เนื่องจากค่าใด ๆ ที่ไม่ได้ระบุใน. com จะไม่ได้รับการสืบทอดอย่างชัดเจน โปรดทราบว่ามันจะยังคงเป็นตัวอักษรน้อยลงเพียงแค่เขียน "แบบอินไลน์" และ "สีแดง" แทน "สืบทอด"

นี่คือรายการของคุณสมบัติและไม่ว่าพวกเขาจะทำโดยอัตโนมัติ: https://www.w3.org/TR/CSS21/propidx.html

ในขณะที่การสืบทอดโดยตรงเป็นไปไม่ได้

เป็นไปได้ที่จะใช้คลาส (หรือ id) สำหรับแท็กพาเรนต์จากนั้นใช้ CSS combinators เพื่อเปลี่ยนพฤติกรรมของแท็กลูกจากการสืบทอด

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 ในลักษณะนี้ (ตัวอย่างเช่นการเปลี่ยนประเภทการตกแต่งข้อความ)

Less และ Sass เป็นตัวประมวลผลล่วงหน้า CSS ซึ่งขยายภาษา CSS ด้วยวิธีที่มีค่า หนึ่งในการปรับปรุงที่พวกเขาเสนอเป็นเพียงตัวเลือกที่คุณต้องการ มีคำตอบที่ดีกับ Less และฉันจะเพิ่ม Sass solution

Sass มีตัวเลือกเพิ่มเติมซึ่งอนุญาตให้หนึ่งคลาสสามารถขยายไปยังคลาสอื่นได้อย่างเต็มที่ ข้อมูลเพิ่มเติมเกี่ยวกับการขยายคุณสามารถอ่านได้ในบทความนี้

ที่จริงแล้วสิ่งที่คุณต้องการนั้นมีอยู่จริง - แต่มันก็เป็นโมดูลเสริม ลองดูคำถามนี้กับBetter CSS ใน. NETสำหรับตัวอย่าง

ตรวจสอบคำตอบของ Larsenal เกี่ยวกับการใช้ LESSเพื่อรับทราบว่าส่วนเสริมเหล่านี้ทำอะไร

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;
}

ฉันใช้มันในโครงการตอบโต้ของฉัน

อย่าคิดว่าคลาส css เป็นคลาสที่มุ่งเน้นวัตถุให้คิดว่ามันเป็นเพียงเครื่องมือหนึ่งในตัวเลือกอื่น ๆ เพื่อระบุว่าคลาสของแอ็ตทริบิวต์ใดที่มีองค์ประกอบสไตล์ html คิดว่าทุกอย่างระหว่างการจัดฟันเป็นที่ระดับแอตทริบิวต์และตัวเลือกที่อยู่ด้านซ้ายมือบอกองค์ประกอบที่พวกเขาเลือกที่จะสืบทอดแอตทริบิวต์จากระดับแอตทริบิวต์ ตัวอย่าง:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

เมื่อองค์ประกอบที่จะได้รับแอตทริบิวต์class="foo"จะเป็นประโยชน์ที่จะคิดว่ามันไม่เป็นที่สืบทอดแอตทริบิวต์จากระดับ.fooแต่จากแอตทริบิวต์ชั้นและแอตทริบิวต์คลาส 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 */}

ร้องเรียนหลักที่นี่คือว่าตอนนี้ผมต้องพิมพ์เลือกจากทุกแอตทริบิวต์ชั้นอีกครั้งเพื่อระบุว่าองค์ประกอบที่พวกเขาควรเลือกควรแอตทริบิวต์ยังสืบทอดมาจากฐานแอตทริบิวต์ชั้น แต่ถึงกระนั้นทางเลือกอื่นก็คือต้องจำไว้ว่าให้แก้ไขทุก ๆคลาสของแอททริบิวท์ที่มีการพึ่งพาที่ซ่อนอยู่ในแต่ละครั้งที่มีการเปลี่ยนแปลงบางอย่างหรือใช้เครื่องมือของบุคคลที่สาม ตัวเลือกแรกทำให้พระเจ้าหัวเราะอย่างที่สองทำให้ฉันอยากฆ่าตัวตาย

หากคุณต้องการตัวประมวลผลข้อความที่มีประสิทธิภาพมากกว่า LESS ให้ดู PPWizard:

http://dennisbareis.com/ppwizard.htm

คำเตือนเว็บไซต์มีความน่ากลัวอย่างแท้จริงและมีช่วงการเรียนรู้เพียงเล็กน้อย แต่มันสมบูรณ์แบบสำหรับการสร้างทั้ง CSS และ HTML โค้ดผ่านมาโคร ฉันไม่เคยเข้าใจเลยว่าทำไมตัวเข้ารหัสเว็บเพิ่มเติมจึงไม่ใช้

คุณสามารถบรรลุสิ่งที่คุณต้องการหากคุณประมวลผลไฟล์. css ของคุณล่วงหน้าผ่าน php ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...