• Bản quyền
  • Tác Giả
  • FAQs
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • HTML
    Các ký tự thực thể trong HTML

    Các ký tự thực thể trong HTML

    Cách chèn Plug-in vào trang web HTML

    Cách chèn Plug-in vào trang web HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách chèn video trên Youtube vào trang web

    Cách chèn video trên Youtube vào trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn video vào trang web

    Cách chèn một đoạn video vào trang web

    Cách tạo một cái bản đồ ảnh trong HTML

    Cách tạo một cái bản đồ ảnh trong HTML

  • CSS
    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách thức định dạng cho một cái liên kết (Link)

    Cách thức định dạng cho một cái liên kết (Link)

    Chức năng & cách sử dụng thuộc tính transition

    Chức năng & cách sử dụng thuộc tính transition

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

  • JavaScript
    Từ dành riêng (Reserved Words) trong JavaScript

    Từ dành riêng (Reserved Words) trong JavaScript

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Khuôn khổ trình bày mã lệnh JavaScript

    Khuôn khổ trình bày mã lệnh JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Thuật ngữ "Hoisting" trong JavaScript

    Thuật ngữ “Hoisting” trong JavaScript

    Cách tìm và sửa những câu lệnh bị lỗi

    Cách tìm và sửa những câu lệnh bị lỗi

    Các lệnh xử lý lỗi trong JavaScript

    Các lệnh xử lý lỗi trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Cách sử dụng vòng lặp while & do while

    Cách sử dụng vòng lặp while & do while

  • jQuery
    Cách chọn các phần tử tổ tiên trong jQuery

    Cách chọn các phần tử tổ tiên trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Xóa phần tử HTML trong jQuery

    Xóa phần tử HTML trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Hàm Callback trong jQuery

    Hàm Callback trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

  • Mysql
    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Danh sách các hàm trong MySQL

    Danh sách các hàm trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

  • PHP
    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp while & do while trong PHP

    Vòng lặp while & do while trong PHP

    Lệnh switch case trong PHP

    Lệnh switch case trong PHP

    Lệnh điều kiện if ... else trong PHP

    Lệnh điều kiện if … else trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

  • Phần Mềm
    • Đồ Họa
    • Kỹ Thuật
    • Văn Phòng
No Result
View All Result
  • Home
  • HTML
    Các ký tự thực thể trong HTML

    Các ký tự thực thể trong HTML

    Cách chèn Plug-in vào trang web HTML

    Cách chèn Plug-in vào trang web HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách chèn video trên Youtube vào trang web

    Cách chèn video trên Youtube vào trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn video vào trang web

    Cách chèn một đoạn video vào trang web

    Cách tạo một cái bản đồ ảnh trong HTML

    Cách tạo một cái bản đồ ảnh trong HTML

  • CSS
    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách thức định dạng cho một cái liên kết (Link)

    Cách thức định dạng cho một cái liên kết (Link)

    Chức năng & cách sử dụng thuộc tính transition

    Chức năng & cách sử dụng thuộc tính transition

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

  • JavaScript
    Từ dành riêng (Reserved Words) trong JavaScript

    Từ dành riêng (Reserved Words) trong JavaScript

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Khuôn khổ trình bày mã lệnh JavaScript

    Khuôn khổ trình bày mã lệnh JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Thuật ngữ "Hoisting" trong JavaScript

    Thuật ngữ “Hoisting” trong JavaScript

    Cách tìm và sửa những câu lệnh bị lỗi

    Cách tìm và sửa những câu lệnh bị lỗi

    Các lệnh xử lý lỗi trong JavaScript

    Các lệnh xử lý lỗi trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Cách sử dụng vòng lặp while & do while

    Cách sử dụng vòng lặp while & do while

  • jQuery
    Cách chọn các phần tử tổ tiên trong jQuery

    Cách chọn các phần tử tổ tiên trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Xóa phần tử HTML trong jQuery

    Xóa phần tử HTML trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Hàm Callback trong jQuery

    Hàm Callback trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

  • Mysql
    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Danh sách các hàm trong MySQL

    Danh sách các hàm trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

  • PHP
    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp while & do while trong PHP

    Vòng lặp while & do while trong PHP

    Lệnh switch case trong PHP

    Lệnh switch case trong PHP

    Lệnh điều kiện if ... else trong PHP

    Lệnh điều kiện if … else trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

  • Phần Mềm
    • Đồ Họa
    • Kỹ Thuật
    • Văn Phòng
No Result
View All Result
IZWEBZ – Blog học lập trình, thiết kế web cơ bản & chuyên sâu
No Result
View All Result
Home CSS

Xác định bộ chọn dựa theo quan hệ huyết thống

Demon Warlock by Demon Warlock
Xác định bộ chọn dựa theo quan hệ huyết thống
Share on FacebookShare on Twitter

– Trong Bài 05 thì tôi đã có hướng dẫn các bạn cách xác định bộ chọn của một phần tử rồi. Tuy nhiên, những cách đó chỉ phù hợp với các trường hợp đơn giản, còn đối với các trường hợp phức tạp hơn thì nó không thể nào xác định được chính xác bộ chọn của phần tử.

