CSS Element Selector

CSS Element Selector

Selector na CSS na kai tsaye yana da tasiri kan kowane element na dokumentin. Daha yake, element na dokumentin ita ce selector na kai tsaye na farko.

Dahaba, ana gani da kowane sabonin HTML yana rarraba zane, selector na kai tsaye zai wucewa kowane element na HTML, kamar p, h1, em, a, kuma za a iya kawo wucewa ga html shi kansa:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Sai shi kai kai

A zai iya kawo canzawa na zane sabonin daga element a baya zuwa na kai tsaye.

Dahaba, ana gani da ina dacewa za a rarraba sabonin bayanin da ake yi aiki (ba h1 element ba) zuwa grey. Dake a yi wucewa kuma za a rarraba selector na h1 zuwa p:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Sai shi kai kai

Type selector

A cikin sabonin W3C, selector na element na kirki yana kira type selector (type selector).

“Type selector yana tsammanin sunan nau'in element na asali na dokumentin. Type selector yana tsammanin kowane kashi na nau'in wannan element a cikin dokumentin.”

Duba koyarwa da su wucewa duk h1 element na dokumentin:

h1 {font-family: sans-serif;}

Dahaba, amin dacewa, na a dacewa sabuwar zane ga kuma za a rarraba bayanin XML:

XML dokumentin:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

CSS Document:

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

View Effect

From the above examples, you can see that CSS element selectors (type selectors) can set the style of elements in XML documents.

If you need more knowledge about adding styles to XML documents, please visit CodeW3C's XML Tutorials.