--ruleset قواعد المغلق محدد لجميع العناصر داخل محدد؟

Question

ومع المعرضين للقواعد، فمن الممكن أن يكون لها مجموعة الأوامر لعناصر خلال هذا الحدث في القاعدة (مثل الطباعة والأجهزة المحمولة، الخ) ولكن ماذا عن لمجرد محدد معين؟

وأنا أعمل على صفحة فرعية من موقع أكبر، وأنا لديك لاستخدام أنماط رئيسية لأي من صفحاتي. أحيانا قاعدة النمط فقط يحصل ملفقة من قبل قاعدة من ورقة الأنماط الرئيسية. للتغلب على هذا، وأنا في نهاية الأمر إلى إضافة "#mypage بلاه بلاه #content" قبل كافة القواعد جهدي لضمان بلدي المغلق هو أكثر تحديدا. فإنه يحصل فوضى سريع جدا. ما كنت تفضل القيام به هو شيء من هذا القبيل:

@#mypage {
       div {
           border: 1px solid #000;
           }
       div p {
           color: #00f;
           }
       }

وبحيث ترد أي قواعد أقضي على معرف القسم من الصفحة وأنا أعمل على.

وأوه، نسيت أن أذكر، وأنا لا يمكن (بقدر ما أفهم) استخدامnamespace، كما صفحتي هي ضمن إطار قالب (ومن هنا جاءت الحاجة لأنماط الرئيسي)، حتى لو كنت أقولnamespace (بلدي صفحة رابط) أن بلدي أنماط الكتابة فوق الأنماط الرئيسية.

وأنا في عداد المفقودين شيء بسيط؟

---

وتوضيح:

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

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

ولدي بعض الحرية مع أنماط لقسم بلدي فقط. أنا لا أريد أي قواعد بلدي الكتابة عن طريق الخطأ في أنماط العالمي، وأريد أن تجنب الحاجة إلى استخدام محددات طويلة حقا لقواعد بلدي لتجنب الأنماط العالمي الكتابة لي الأنماط. على سبيل المثال، إذا كنت تريد أن تقول

و"جميع الجداول لديها حدود سوداء"

وI خطر وضع حد أسود حول بعض الجدول في الشريط الجانبي. ومع ذلك، إذا قلت

و"جميع الجداول داخل شعبة #content ديك حد أسود"

وهذا يعمل فقط طالما لم يكن لديهم قاعدة أكثر تحديدا.

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

  #content {

    //and place all of my style rules inside of that:



 p {
     border: pink;
   }

وبحيث ليس لدي سوى أن يعلن بلدي خصوصية مرة واحدة وأنه يغطي كل قاعدة داخل تلك القاعدة الرئيسية.

Answer 1

ومن ما قرأت القاعدة التالية يلائم مشروع القانون، هو عميق مستوى واحد فقط، ويعتبر نموذجا بصراحة معظم المواقع رأيت واستخدامها:

#content div {
  ... your rules ...
}

وهذا لن يؤدي إلا إلى عناصر div تأثير والتي هي تحت عنصر مع معرف المحتوى.

وليس هناك طريقة ل"الجماعة" هذه القواعد وذلك:

#content {
  div {
    ... your rules ...
  }
}

وهذا من شأنه أن يكون لطيفا، ولكن للأسف، ليست الطريقة التي كانت مكتوبة.

Answer 2

وليس الحل الأمثل، لأنه يستخدم معالجة من جانب خادم يستند إلى PHP، ولكن هذا قد يكون جيدا بما فيه الكفاية بالنسبة لك:

http://www.shauninman.com/archive/2007/06 / 27 / css_server_side_pre_processor

Answer 3

مشابهة جدا السؤال (مع عنوان الفقراء بدلا من ذلك) سئل منذ فترة.

والجواب الأكثر شعبية كان شون إنمان ل المعالج من جانب الخادم (والذي أصبح الآن حلت محلها CSSCacheer ).

واقتراحي كان ساس .

في كلتا الحالتين، وهذا هو إلى حد ما على وجود نقص في الفانيليا CSS.

Answer 4

ويمكنك ovveride الأنماط الأخرى مع إعلان "مهم!":

div {
    border: 1px solid #000 !important;
    }
div p {
    color: #00f !important;
    }

ومزيد من المعلومات: http://www.w3.org/ TR / CSS2 / cascade.html #-القواعد الهامة

Answer 5

وهناك طريقة للقيام بذلك باستخدام مثل محرك CSS less (مكتبة نود.جي إس).

ووفقا ل lesscss موقع "(وتجربة شخصية) يمكنك قواعد عش المغلق مثل هذا:

#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 هل يمكن أن يكون أيضا المتغيرات مع أحجام الخطوط وغيرها، لذلك يجعل التغيرات أسرع بكثير.