Ví dụ:

– Trong đoạn mã bên dưới, chúng ta có hai phần tử <h1> tương đối giống nhau, hai phần tử này đều có một số đặc điểm chung như: tên thẻ, class, thuộc tính, giá trị thuộc tính, . . . .

<div class="html">
    <h1 class="content" title="hello">Tài liệu học HTML</h1>
</div>
<div class="css">
    <h1 class="content" title="hello">Tài liệu học CSS</h1>
</div>

– Khi tôi muốn thiết lập nền màu hồng cho phần tử <h1> thứ nhất (Tài liệu học HTML) thì công việc đầu tiên mà tôi cần phải làm đó chính là xác định bộ chọn của nó, tôi áp dụng kiến thức Bài 05 để xác định tất cả các bộ chọn có thể & đã xác định được 31 bộ chọn như bên dưới:

h1 .content [title]
h1.content .content[title] [title=”hello”]
h1.content[title] .content[title=”hello”] [title~=”hello”]
h1.content[title=”hello”] .content[title~=”hello”] [title*=”hello”]
h1.content[title~=”hello”] .content[title*=”hello”] [title^=”hello”]
h1.content[title*=”hello”] .content[title^=”hello”] [title$=”hello”]
h1.content[title^=”hello”] .content[title$=”hello”] [title|=”hello”]
h1.content[title$=”hello”] .content[title|=”hello”]
h1.content[title|=”hello”]
h1[title]
h1[title=”hello”]
h1[title~=”hello”]
h1[title*=”hello”]
h1[title^=”hello”]
h1[title$=”hello”]
h1[title|=”hello”]

– Tuy nhiên, trong số 31 bộ chọn này thì không có bộ chọn nào xác định được chính xác phần tử <h1> thứ nhất, bởi vì chúng lấy luôn cả phần tử <h1> thứ hai, khiến cho phần tử <h1> thứ hai bị thiết lập nền màu hồng (trong khi tôi không mong muốn điều đó)

Xem ví dụ

– Từ đây, khi gặp phải trường hợp có nhiều phần tử giống nhau (giống như ví dụ phía trên), nếu chúng ta muốn xác định bộ chọn của một phần tử nào đó trong số chúng thì chúng ta không thể nào chỉ dựa vào kiến thức của Bài 05 được nữa, mà bây giờ chúng ta cần phải kết hợp thêm một phương pháp mới đó chính là dựa vào quan hệ huyết thống của phần tử (Xem ví dụ)

1) Các mối quan hệ huyết thống phổ biến

– Trong CSS, khi nói về quan hệ huyết thống giữa các phần tử thì chúng được chia ra làm bốn loại chính:

  • (1) Mối quan hệ giữa: tổ tiên & con cháu
  • (2) Mối quan hệ giữa: cha & con
  • (3) Mối quan hệ giữa: anh & em
  • (4) Mối quan hệ giữa: anh liền kề & em liền kề

– Dưới đây là bảng mô tả sơ lược về bốn mối quan hệ trên:

tổ tiên & con cháu – A được gọi là tổ tiên của B khi A chứa B.
– B được gọi là con cháu của A khi B nằm bên trong A.
cha & con – A được gọi là cha của B khi A trực tiếp chứa B mà không thông qua bất kỳ một phần tử nào khác.
– B được gọi là con của A khi B nằm trực tiếp bên trong A mà không thông qua bất kỳ một phần tử nào khác.
anh & em – A được gọi là anh của B khi A & B có cùng cha (A phải khai báo trước B)
– B được gọi là em của A khi B & A có cùng cha (B phải khai báo sau A)
anh liền kề & em liền kề – A được gọi là anh liền kề của B khi A là anh của B.

(ngoài ra thì A còn phải là người anh nằm gần với B nhất)

– B được gọi là em liền kề của A khi B là em của A.

(ngoài ra thì B còn phải là người em nằm gần với A nhất)

  • Mối quan hệ giữa cha & con cũng được xem là mối quan hệ giữa tổ tiên & con cháu
  • Mối quan hệ giữa anh liền kề & em liền kề cũng được xem là mối quan hệ giữa anh & em

– Để giúp các bạn dễ hình dung hơn về bốn mối quan hệ trên thì tôi có một cái ví dụ minh họa như sau:

Ví dụ:

– Tôi có một đoạn mã như bên dưới.

<html>
<body>
    <h1>Tài liệu học <u>Lập Trình Web</u> từ cơ bản đếng nâng cao</h1>
    <div>
        <h3>Tài liệu học HTML</h3>
        <p>Tài liệu học CSS</p>
    </div>
    <h4>Tài liệu học JavaScript</h4>
</body>
</html>

– Từ đoạn mã trên, tôi xây dựng được một cái cây gia phả như sau.

HTML
BODY
H1
DIV
H4
U
H3
P

– Dựa vào cây gia phả, tôi lập được một cái bảng mô tả mối quan hệ huyết thống giữa các phần tử:

<html>
  • là cha của: <body>
  • là tổ tiên của: <body>, <h1>, <div>, <h4>, <u>, <h3>, <p>
