تفصيل مزيجات الاختيار الخاصية CSS

أدخل CSS 2 ملاحظة الخاصية.

يمكن لملاحظة الخاصية أن تختار العناصر بناءً على الخاصية والقيمة.

ملاحظة الخاصية البسيطة

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

مثال 1

إذا كنت ترغب في جعل جميع العناصر التي تحتوي على عنوان (title) باللون الأحمر، يمكنك كتابة:

*[title] {color:red;}

جرب ذلك بنفسك

مثال 2

مثل السابق، يمكنك تطبيق النمط فقط على الروابط (عناصر a) التي تحتوي على الخاصية href:

a[href] {color:red;}

جرب ذلك بنفسك

例子 3

يمكن أيضًا اختيار بناءً على عدة خصائص، بشرط ربط ملاحظات الخصائص معًا.

على سبيل المثال، إذا كنت ترغب في جعل نص الروابط في HTML الذي يحتوي على الخاصيتين href و title أصفر، يمكنك كتابة ما يلي:

a[href][title] {color:red;}

جرب ذلك بنفسك

مثال 4

يمكن استخدام بعض الطرق الإبداعية لهذه الخاصية.

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

img[alt] {border: 5px solid red;}

جرب ذلك بنفسك

نصيحة:الخصائص المذكورة أعلاه أكثر ملاءمة لتحليل المشاكل بدلاً من التصميم، أي لتحديد ما إذا كانت الصور فعالة أم لا.

مثال 5: استخدام اختيارات الخاصية في وثائق XML

اختيارات الخاصية مفيدة جدًا في وثائق XML، لأن لغة XML تدعو إلى تحديد أسماء العناصر والأسماء الخاصة بخصائص العناصر بناءً على استخدامها.

افترض أننا قمنا بتصميم وثيقة XML لوصف كواكب النظام الشمسي. إذا أردنا اختيار جميع عناصر planet التي تحتوي على خاصية moons، لجعلها تظهر بالأحمر، لكي نركز أكثر على الكواكب التي تحتوي على moons، يمكننا كتابة ما يلي:

planet[moons] {color:red;}

هذا سيجعل النص التالي للعناصر الثاني والثالثة يظهر بالأحمر، ولكن النص للعنصر الأول لن يكون أحمر:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

查看效果

اختيار بناءً على القيمة الخاصة

بالإضافة إلى اختيار العناصر التي تحتوي على بعض الخصائص، يمكنك أيضًا تحديد نطاق الأختيار بشكل أعمق، فقط لاختيار العناصر التي تحتوي على خصائص معينة.

مثال 1

على سبيل المثال، إذا كنت ترغب في جعل الروابط التي تشير إلى مستند معين على خادم الويب أصفر، يمكنك كتابة ما يلي:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

جرب ذلك بنفسك

مثال 2

مثل الخيار الأساسي للعناصر، يمكن ربط عدة خيارات من نوع خاصية-قيمة معًا لاختيار مستند.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

هذا سيجعل النص التالي للمسار الأول من الروابط الأزرق يصبح أحمر، ولكن الروابط الثانية أو الثالثة لن تكون مؤثرة:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

جرب ذلك بنفسك

例子 3

同样地，XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

查看效果

属性与属性值必须完全匹配

请注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

请考虑一下的标记片段：

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

جرب ذلك بنفسك

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

جرب ذلك بنفسك

如果忽略了波浪号，则说明需要完成完全值匹配。

部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说，p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

img[title~="Figure"] {border: 1px solid gray;}

ستختار هذه القاعدة جميع الصور التي تحتوي على نص title يحتوي على "Figure". لن يتم مطابقة الصور التي لا تحتوي على سمة title أو التي لا تحتوي على "Figure" في سمة title.

جرب ذلك بنفسك

خلاصة السمة التي تتطابق مع النسق الجزئي

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

معظم المتصفحات الحديثة تدعم هذه الخلاصة، بما في ذلك IE7.

في التالي، تلخيص بسيط لهذه الخلاصة.

نوع وصف
[abc^="def"] اختر جميع العناصر التي تبدأ بسمة abc بالنسق "def".
[abc$="def"] اختر جميع العناصر التي تنتهي بسمة abc بالنسق "def".
[abc*="def"] اختر جميع العناصر التي تحتوي على سمة abc تحتوي على النسق "def".

يمكنك التفكير في أن لهذه الخلاصة العديد من الاستخدامات.

على سبيل المثال، إذا كنت ترغب في تطبيق النمط على جميع الروابط التي تشير إلى codew3c.com، لا تحتاج إلى تحديد class لكل هذه الروابط وتكتب النمط بناءً على هذا class، بل يمكنك فقط كتابة القاعدة التالية:

a[href*="codew3c.com"] {color: red;}

جرب ذلك بنفسك

نصيحة:يمكن استخدام هذه الخلاصة لأي سمة.

نوع الخلاصة المحددة

سأقدم لك الآن خلاصة السمة المحددة.

*[lang|="en"] {color: red;}

ستختار هذه القاعدة جميع العناصر التي تكون سمة lang تساوي en أو تبدأ بـ en-، لذا سيتم اختيار الثلاثة العناصر الأولى في العينة التالية دون اختيار العناصر الأثنين الأخيرتين:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

جرب ذلك بنفسك

بشكل عام، [att|="val"] يمكن استخدامها لأي سمة وقيمة.

افترض أن يكون هناك سلسلة من الصور في مستند HTML، حيث تكون كل صورة تسمى figure-1.jpg و figure-2.jpgيمكنك استخدام الخلاصة التالية لمطابقة جميع هذه الصور:

img[src|="figure"] {border: 1px solid gray;}

جرب ذلك بنفسك

بالطبع، الاستخدام الأكثر شيوعًا للخلاصة المحددة بالسمة هو مطابقة قيمة اللغة.

دليل مرجعي للمزيجات الاختيارية CSS

مزيج اختيار وصف
[خاصية] يستخدم لاختيار العناصر التي تحتوي على خاصية معينة.
[خاصية=قيمة] يستخدم لاختيار العناصر التي تحتوي على خاصية معينة وقيمة معينة.
[خاصية~=قيمة] يستخدم لاختيار العناصر التي تحتوي على كلمة محددة في قيمة الخاصية.
[خاصية|=قيمة] يستخدم لاختيار العناصر التي تحتوي على خاصية تبدأ بالقيمة المحددة، ويجب أن تكون القيمة كلمة كاملة.
[خاصية^=قيمة] تطابق كل عنصر يبدأ بالقيمة المحددة في قيمة الخاصية.
[خاصية$=قيمة] تطابق كل عنصر ينتهي بالقيمة المحددة في قيمة الخاصية.
[خاصية*=قيمة] تطابق كل عنصر يحتوي على القيمة المحددة في قيمة الخاصية.