CSS ການເລືອກຜົນຂອງປະສົມປະສານ

CSS 2 ໄດ້ເປັນການເຂົ້າມາຂອງບັດຄັບປະກອບປະກອຍ.

ບັດຄັບປະກອບປະກອຍສາມາດເລືອກປະກອຍອີງຕາມບັດຄັບຂອງປະກອຍແລະຄວາມຕາຍຂອງບັດຄັບ.

ບັດຄັບປະກອບປະກອຍງາຍ

ຖ້າຕ້ອງເລືອກປະກອຍທີ່ມີບັດຄັບສະໜາມຫຼາຍຢ່າງແຕ່ບໍ່ມີຄວາມຕາຍຈາກຄວາມຕາຍຂອງຄວາມຕາຍຂອງຄວາມຕາຍສາມາດໃຊ້ບັດຄັບປະກອບປະກອຍທີ່ງາຍ.

ຄວາມຕົກລົງ 1

ຖ້າເຈົ້າຢາກເຮັດໃຫ້ປະກອຍທີ່ມີຫົວຂໍ້ (title) ສະແດງສີສີແດງສີທີ່ສີນໍ້າສີຂຽວສີຫົວໃຫ້ການຂຽນ:

*[title] {color:red;}

ຕື່ມຕົວຕື່ມພວກເຈົ້າຕື່ມ.

ຄວາມຕົກລົງ 2

ຄືກັນກັບກ່າວກ່ອນນັ້ນສາມາດນຳໃຊ້ວິສາຍກົນວິສາຍສະແດງສຳລັບສັບຕີບັດ (a element) ທີ່ມີບັດຄັບ href:

a[href] {color:red;}

ຕື່ມຕົວຕື່ມພວກເຈົ້າຕື່ມ.

例子 3

ສາມາດເລືອກຕາມປະກອບປະກອຍຫຼາຍຢ່າງເຊິ່ງພຽງແຕ່ຕໍ່ຕໍ່ກັນບັດຄັບປະກອບປະກອຍ.

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

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

ຕື່ມຕົວຕື່ມພວກເຈົ້າຕື່ມ.

例子 4

可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

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

ຕື່ມຕົວຕື່ມພວກເຈົ້າຕື່ມ.

ຄຳເຕືອນ:上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

例子 5：为 XML 文档使用属性选择器

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 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;}

ນີ້ຈະເຮັດໃຫ້ຄວາມທີ່ຢູ່ໃນຂັ້ນຕອນທຳອິດຂອງການເຊື່ອມຕໍ່ອີກອອກຂອງຄວາມ HTML ປາກົດສີແດງເປັນສີສີແດງແຕກຕໍ່ສີຫຼາຍຫຼືສີຫຼາຍອີກຄັ້ງແຕ່ບໍ່ມີຜົນຕໍ່ຄວາມຫຼືການເຊື່ອມຕໍ່ອີກ

<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">ຄຳຂຽນນີ້ເປັນຄຳເຕືອນທີ່ສຳຄັນຫຼາຍ.</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 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

ຕື່ມຕົວຕື່ມພວກເຈົ້າຕື່ມ.

ກົດລະບຽບຄວາມຄົ້ນຫາທີ່ສະແດງຂອງບາງສ່ວນນີ້

ກົດລະບຽບຄວາມຄົ້ນຫາທີ່ສະແດງຂອງບາງສ່ວນນີ້

ຫລາຍເຄື່ອງບັນທຶກຫຼັກກະຈາຍທົ່ວໄປທີ່ສະໜັບສະໜູນຄວາມຄົ້ນຫານີ້.

ມີການການລວບລວມກັນທີ່ລະອຽດຂອງຄວາມຄົ້ນຫານີ້ພາຍໃນຕາລາງດັ່ງຕໍ່ມາ:

ຮູບແບບ 描述
[abc^="def"] ເລືອກປະກອບທີ່ຄວາມສະແດງ abc ທີ່ເລີ່ມຕົ້ນດ້ວຍ "def".
[abc$="def"] ເລືອກປະກອບທີ່ຄວາມສະແດງ abc ທີ່ຈົບດ້ວຍ "def".
[abc*="def"] ເລືອກປະກອບທີ່ຄວາມສະແດງ abc ທີ່ມີຄວາມຕ້ອງການ "def".

ຫລາຍຄວາມຄົ້ນຫານີ້ມີຜົນນິວຫລັງຫລາຍ.

ຄອບຄອງວ່ານີ້ມີຫລາຍຜົນນິວຫລັງ. ຖ້າທ່ານຕ້ອງຈະຈັດການສະແດງທຳມະຊາດຄວາມມາກຕໍ່ CodeW3C.com ທັງໝົດບໍ່ຈະຕ້ອງແຕ່ກໍານົດ 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-<p lang="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 选择器参考手册

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] ການຈັດການບັນດາສິ່ງທີ່ມີຄູ່ມືທີ່ກວມມີຄູ່ມືທີ່ກໍານົດ