CSS: هل يمكن تحديد كل نوع من العناصر التي ليست ضمن فئة معينة؟

https://stackoverflow.com/questions/1009094

06-07-2019
|

سؤال

يقول

ودعونا حصلت على هذه الصفحة:

<body>
    <h1>Hello!</h1>
    <div class="wrapper">
        <div class="anotherclass">
            <h1>Another heading 1</h1>
        </div>
        <div class="yetanotherclass">
            <h1>Yet another heading 1</h1>
        </div>
    </div>
    <h1>Good bye!</h1>
    <div class="class">
        <h1>Good bye. And this time I mean it.</h1>
    </div>
</body>

وأريد لتحديد كافة العناصر H1 التي ليست ضمن الدرجة wrapper. كيف يمكنني أن أفعل ذلك مع CSS؟ أنا لا أريد "حل" مثل

body h1, body .class h1 {style definitions}

وأنا أكثر بعد نوعا من هذا:

h1:not(.wrapper > h1) {style definitions}

هل هناك أي طريقة للقيام بذلك؟

المحلول

وماذا لو كنت فعلت شيئا من هذا القبيل:

h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }

في h1.class كنت تجاوز كل ما قمت بتعريفه في حكم h1 الخاص بك.

وهنا مثال:

<html>
    <head>
        <style type="text/css">
                div { color:#00f; }
                div.foo { color:#f00; }
        </style>
    </head>
    <body>
        <div class="foo">foo</div>
        <div>bar</div>
        <div>baz</div>
    </body>
</html>

في هذا المثال لقد بفعاليات جميع divs التي ليس لديها فئة من foo.

نصائح أخرى

وأنت لا تستطيع أن تفعل ما كنت طالبا مع المغلق. الفكرة كلها حول المغلق هو شلال، وما كنت ترغب في القيام به هو العمل ضد تدفق شلال.

والعمل مع المد تفعل المغلق العادي:

h1 {style definitions}
.wrapper h1 {style definitions}

ويمكنك استخدام محدد العالمي * تطبيق التصميم العالمي ومن ثم تطبيق محدد عالمية متداخلة: .wrapper * التراجع عن التصميم قمت بتطبيقه أصلا

* {font-weight:bold; border:thin solid red;}

.wrapper * {font-weight:normal; border: 0px solid white;}

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow