Bảng đối chiếu các CSS Selector

Bảng đối chiếu các CSS Selector

Trong CSS, Selector là mẫu được sử dụng để chọn (các) yếu tố mà bạn muốn tạo kiểu. Bài này giúp các bạn thiết kế giao diện (theme) dễ dàng tạo các stylesheet bắt mắt cho trang web.

Nhấn vào các selector để mở trang chi tiết về cách sử dụng của selector đó.

Selector Ví dụ Giải thích ví dụ
.class .intro Chọn tất cả các phần tử với class=”intro”
#id #firstname Chọn tất cả các phần tử với id=”firstname”
* * Chọn tất cả các phần tử
element p Chọn tất cả các phần tử <p>
element,element div, p Chọn tất cả các phần tử <div> và tất cả các phần tử <p>

Xem bài viết đầy đủ tại https://www.daipho.com
element element div p Chọn tất cả các phần tử <p> bên trong phần tử <div>
element>element div > p Chọn tất cả các phần tử <p> có phần tử cha là <div>
element+element div + p Chọn tất cả các phần tử <p> liền sau phần tử <div>

Xem bài viết đầy đủ tại https://www.daipho.com
element1~element2 p ~ ul Chọn tất cả các phần tử <ul> liền trước phần tử <p>
[attribute] [target] Chọn tất cả các phần tử có thuộc tính target
[attribute=value] [target=_blank] Chọn tất cả các phần tử có thuộc tính target=”_blank”
[attribute~=value] [title~=flower] Chọn tất cả các phần tử có thuộc tính title có chứa từ “flower”
[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 với “en”
[attribute^=value] a[href^=”https”] Chọn tất cả các phần tử <a> có giá trị thuộc tính href bắt đầu với “https”
[attribute$=value] a[href$=”.pdf”] Chọn tất cả các phần tử <a> có giá trị thuộc tính href kết thúc với “.pdf”
[attribute*=value] a[href*=”daipho.com”] Chọn tất cả các phần tử <a> có giá trị thuộc tính href có chứa chuỗi con “daipho.com”
:active a:active Chọn liên kết ở trạng thái active
::after p::after Chèn thành phần nào đó vào sau nội dung của mỗi phần tử <p>
::before p::before Chèn thành phần nào đó vào trước nội dung của mỗi phần tử <p>
:checked input:checked Chọn những phần tử <input> ở trạng thái checked
:disabled input:disabled Chọn những phần tử <input> ở trạng thái disabled
:empty p:empty Chọn những phần tử <p> that has no children (including text nodes)
:enabled input:enabled Chọn những phần tử <input> ở trạng thái enabled
:first-child p:first-child Chọn những phần tử <p> là con đầu tiên của phần tử cha
::first-letter p::first-letter Chọn the first letter of every <p> element
::first-line p::first-line Chọn the first line of every <p> element
:first-of-type p:first-of-type Chọn phần tử <p> xuất hiện đầu tiên trong phần tử cha
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Chọn tất cả các phần tử input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to “it” (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Chọn tất cả các phần tử unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no “required” attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the “readonly” attribute specified
:read-write input:read-write Selects input elements with the “readonly” attribute NOT specified
:required input:required Selects input elements with the “required” attribute specified
:root :root Selects the document’s root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Chọn tất cả các phần tử input with a valid value
:visited a:visited Chọn tất cả các phần tử visited links. Xem bài viết đầy đủ tại https://www.daipho.com

Tham khảo:

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin