A CSS attribútumválasztó típusai - Semalt Expert

A HTML elem osztályból, azonosítóból és attribútumokból áll. Az attribútumválasztó kiválasztja azokat a HTML elemeket, amelyek tartalmaznak egy attribútumot vagy egy attribútum értékét. Az attribútumválasztók egyszerű módszert kínálnak a stílusok HTML-elemekre történő alkalmazására egy adott attribútum vagy tulajdonság értékkel. Az attribútumválasztókat két szögletes zárójel határozza meg, amelyek az attribútumot értékével zárják. Ennek ellenére el lehet helyezni egy elemtípus-választót. A CSS [attribútum] választó a stílusszabályokat alkalmazza egy elemre, ha és amikor egy adott tulajdonságból áll.

Az attribútumválasztók típusai

Különböző típusú attribútumválasztók léteznek, amelyek mindegyike külön esetekben használható:

CSS [attribútum | = "érték"] A választóelem kiemeli azokat az elemeket, amelyek egy adott tulajdonsággal rendelkeznek, és egy meghatározott értékkel kezdődik.

CSS [attribútum ~ = "érték"] A választóval olyan elemeket lehet keresni, amelyek tulajdonságértékét egy adott szó jellemzi.

CSS [attribútum ^ = "érték"] A választó elem tulajdonságokkal rendelkező elemeket keres, amelyek egy adott értékkel kezdődnek. Az érték nem feltétlenül egy teljes szó.

CSS [attribútum $ = "érték"] A választó olyan komponenseket talál, amelyeknek egy attribútumértéke egy meghatározott értékkel ér véget.

A CSS attribútumválasztó alkalmazások

Különböző módokon használható az attribútumválasztó az univerzális, osztály- vagy azonosítóválasztó helyett

Az attribútumválasztók leggyakoribb használata a bemenetek. Ide tartoznak a szövegválasztók, a jelölőnégyzetek választói, a jelszóválasztók, a fájlválasztók, a rejtett szelektorok, a jelszóválasztók, a rádióválasztók, az alaphelyzetbe állítógombok és mások.

Stílusformák

Az attribútumválasztók nagyon hasznosak osztály vagy azonosító nélküli űrlapok formázásakor.

Stílus linkek

Például az attribútumválasztókkal stílusosíthat egy blogrollot, ahol a barátaidra mutató linkek listája van. Azt kívánja azonban, hogy mindegyik link stílusa eltérő legyen. A továbblépés hagyományos módja egy hívásnév hozzárendelése, amely további jelöléseket igényel. Mégis használhatja az n-edik gyermeket, amely megköveteli, hogy a megrendelések soha nem változnak. Az attribútumválasztók használata annyira megkönnyíti, mert van egy attribútum, amelyet megcélozhat.

Határbemenetek

A szegélyelemek stilizálása a CSS border image attribútummal elegáns módja annak, hogy képeket adjunk a testhez. Ez lehetővé teszi a kép meghatározását mint elem szegélyét. A határkép méretezhető, szeletelhető és különböző módon ismételhető meg annak biztosítása érdekében, hogy az illeszkedjen a határ menti területhez. A határok sugara attribútum lehetővé teszi, hogy kerek sarkokat adjunk hozzá képek nélkül. Az ingatlan meghatározza a sarok alakját.

Stílusos színek

A CSS attribútumválasztók megkönnyítik az összes elem stílusát, amelyek különleges színértékkel rendelkeznek. Használhatja a színes kulcsszót, az RGB (), RGBA (), a HSL () és a HSLA () jelöléseket. Az RGBA színértékek az RGB színmodell kiterjesztése egy csatornával, amely meghatározza a szín átlátszóságát. A paraméterek értéke 1,0 (átlátszatlan) és 0,0 (átlátszó) között változhat

A HSL színmodellt a (Hue_saturation_Lightness) magyarázattal magyarázza. A színárnyalatot szög (0-360) vagy a színkerék formájában lehet megjeleníteni. A telítettséget és a világosságot százalékban mértük. A telítettség 0% -a fehéreket vagy szürkéket, míg 100 a teljes színt képviseli. A 100% -os világosság fehért, 0% -a feketét képviseli.