[CSS/DIV] Анализирайте използването на четирите основни селектора на стойности на CSS атрибутите

Тази статия ще ви го опишеCSS селектор за стойност на свойстваФорматът на селектора на атрибути е елемент, последван от скоби, с атрибути в скоби, или атрибутни изрази (не знам дали описанието е правилно, самосъздадени думи), като h1[заглавие], h1[title="logo"] и др., вярвам, че ще научите много от тази статия.

CSS урок: Селектор на стойности на CSS атрибути

CSS AttributeSelectors, може би не би трябвало да сте непознати с attribute selectors, по същество id и class selectors всъщност са селектори на стойност на атрибути, просто изберете id или класова стойност.

Форматът на селектора на атрибути е елемент, последван от скоби, с атрибути в скоби, или изрази на атрибути (не знам дали описанието е правилно, самосъздадени думи), като h1[заглавие], h1[title="Logo"] и др., можете да видите 4 конкретни форми от моята дискусия по-долу.

1. Прост CSS селектор за стойност на атрибути

Независимо от името, това е характеристиката на простия селектор на атрибути.

h1[клас]{цвят:сребрист; Ще действа върху всеки H1 елемент с класа, независимо от стойността на класа. Следователно<h1class="hoopla">Здравейте</h1>, <h1class="сериозен">Спокойствие</h1>, <h1class="fancy"> h1 на Fooling</h1> ще бъде засегнат от това правило.

Разбира се, това "свойство" не е просто клас или id, а могат да бъдат всички легитимни свойства на елемента, като alt на img, като img[alt]{cssdeclarationshere; Ще се прилага за всеки img елемент с alt атрибут. След това a[href][title]{font-weight:bold; А какво ще кажеш }? Както знаете, това работи върху елементи с атрибути както href, така и заглавие, като <atitle="W3CHome">W3C</a>.

2. Прецизен селектор за стойност на CSS атрибута

id и клас са по същество точни селектори на стойности на атрибути, да, h1#logo е равно на h1[id="logo"]. Както споменах по-рано, не се ограничаваме само до id или клас, можем да използваме всяко свойство! Например, a[][title="W3CHome"]{font-size:200%; } ще се прилага към <atitle="W3CHome">W3C</a>.

3. Някои CSS селектори за стойност на атрибути

Както подсказва името, докато стойността на атрибута частично съвпада (в този случай частта, която всъщност съвпада с цялата дума), ще действа върху елемента. Нека разгледаме един пример:

Всяко от тези може да направи шрифта на p удебелен.

Този селектор е много полезен, например, ако искате да стилизирате илюстрация с низа "Figure" в заглавието, например title="Figure5:xxx description", можете да използвате img[title~="Figure"].

Трябва да се отбележи, че както подчертах в първото изречение, трябва да съвпаднете с цялата дума, а img[title~="Figure"] няма да съвпада с title="Image5:xxx description".

Също така направих малък тест, променяш "Figure" на "Illustration" в примера, а img[title~="Figure"] на img[title~="Illustration"], и все пак се съвпада във Firefox, независимо дали кодирането е GB2312 или UTF-8. Изглежда, че поддръжката на CSS за китайски не е лоша.

4. Специален селектор за стойност на CSS атрибута

Малко странно е този селектор. Работи така, по-лесно е да се даде пример, отколкото да се опише.

*[lang|="en"]{color:white; Това правило ще избере стойността на атрибута lang или елемента, който започва с en-. Тоест, може да съвпадне <h1lang="en">Здравейте!</h1>, <plang="en-us">Поздрави!</p>и <divlang="en-au">Здравей!</div>и не съвпада<plang="fr">Bonjour!</p>и <h3lang="cy-en">Jrooana!</h3>.