CSS ID အချက်

ID 选择器允许以一种独立于文档元素的方式来指定样式。

CSS ID 选择器

在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。

语法

首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

请看下面的规则:

*#intro {font-weight:bold;}

与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:

#intro {font-weight:bold;}

这个选择器的效果将是一样的。

第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子:

id="intro">This is a paragraph of introduction.

亲自试一试

类选择器还是 ID 选择器?

在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。

区别 1:只能在文档中使用一次

与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

အခြား 1: ပုံစံအမှတ်အသားများ တစ်ခုတည်းသော အရာတစ်ခုတွင် သာ အသုံးပြုရ

အခြား 2: ID ကို လိုက်နာခြင်း မပြုရ

အခြား 3: ID မှ ပိုမိုသော အရေးအသားများ ပါဝင်နိုင်ပါသည်

အခြားသော အမျိုးအစားဖြစ်သည့်နောက်တွင် အမှတ်အသားများကို တစ်ခုတည်းသော အရာတစ်ခုနှင့် တူညီသည်။ အချိန်ကြာသော အခါများတွင် အမှတ်အသားအမျိုးအစားတစ်ခုကို အခြေခံပြီး အရာတစ်ခုကို သတ်မှတ်ခြင်းမရှိဘဲ ဖြစ်သည်။ အကြောင်းကိစ္စမှာ အမှတ်အသားအမျိုးအစားတစ်ခုကို သတ်မှတ်ခြင်းမရှိဘဲ ဖြစ်သည်။ အချိန်ကြာသော အခါများတွင် အမှတ်အသားအမျိုးအစားတစ်ခုကို သတ်မှတ်ခြင်းမရှိဘဲ ဖြစ်သည်။

#mostImportant {color:red; background:yellow;}

ဤချက်သည် အောက်ပါ အရာများနှင့် ကွဲပြားသည် (ထိုအရာများသည် တစ်ခုတည်းသော အမှတ်အသား ကြီးကြီးပါသည်၊ အကြောင်းကိစ္စမှာ သတ်မှတ်ခြင်းမရှိဘဲ)ဖြစ်သည်:

<h1 id="mostImportant">ဤအချက်သည် အလေးအချိန်ကြီးသည်!
<em id="mostImportant"ဤအချက်သည် အလေးအချိန်ကြီးသည်!
    id="mostImportant">This is important!

亲自试一试:

区分大小写

请注意,类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。

因此,对于以下的 CSS 和 HTML,元素不会变成粗体:

#intro {font-weight:bold;}

id="Intro">This is a paragraph of introduction.

由于字母 i 的大小写不同,所以选择器不会匹配上面的元素。