Đang tải

Tổng hợp các bộ chọn selectors trong lập trình CSS

Trong CSS, các bộ chọn ( selectors) là các qui ước được sử dụng trong CSS để định kiểu cho các phần tử (các thẻ) trên trang web. Từ đó bạn mới khai báo (declaration) các thuộc tính (property) và giá trị (value) cho phần tử đó.

Tổng hợp các bộ chọn selectors trong lập trình CSS

Dưới đây là các cột “CSS”  đưa ra các phiên bản thuộc tính khác nhau của CSS (CSS1, CSS2, hoặc CSS3).

Bộ chọnVí dụMô tả các ví dụCSS
.class.introChọn tất cả các phần tử có class=”intro”1
#id#firstnameChọn tất cả các phần tử có id=”firstname”1
**Chọn tất cả các phần tử2
elementpChọn tất cả các phần tử1
element,elementdiv, pChọn tất cả các phần tử

và phần tử

1
element elementdiv p Chọn tất cả các phần tửvà bên trong phần tử

1
element>elementdiv > pChọn tất cả các phần tửcó phần tử cha là

2
element elementdiv pChọn tất cả các phần tửđược đặt phía sau phần tử

2
element1~element2p ~ ulChọn tất cả các phần tử

    • được đặt trước bởi một phần tử

 

3
[attribute][target]Chọn tất cả các phần tử có cùng thuộc tính2
[attribute=value][target=_blank]Chọn tất cả các phần tử có thuộc tính bằng giá trị( target=”_blank”)2
[attribute~=value][title~=flower]Chọn tất cả các phần tử có tiêu đề của thuộc tính có chứa từ “flower”2
[attribute|=value][lang|=en]Chọn tất cả các phần tử có giá trị thuộc tính “lang” bắt đầu bằng “en”2
[attribute^=value]a[href^=”https”]Chọn tất cả các phần tử   có giá trị thuộc tính “href” bắt đầu bằng “https”3
[attribute$=value]a[href$=”.pdf”]Chọn tất cả các phần tử  có giá trị thuộc tính “href” kết thúc bằng”.pdf”3
[attribute*=value]a[href*=”timoday”]Chọn tất cả các phần tử có giá trị thuộc tính “href” chứa chuỗi”timoday”3
:activea:activeChọn tất cả các liên kết được kích hoạt1
::afterp::afterChèn thêm nội dung ngay phía sau của các phần tử2
::beforep::beforeChèn thêm nội dung ngay phía trước của các phần tử2
:checkedinput:checkedChọn tất cả các phần tử đang được chọn (selected)3
:disabledinput:disabledChọn tất cả các phần tử đang được vô hiệu hoá (disabled)3
:emptyp:emptyChọn tất cả các phần tửkhông chứa phần tử con (bao gồm cả các nút văn bản)3
:enabledinput:enabledChọn tất cả các phần tử đang được kích hoạt3
:first-childp:first-childChọn các phần tửcó phần tử đầu tiên của phần tử cha chứa nó2
::first-letterp::first-letterChọn kí tự đầu tiên của phần tử1
::first-linep::first-lineChọn dòng đầu tiên của các phần tử1
:first-of-typep:first-of-typeChọn tất cả các phần tửcó phần tử đầu tiên

là phần tử cha

3
:focusinput:focusChọn các phần tử nhận focus2
:hovera:hoverChọn các liên kết khi chuột di chuyển qua1
:in-rangeinput:in-rangeChọn phần tử có giá trị  trong phạm vi nhất định3
:invalidinput:invalidChọn tất cả các phần tử  có giá trị không hợp lệ3
:lang(language)p:lang(it)Chọn tất cả các phần tửcó giá trị thuộc tính “lang” bằng “it”2
:last-childp:last-childChọn tất cả các phần tử là phần tử con cuối cùng của phần tử cha3
:last-of-typep:last-of-typeChọn tất cả các phần tửlà thuộc tính cuối cùng của phần tử cha3
:linka:linkChọn tất cả các liên kết khi chưa được click1
:not(selector):not(p)Chọn tất cả các phần tử không phải là một phần tử3
:nth-child(n)p:nth-child(2)Chọn tất cả các phần tửlà phần tử thứ hai của phần tử cha3
:nth-last-child(n)p:nth-last-child(2)Chọn tất cả các phần tửlà phần tử con thứ hai của phần tử cha, tính từ phần tử con cuối cùng3
:nth-last-of-type(n)p:nth-last-of-type(2)Chọn tất cả các phần tửlà phần tử thuộc tính thứ hai của phần tử cha, tính từ phần tử thuộc tính con cuối cùng3
:nth-of-type(n)p:nth-of-type(2)Chọn tất cả các phần tửlà phần tử thuộc tính con thứ hai của phần tử cha3
:only-of-typep:only-of-typeChọn tất cả các phần tửlà thuộc tính duy nhất của phần tử cha3
:only-childp:only-childChọn tất cả các phần tửlà con duy nhất của phần tử cha3
:optionalinput:optionalChọn tất cả các phần tử đầu vào không có thuộc tính “required”3
:out-of-rangeinput:out-of-rangeChọn tất cả các phần tử đầu vào có giá trị ngoài một phạm vi nhất định3
:read-onlyinput:read-onlyChọn tất cả các phần tử đầu vào có thuộc tính xác định “readonly”3
:read-writeinput:read-writeChọn tất cả các phần tử đầu vào có thuộc tính không xác định “readonly”3
:requiredinput:requiredChọn tất cả các phần tử đầu vào có thuộc tính  “required” xác định3
:root:rootChọn các phần tử gốc của văn bản3
::selection::selectionChọn các phần tử được người dùng lựa chọn
:target#news:targetChọn các phần tử đang hoạt động hiện tại (click trong các liên kết  anchor name)3
:validinput:validChọn tất cả các phần tử đầu vào có một giá trị hợp lệ3
:visiteda:visitedChọn tất cả các liên kết được truy cập1

Trả lời

Chat với chúng tôi qua Facebook
0888.090.898