tritue.edu.vn

Thiết lập bộ chọn là tổ hợp các phần tử có quan hệ với nhau

a) Quan hệ con cháu: E F

Áp dụng cho các phần tử F nếu F là con/cháu của E trong cây HTML (xem lại sơ đồ cây mô tả các phần tử html trong 1 trang web)

VD: div p{color: blue;} => áp dụng chữ màu xanh cho các phần tử p (p là con của div)

b) Quan hệ cha con trực tiếp: E>F

Áp dụng cho F, nếu F là con của E.

VD: p > em{color: red;} => áp dụng chữ màu đỏ cho phần tử em (con của p)

c) Quan hệ anh em liền kề: E + F

Áp dụng cho F nếu F liền ngay sau E và F có cùng cha với E.

VD: em + strong{color: red;} => áp dụng chữ màu đỏ cho strong nếu strong đứng liền ngay sau em

d) Quan hệ anh em không liền kề: E ~ F

Áp dụng cho F đứng sau E, nhưng F không cần liên tục với E; E và F có dùng cha.

VD: em ~ strong{color: red;}

Code minh họa css E F (con cháu)

Copy

         <!DOCTYPE html>

<html>

   <head>

      <style>        

         div {color: #ff0000; font-size: 50pt;}

         div p{ font-size: 30pt;}

         div p strong{font-size: 10pt;}        

      </style>

   </head>

   <body>

      <h3>THIẾT LẬP CSS CHO CÁC PHẦN TỬ CÓ MỐI QUAN HỆ VỚI NHAU</h3>

      <div>Ông

         <p>Bố</p>        

         <p><strong>Cháu nội</strong></p>

         <strong>Cháu họ</strong>

      </div>

   </body>

</html>

Code minh họa css E>F (cha con trực tiếp)

Copy

         <!DOCTYPE html>

<html>

   <head>

      <style>        

         p{font-weight: bold; color: #ff0000;}

         p > em{color: #ff00ff;}

         em ~ strong{color: blue;}        

      </style>

   </head>

   <body>

      <h3>THIẾT LẬP CSS CHO CÁC PHẦN TỬ CÓ MỐI QUAN HỆ VỚI NHAU</h3>

      <p>

         Bố

         <em>con cả</em>

         <span><em>con nuôi</em></span>

      </p>

   </body>

</html>

Code minh họa css E+F

Copy

         <!DOCTYPE html>

<html>

   <head>

      <style>        

         p{font-weight: bold; color: #ff0000;}

         p > em{color: #ff00ff;}

         em + strong{color: blue;}        

      </style>

   </head>

   <body>

      <h3>THIẾT LẬP CSS CHO CÁC PHẦN TỬ CÓ MỐI QUAN HỆ VỚI NHAU</h3>

      <p>

         Bố

         <em>con cả</em>

         <strong>con thứ 2</strong>

         <strong>con thứ 3</strong>

      </p>

   </body>

</html>

Code minh họa CSS E~F

Copy

         <!DOCTYPE html>

<html>

   <head>

      <style>        

         p{font-weight: bold; color: #ff0000;}

         p > em{color: #ff00ff;}

         em ~ strong{color: blue;}        

      </style>

   </head>

   <body>

      <h3>THIẾT LẬP CSS CHO CÁC PHẦN TỬ CÓ MỐI QUAN HỆ VỚI NHAU</h3>

      <p>

         Bố

         <em>con cả</em>

         <strong>con thứ 2</strong>

         <strong>con thứ 3</strong>

      </p>

   </body>

</html>

CSS minh hoạ về mối quan hệ E F (con cháu trong html)

Copy

         <!DOCTYPE html>

 

<html>

 

   <head>

 

      <style>        

         body{color:#ff0000; font-size: 16pt;}

         body div{font-size: 14pt;}

         body div p{font-size: 12t;}

         body div p em{font-size: 8pt;}

         div>h1{background-color: blanchedalmond; color:blue;}

         h1 p{font-style: italic;}

      </style>

 

   </head>

   <body>

      Cụ

      <div>Ông</div>

      <div><p>Bố</p></div>

      <div><p><em>Con</em></p></div>

      <div><h1>Cha con trực tiếp</h1></div>

      <h1>Anh em họ: anh con bác</h1>

      <p>em con cô</p>

 

   </body>

 

</html>

Link chia sẻ bài viết

Copy

            https://tritue.edu.vn/tuecode/tracnghiem30/index.php/baiviet/post/view/id/218?id=218