<body>
  • là con của: <html>
  • là con cháu của: <html>
  • là cha của: <h1>, <div>, <h4>
  • là tổ tiên của của: <h1>, <div>, <h4>, <u>, <h3>, <p>
<h1>
  • là con của: <body>
  • là con cháu của: <body>, <html>
  • là cha của: <u>
  • là tổ tiên của: <u>
  • là anh của: <div>, <h4>
  • là anh liền kề của: <div>
<div>
  • là con của: <body>
  • là con cháu của: <body>, <html>
  • là cha của: <h3>, <p>
  • là tổ tiên của: <h3>, <p>
  • là anh của: <h4>
  • là anh liền kề của: <h4>
  • là em của: <h1>
  • là em liền kề của: <h1>
<h4>
  • là con của: <body>
  • là con cháu của: <body>, <html>
  • là em của: <div>, <h1>
  • là em liền kề của: <div>
<u>
  • là con của: <h1>
  • là con cháu của: <h1>, <body>, <html>
<h3>
  • là con của: <div>
  • là con cháu của: <div>, <body>, <html>
  • là anh của: <p>
  • là anh liền kề của: <p>
<p>
  • là con của: <div>
  • là con cháu của: <div>, <body>, <html>
  • là em của: <h3>
  • là em liền kề của: <h3>

2) Xác định bộ chọn của phần tử dựa theo quan hệ huyết thống

– Để xác định bộ chọn của một phần tử nào đó dựa vào các mối quan hệ huyết thống của nó thì chúng ta có bốn loại cú pháp như sau:

element1 element2 – Chọn phần tử element2

(với điều kiện phần tử element2 phải là con cháu của phần tử element1)

element1 > element2 – Chọn phần tử element2

(với điều kiện phần tử element2 phải là con của phần tử element1)

element1 ~ element2 – Chọn phần tử element2

(với điều kiện phần tử element2 phải là em của phần tử element1)

element1 + element2 – Chọn phần tử element2

(với điều kiện phần tử element2 phải là em liền kề của phần tử element1)

– Dưới đây là một số ví dụ:

.html h1 – Chọn phần tử <h1>

➩ với điều kiện nó phải là con cháu của phần tử có class là html

Xem ví dụ
div > u.test – Chọn phần tử <u> có class là test

➩ với điều kiện nó phải là con của phần tử <div>

Xem ví dụ
h1.css ~ p – Chọn phần tử <p>

➩ với điều kiện nó phải là em của phần tử <h1> có class là css

Xem ví dụ
h1 + p – Chọn phần tử <p>

➩ với điều kiện nó phải là em liền kề của phần tử <h1>

Xem ví dụ
.html * – Chọn tất cả các phần tử con cháu của phần tử có class là html Xem ví dụ
.html > * – Chọn tất cả các phần tử con của phần tử có class là html Xem ví dụ
h1 ~ * – Chọn tất cả các phần tử là em của phần tử <h1> Xem ví dụ
h1 + * – Chọn phần tử là em liền kề của phần tử <h1> Xem ví dụ
h1 ~ p > u – Chọn phần tử <u>

➩ với điều kiện nó phải là con của phần tử <p>

➩ và phần tử <p> phải là em của phần tử <h1>

Xem ví dụ
.test01 h1 ~ p – Chọn phần tử <p>

➩ với điều kiện nó phải là em của phần tử <h1>

➩ và phần tử <h1> phải là con cháu của phần tử có class là test01

Xem ví dụ
Demon Warlock

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

Next Post
Cách xác định bộ chọn trong các trường hợp đặc biệt

Cách xác định bộ chọn trong các trường hợp đặc biệt

Blog học lập trình, thiết kế web từ cơ bản đến nâng cao cho người bắt đầu. Ngoài ra, còn chia sẻ các tài nguyên như: theme, plugin và game.

Follow Us

Chuyên mục

  • CSS
  • Đồ Họa
  • HTML
  • JavaScript
  • jQuery
  • Kỹ Thuật
  • Mysql
  • Phần Mềm
  • PHP
  • Văn Phòng

Recent News

Download Office 2016

Download Office 2016 – Hướng Dẫn Cài Đặt Chi Tiết

22 Tháng Mười Một, 2022
Download Office 2010 Professional – Hướng Dẫn Cài Đặt Chi Tiết

Download Office 2010 Professional – Hướng Dẫn Cài Đặt Chi Tiết

22 Tháng Mười Một, 2022
  • FAQs
  • Bản quyền
  • Tác Giả

© 2022 izwebz - Blog học lập trình, thiết kế web chuyên sâu

No Result
View All Result
  • Bản quyền
  • Chính sách bảo mật
  • Download Adobe Lightroom Classic CC 2020 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Adobe Photoshop CS6 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Adobe Premiere Pro CC 2020 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Internet Download Manager Full 2022
  • Download Photoshop 2019 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download ProShow Gold 9.0 Và Hướng Dẫn Cài Đặt
  • Download Proshow Producer 9 – Hướng Dẫn Cài Đặt
  • FAQs
  • Home 1
  • Liên hệ
  • Tác Giả

© 2022 izwebz - Blog học lập trình, thiết kế web chuyên sâu