كيف يمكنني تعطيل أنماط CSS الموروثة؟

Question

لذلك أقوم بإنشاء حاوية مع زوايا مستديرة باستخدام الطريقة التالية:

div.rounded {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
div.rounded div {
    background: url('br.gif') no-repeat bottom right;
}
div.rounded div div {
    background: url('bl.gif') no-repeat bottom left;
}
div.rounded div div div {
    padding: 10px;
}

الآن أريد استخدام Div داخل الحاوية الخاصة بي:

.button {
    border: 1px solid #999;
     background:#eeeeee url('');
    text-align:center;
}
.button:hover {
    background-color:#c4e2f2;
}

<div class='round'><div><div><div>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

ومع ذلك ، مع وضع div داخل divs المتداخلة ، الزر لديه صورة BL في الزاوية.

كيف يمكنني إزالة صورة الخلفية الموروثة؟

Answer 1

الإجابة البسيطة هي التغيير

div.rounded div div div {
    padding: 10px;
}

إلى

div.rounded div div div {
    background-image: none;
    padding: 10px;
}

والسبب هو أنه عندما تصدر قاعدة ل div.rounded div div هذا يعني كل div العنصر المتداخل داخل أ div داخل div مع فئة من rounded, بغض النظر عن التعشيش.

إذا كنت ترغب فقط في استهداف div ، فهذا النحال المباشر ، يمكنك استخدام بناء الجملة div.rounded div > div (على الرغم من أن هذا مدعوم فقط من قبل المتصفحات الأكثر حداثة).

بالمناسبة ، يمكنك عادة تبسيط هذه الطريقة لاستخدام اثنين فقط divS (واحد لكل من أعلى وأسفل أو يسارًا ويمينًا) ، باستخدام تقنية تسمى أبواب منزلقة.

Answer 2

تم تصميم ورقة نمط متتالية للميراث. الميراث جوهري لوجودهم. إذا لم يتم بناؤها لتتابع ، فسيتم تسميتها فقط "أوراق الأنماط".

ومع ذلك ، إذا كان النمط الموروثة لا يناسب احتياجاتك ، فسيتعين عليك تجاوزه بأسلوب آخر بالقرب من الكائن. ننسى فكرة "حظر الميراث".

يمكنك أيضًا اختيار الحل الحبيبي من خلال إعطاء أنماط لكل كائنات فردية ، وعدم إعطاء أنماط للعلامات العامة مثل Div ، P ، Pre ، إلخ.

على سبيل المثال ، يمكنك استخدام الأنماط التي تبدأ بـ # للكائنات التي تحتوي على معرف محدد:

<style>
#dividstyle{
    font-family:MS Trebuchet;
}
</style>
<div id="dividstyle">Hello world</div>

يمكنك تحديد فئات للكائنات:

<style>
.divclassstyle{
    font-family: Calibri;
}
</style>
<div class="divclassstyle">Hello world</div>

أتمنى أن يساعد ذلك.

Answer 3

من المحتمل أن يكون الحل أنظف هو تحديد divs الخاص بك كأطفال دقيق.

حاول تغيير هذا:

div.rounded div div {
    background: url('bl.gif') no-repeat bottom left;
}

الى هذا:

div.rounded > div > div {
    background: url('bl.gif') no-repeat bottom left;
}

Answer 4

إذا قمت بالتحكم في كل من HTML و CSS ، أقترح التبديل إلى استخدام المعرف على جميع DIVs اللازمة للزاوية المستديرة.

CSS

#d1 {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
#d2 {
    background: url('br.gif') no-repeat bottom right;
}
#d3 {
    background: url('bl.gif') no-repeat bottom left;
}
#d4 {
    padding: 10px;
}

لغة البرمجة

<div id="d1"><div id="d2"><div id="d3"><div id="d4">
    <div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

Answer 5

امنح الافتراض الذي لا تريده يرث الممتلكات معرفتي جدا.

Answer 6

أبسط هو أن يفسد كل من divs:

div.rounded {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
div.rounded div.br {
    background: url('br.gif') no-repeat bottom right;
}
div.rounded div.br div.bl {
    background: url('bl.gif') no-repeat bottom left;
}
div.rounded div.br div.bl div.inner {
    padding: 10px;
}
.button {
    border: 1px solid #999;
     background:#eeeeee url('');
    text-align:center;
}
.button:hover {
    background-color:#c4e2f2;
}

ثم استخدم:

<div class='round'><div class='br'><div class='bl'><div class='inner'>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>