ماذا تعني خصائص النمط المتقاطع في Google Chrome DevTools؟

Question

أثناء فحص عنصر باستخدام DevTools من Chrome ، في علامة التبويب Elements ، يعرض شريط "Styles" على الجانب الأيمن خصائص CSS المقابلة. في بعض الأحيان ، يتم ضرب بعض هذه الخصائص. ماذا تعني هذه الخصائص؟

Answer 1

عندما تظهر خاصية CSS على أنها مضغوطة ، فهذا يعني أنه تم تطبيق نمط المتقاطع ، ولكن بعد ذلك تم تجاوزه بواسطة محدد أكثر تحديدًا ، أو قاعدة محلية أكثر ، أو بواسطة خاصية لاحقة ضمن نفس القاعدة.

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

على سبيل المثال ، إذا تم تطبيق لون الخلفية على الجميع divS ، ولكن تم تطبيق لون خلفية مختلف divS بمعرف معين ، سيتم عرض اللون الأول ولكن سيتم عبوره ، حيث حل اللون الثاني محله (في قائمة الممتلكات لـ div مع هذا المعرف).

Answer 2

في ملحوظة جانبية. إذا كنت تستخدم @وسائل الإعلام الاستفسارات (مثل @media screen (max-width:500px)) إيلاء اهتمام خاص لتطبيق استعلام media بعد، بعدما لقد انتهيت من الأساليب العادية. نظرًا لأنه سيتم عبور استعلام Media (على الرغم من أنه أكثر تحديداً) إذا تبعه CSS الذي يتلاعب بالعناصر نفسها. مثال:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **

Answer 3

بالإضافة إلى الإجابة أعلاه ، أود أيضًا تسليط الضوء على حالة من الممتلكات التي فاجأتني حقًا.

إذا كنت تضيف صورة خلفية إلى div:

<div class = "myBackground">

</div>

تريد توسيع نطاق الصورة لتناسب أبعاد DIV بحيث يكون هذا هو تعريف الفئة العادية.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

ولكن إذا قمت بتبادل الترتيب على النحو التالي:-

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

ثم في Chrome سترى حجم الخلفية كما ضربت. لست متأكدًا من السبب في ذلك ، لكن نعم لا تريد العبث به.

Answer 4

إذا كنت ترغب في تطبيق النمط حتى بعد الإشارة إلى الإشارة ، فيمكنك الاستخدام "!important" لفرض الأسلوب. قد لا يكون حلًا صحيحًا ولكنه حل المشكلة.

Answer 5

هناك بعض الحالات عندما تقوم بنسخ ولصق رمز CSS في مكان ما ويكسر التنسيق حتى يظهر Chrome التحذير الأصفر. يجب أن تحاول إعادة تنسيق رمز CSS مرة أخرى ويجب أن يكون على ما يرام.