CSS之選擇器

2021-10-24 21:40:29 字數 2824 閱讀 2379

要使用css對html頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到css選擇器。html頁面中的元素就是通過css選擇器進行控制的。

萬用字元選擇器

萬用字元選擇器顧名思義就是通用的,會對所有的標籤生效,但其權重很低,會被之後書寫的權重更高的**所覆蓋。(權重問題後面會額外的說明)

萬用字元選擇器的語法為:

*eg:

>

*style

>

標籤選擇器

標籤選擇器通俗的理解就是使用標籤名作為選擇器名稱,例如div、input、a等等,這樣會為所有的該標籤設定樣式,所以一般很少用到

標籤選擇器的語法為:

標籤名(例:div)

eg:

>

divstyle

>

id選擇器

id選擇器中的id是不能重複的,id就像是每個人的身份證一樣,是每個人獨有的,在css中id是每個標籤獨有的。

id選擇器的語法為:

#id名稱

eg:

>

#dome

style

>

/* body裡面 */

"dome"

>

測試div

>

類選擇器

類選擇器是常用的選擇器之一,之所以常用類選擇器而不是id選擇器的原因和id是唯一值有關,當我們需要為多個不同標籤設定相同屬性的時候,我們可以將他們的class名字取一樣的,這樣可以減少**冗餘

類選擇器的語法為:

.類名(即class名稱)

eg:

>

.a1style

>

/* body裡面 */

class

="a1"

>

我是塊元素div

>

包含選擇器

包含選擇器又名後代選擇器,是可以多個選擇器疊加使用,並且後面的是前面所指標籤的子元素。(看例子基本就可以明白了)

包含選擇器的語法為:

父元素的選擇器(可以是id選擇器,也可以是類選擇器)

eg:

>

.a1 img

style

>

/* body裡面 */

不常用的選擇器:

層級選擇器

層級選擇器是通過元素間的層次關係獲取元素,主要層次關係有:後代(上乙個已經說到了)、父子、相鄰兄弟和通用兄弟

層級選擇器的語法為:

①父子:

.父元素》子元素

②相鄰兄弟:

.父元素+兄弟

③通用兄弟:

.父元素~兄弟

eg:

>

.a1>img

.a1+img

.a1~img

style

>

/* body裡面 */

>

你好啊!

>

張三span

偽類選擇器

偽類選擇器並不是常用的選擇器,所以在這裡知識作為簡單的介紹一下分類。後續可能會出詳細的分析。

偽類選擇器我們可能常用一點的有四類:

結構性偽類選擇器:

:nth-child()

:nth-of-type()

動態偽類選擇器:

:link

:visited

:hover

:active

:focus

ui元素狀態偽類選擇器:

:enable

:disable

:checked

::selection

否定偽類選擇器:

not

屬性選擇器

屬性選擇器也是不常用的選擇器之一

屬性選擇器的語法為:

標籤名(id/類)[屬性=「屬性值」]

eg:

>

input[type="submit]

*[class="a"]

style

>

/* body裡面 */

class

="a"

>

type

="submit"

>

type

="text"

>

div>

JQuery選擇器之CSS選擇器

語法描述 選擇所有元素 選擇特定型別的元素 選擇具有特定class的元素 選擇具有特定class的某類元素 id 選擇具有特定id屬性值的元素 語法描述 attr 選取定義了attr屬性的元素,即使這個屬性值為空 attr val 選擇attr屬性值等於字串val的元素 attr val 選擇att...

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器,是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤,且標籤的id屬性值不同,然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...