Selector css chon5 phân tử mà bạn phải biết để làm website

Ngoài các thuộc tính cơ bản như id,class, descendant bạn cần biêt thêm các kiểu vùng chơn khác nâng cao trong css sau.1 số thuộc tính có thể chỉ dùng cho css3 hoặc 1 số trình duyệt version mới hỗ trợ , bạn nên lưu ý.

1. Vùng chọn *
   [crayon] * {
   margin: 0;
   padding: 0;
   }
   [/crayon] Dấu * , sẽ chọn tới tất cả các phần tử trên trang , đều có định dạng css như vậy.Hoặc bạn có thể dùng * chọn tất cả phần từ con trong 1 elements (phần tử html) ví dụ:
   [crayon] #container * {
   border: 1px solid black;
   }
   [/crayon] Nó sẽ chọn tới tất cả phần tử con trong div có id là container.
2. #X
   [crayon]#container {
   width: 960px;
   margin: auto;
   }[/crayon] Dâu # dùng cho việc chọn theo id của phần tử.
3. .X
   [crayon] .error {
   color: red;
   }
   [/crayon] Dùng cho việc chọn theo class.
4. X Y
   [crayon] li a {
   text-decoration: none;
   }
   [/crayon]
5. X + Y
   [crayon] ul + p {
   color: red;
   }
   [/crayon] Đây được gọi là vùng chọn cạnh nhau , ul,p cùng nằm chung 1 id thì nó chọn p đầu tiên dưới ul.Xem demo vùng chọn này tại đây:https://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/adjacent.html
6. X > Y
   [crayon] div#container > ul {
   border: 1px solid black;
   }
   [/crayon] Vùng chọn này sẽ chỉ chọn trực tiếp từ phần tử con đâu tiên ví dụ:
   [crayon]
   • List Item
     • Child
   • List Item
   • List Item
   • List Item
   [/crayon] Nó sẽ chỉ định dạng ul cha ngoài cùng chứ ko định dạng ul trong li .xem demo: https://cdn.tutsplus.com/net/uploads/legacy/840_cssSelectors/selectors/childcombinator.html
7. X ~ Y
   [crayon] ul ~ p {
   color: red;
   }
   [/crayon]
8. X

   Lorem ipsum dolor sit amet...

   [crayon] a

   Lorem ipsum dolor sit amet...

   {
   color: green;
   }
   [/crayon] Định dạng thuộc tính title của phần tử được chọn
9. X[href=”foo”] [crayon] a[href=”http://sonweb.net”] {
   color: #1f6053; /* nettuts green */
   }
   [/crayon]
10. X[href*=”nettuts”]