Hướng dẫn css color select - chọn màu css

Hướng dẫn css color select - chọn màu css

Đã đăng vào thg 1 23, 2019 2:08 SA 3 phút đọc 3 phút đọc

Việc tạo style cho select sao cho đồng đều trên các trình duyệt là một việc khá khó khăn. Có rất nhiều cách để giải quyết, như style cho phần tử parent, add thêm pseudo-elements và thậm chí sử dụng cả Javascript để dựng một select - kiểm soát các yếu tố khác nhau để dễ style hơn. Nhưng hầu như các cách giải quyết trên rất khó để dùng và duy trì, chưa kể việc còn các yếu tố phần tử bên ngoài khác tác động đến.

1. Ví dụ

Dưới đây là các kiểu select css đơn lập mà không dùng đến các phần tử bọc ngoài hay sử dụng pseudo-elements (ngoại trừ select dành cho IE10+). Các ví dụ có thể xem trong link demo này.

2. Code

Dưới đây là HTML và CSS tham khảo:


.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}

3. Lưu ý cho phần CSS

  • Select đang được set mặc định là display: block, tuy nhiên cũng có thể sử dụng display: inline-block; width: auto; nếu muốn đặt cạnh thẻ label.
  • Background của select bao gồm hai background-image: đầu tiên là svg icon arrow và phần linear gardient. Có thể thay đổi link Url trong phần background-image nếu muốn. Nếu định thay đổi icon image, hãy chú ý hai phần là background-position và background-size. Nếu kích thước hay đổi, có thể sẽ phải thêm padding right cho phần button arrow để nó không đè lên phần select text, nhưng hãy lưu ý là từ IE9 trở lên, phần custom arrow sẽ không xuất hiện và chỉ có phần arrow mặc định của trình duyệt sẽ hiển thị ở phần padding left, vì thế đừng add thêm padding cho phần arrow trên IE9, nếu không sẽ bị lỗi.
  • Phần linear gradient background khá quan trọng, sẽ giúp ích rất nhiều cho việc hiển thị trên IE, có thể chỉnh lại color của linear gradient nếu muốn dùng color đơn sắc.
  • font-size: 16px; - Mục này cũng khá quan trọng vì iOS Safari sẽ zoom-in site layout nếu select text nhỏ hơn 16px. Để tránh bị như vậy, nên set để mặc định tuỳ chọn này.
  • Nếu set background-color thì cũng có thể khiến các thành phần tuỳ chọn khác bị kế thừa theo, nên tránh set background-color.
  • Ta có:
.select-css::-ms-expand 

Dùng rule này trên IE10 và IE11 có thể ẩn được phần arrow mặc định và dùng được phần arrow đã được custom lại.

4. Hiển thị trên các trình duyệt

Và đây là kết quả. Trong một số trình duyệt như IE9 và các phiên bản IE cũ hơn, icon design có vẻ không được đẹp lắm những vẫn có thể sử dụng và đủ ổn để đáp ứng cho các mục đích cơ bản.

Hướng dẫn css color select - chọn màu css

Link bài viết tham khảo tại đây

All rights reserved

Biết cách sử dụng các Bộ chọn CSS (hay còn gọi là CSS Selector) là một kỹ năng bắt buộc của lập trình viên front end.Bộ chọn CSS (hay còn gọi là CSS Selector) là một kỹ năng bắt buộc của lập trình viên front end.

CSS Selector là gì?

Hướng dẫn css color select - chọn màu css

CSS Selector là gì?

Hiểu đơn giản CSS Selector là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng.CSS Selector là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng.

CSS Selector giống như là đường đẫn, chỉ định để cho CSS biết bạn đang muốn điều chỉnh, tạo kiểu cho phần tử HTML nào vậy.

Hướng dẫn css color select - chọn màu css

Đây là file HTML và file CSS. Và bạn sẽ viết CSS để điều chỉnh, tạo kiểu cho phần tử HTML.

Hướng dẫn css color select - chọn màu css

CSS Selector trong file CSS


 

Qua bài viết này, bạn sẽ được tìm hiểu về 8 Loại CSS Selector phổ biến nhất.8 Loại CSS Selector phổ biến nhất.

Chỉ với 8 Bộ chọn CSS này mình tin rằng bạn còn biết nhiều hơn một lập trình viên Frontend chuyên nghiệp.8 Bộ chọn CSS này mình tin rằng bạn còn biết nhiều hơn một lập trình viên Frontend chuyên nghiệp.

Tại sao bạn cần biết 8 CSS Selector này?

Hướng dẫn css color select - chọn màu css

8 Loại CSS Selector Phổ biến nhất

Mặc dù có rất nhiều CSS Selector khác, nhưng mình thấy chúng thiếu tổ chức, thiếu ví dụ hoặc có quá nhiều thông tin.

Đó là lý do tại sao mình nhóm CSS Selector này thành 8 loại chung.

Khi bắt đầu tìm hiểu về mỗi nhóm, bạn sẽ thấy có một đoạn mã HTML.

Hãy sử dụng đoạn mã HTML đấy để thử nghiệm loại CSS Selector được giới thiệu trong nhóm.

Lưu ý: Danh sách này không đầy đủ và nó còn tiếp tục được update.

Nhưng về cơ bản, nó sẽ đáp ứng hầu hết các nhu cầu sử dụng CSS Selector của bạn.

Mục lục:

  • 1. Basic CSS Selectors
  • 2. Descendant CSS Selectors
  • 3. Multiple CSS Selector
  • 4. Combination CSS Selectors
  • 5. Sibling CSS Selectors
  • 6. Pseudo CSS Selectors
  • 7. Pseudo CSS Selectors (link và input)
  • 8. Attribute CSS Selectors

1. Basic CSS Selector

Bộ chọn CSS cơ bản (Basic CSS Selector) sử dụng chọn element / class / id. (Basic CSS Selector) sử dụng chọn element / class / id.

Chúng được sử dụng thường xuyên nhất và dễ nhớ nhất.

... Như đã nói từ trước, đây là code HTML sử dụng để cho bạn chơi với Basic CSS Selector.

Code HTML:

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
  • Element Selector:
    .hello {
      color: red;
    }
    1. Nó chọn bất kỳ phần tử nào đó.
p { color: blue; }
div { color: magenta; }
  • Class Selector:
    .hello {
      color: red;
    }
    2. Nó chọn tất cả các phần tử có
    .hello {
      color: red;
    }
    3 đã cho.
.hello {
  color: red;
}
  • ID Selector:
    .hello {
      color: red;
    }
    4. Nó chọn tất cả các phần tử có 
    .hello {
      color: red;
    }
    5 đã cho.
#app {
  color: red;
}
  • Universal selector:
    .hello {
      color: red;
    }
    6. Nó chọn tất cả các phần tử.

* {
  color: yellow;
}

> Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé.Lưu ý: Trước khi chuyển sang phần tiếp theo. Hãy nhớ là thực hành sử dụng các CSS Selector đã được giới thiệu để thử nghiệm với mã HTML ở trên xem có thành công không bạn nhé.

Và CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor (bên dưới đây) và dùng nó để vượt qua 32 Level này nhé.CSS Dinner là một trò rất thú vị để bạn luyện tập sử dụng CSS Selector. Vừa học lý thuyết về các Selctor (bên dưới đây) và dùng nó để vượt qua 32 Level này nhé.

Học CSS Selector qua Game CSS Dinner

2. Descendant CSS Selector

Đây là các CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.CSS Selector để chọn hậu duệ của bất kỳ phần tử nào.

Code HTML:

 class="container">
   class="paragraph-container">
     id="hola-id" class="hola-class">Hola World

class="hello-class">Hello World

class="hello-class again-class">Hello Again World

  • Any descendant selector:
    .hello {
      color: red;
    }
    7. Chọn bất kỳ phần tử B nào là hậu duệ của A. Hậu duệ có thể được lồng rất sâu.
.container .hello-class {
  color: red;
}
Chúng ta có thể kết hợp với
.hello {
  color: red;
}
6 để chọn tất cả các phần tử hậu duệ:

Chúng ta có thể kết hợp với

.hello {
  color: red;
}
6 để chọn tất cả các phần tử hậu duệ:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
0

CSS Selector trên chọn mọi phần tử bên trong

.hello {
  color: red;
}
9

Child Selector:

#app {
  color: red;
}
0. Không giống như Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếp.

Thử nghiệm với CSS như sau để xem kết quả nhé:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
1

Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class

#app {
  color: red;
}
1 trong HTML này không phải là hậu duệ trực tiếp.

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
2

3.  Multiple CSS Selector

Multiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau. cho phép chúng ta chọn nhiều phần tử không liên quan với nhau.

Code HTML:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
3
  • Multiple CSS Selector:
    #app {
      color: red;
    }
    2 . Để chọn nhiều phần tử / class / id.
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
4

4. Combination CSS Selector

Conbination CSS Selector cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu. cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu.

Trường hợp sử dụng phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột (hovered) / nhấp (clicked) bằng cách cung cấp cho chúng một class

#app {
  color: red;
}
3.

Code HTML:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
5
  • Any descendant selector:
    .hello {
      color: red;
    }
    7. Chọn bất kỳ phần tử B nào là hậu duệ của A. Hậu duệ có thể được lồng rất sâu.

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
6

.container .hello-class {
  color: red;
}
Chúng ta có thể kết hợp với
.hello {
  color: red;
}
6 để chọn tất cả các phần tử hậu duệ:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
7

CSS Selector trên chọn mọi phần tử bên trong .hello { color: red; }9

Child Selector:

#app {
  color: red;
}
0. Không giống như Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếp. nhắm chọn các phần tử anh chị em.

Code HTML:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
3
  • Any descendant selector:
    .hello {
      color: red;
    }
    7. Chọn bất kỳ phần tử B nào là hậu duệ của A. Hậu duệ có thể được lồng rất sâu.
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
9

.container .hello-class {
  color: red;
}
Chúng ta có thể kết hợp với
.hello {
  color: red;
}
6 để chọn tất cả các phần tử hậu duệ:

.select-css::-ms-expand 
0
  • CSS Selector trên chọn mọi phần tử bên trong
    .hello {
      color: red;
    }
    9
.select-css::-ms-expand 
1

Child Selector:

#app {
  color: red;
}
0. Không giống như Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếp.

Thử nghiệm với CSS như sau để xem kết quả nhé:

Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class

#app {
  color: red;
}
1 trong HTML này không phải là hậu duệ trực tiếp.

.select-css::-ms-expand 
2

3.  Multiple CSS Selector

Code HTML:

.select-css::-ms-expand 
3
  • Multiple CSS Selector:
    #app {
      color: red;
    }
    2 . Để chọn nhiều phần tử / class / id.

.select-css::-ms-expand 
4

4. Combination CSS Selector

.select-css::-ms-expand 
5

Conbination CSS Selector cho phép bạn chọn thành phần rất cụ thể bằng nhiều tham chiếu.

Trường hợp sử dụng phổ biến nhất là hiệu ứng làm nổi bật button khi được di chuột (hovered) / nhấp (clicked) bằng cách cung cấp cho chúng một class

#app {
  color: red;
}
3.

Combination CSS Selector:

#app {
  color: red;
}
4. Cho phép chọn phần tử chứa cả A và B. Cú pháp trông giống như Descendant CSS Selector, ngoại trừ phần này không có khoảng trắng.

.select-css::-ms-expand 
6
  • Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có class. (Nhớ là để chúng sát với nhau)

.select-css::-ms-expand 
7
  • 5. Sibling CSS Selector
.select-css::-ms-expand 
8

Sibling CSS Selector nhắm chọn các phần tử anh chị em.

Bộ chọn Anh / Chị / Em liền kề (Nghiêm ngặt):

#app {
  color: red;
}
5. Nhắm mục tiêu một phần tử anh chị em được đặt ngay sau phần tử đó.

  • Lưu ý rằng CSS bên dưới sẽ không hoạt động vì class
    #app {
      color: red;
    }
    6, mặc dù đó là anh chị em của
    #app {
      color: red;
    }
    7, nhưng nó cách
    #app {
      color: red;
    }
    7 2 phần tử.
.select-css::-ms-expand 
9

Bộ chọn Anh / Chị / Em liền kề (Không nghiêm ngặt):

#app {
  color: red;
}
9. Giống như bộ chọn bên trên nhưng không giới hạn 1 phần tử đầu tiên.

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
0

Bạn thấy không, nó chọn cả thẻ

* {
  color: yellow;
}
0 bên dưới vì chúng là phần tử anh chị em với nhau và có class là
#app {
  color: red;
}
1

  • Lưu ý: Bộ chọn này không hoạt động ngược lại.
Thế nên CSS bên dưới không hoạt động.
  • 6. Pesudo CSS Selector
 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
2
  • Chọn phần tử đầu tiên:
    * {
      color: yellow;
    }
    2. Nó chọn đến phần tử con đầu tiên. (
    * {
      color: yellow;
    }
    3 phải có cha mẹ).

Bạn đoán thử xem. Nhắm mục tiêu

* {
  color: yellow;
}
4 có thành công không?

Chẳng có gì xảy ra.

Điều này là do mặc dù

* {
  color: yellow;
}
5 có cha mẹ (div với class
* {
  color: yellow;
}
6), nhưng
* {
  color: yellow;
}
5 không phải là con đầu tiên (nó là con thứ 3).

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
3

CSS dưới đây sẽ hoạt động vì

.hello {
  color: red;
}
9 là con đầu tiên của
* {
  color: yellow;
}
6.

Chọn phần tử con cuối cùng: A:last-child. Hoạt động như

* {
  color: yellow;
}
2, ngoại trừ thay vì chọn phần tử con đầu tiên, nó chọn phần tử con cuối cùng.

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
4

Chỉ chọn phần tử con: A:only-child. Chọn tất cả A là con duy nhất của cha mẹ nó. Tương tự như bộ chọn phần tử con đầu tiên (

* {
  color: yellow;
}
2) và phần tử con cuối cùng (
 class="container">
   class="paragraph-container">
     id="hola-id" class="hola-class">Hola World

class="hello-class">Hello World

class="hello-class again-class">Hello Again World

2). Ngoại trừ mục tiêu không được có anh chị em nào.

Lưu ý mặc dù chúng ta có một số phần tử

* {
  color: yellow;
}
0, chỉ phần tử cuối cùng được áp dụng vì các phần tử
* {
  color: yellow;
}
0 khác không phải là phần tử con duy nhất của cha mẹ chúng.

Nói cách khác, phần tử con có anh chị em thì không được áp dụng.

  • Bộ chọn phần tử con thứ N:
     class="container">
       class="paragraph-container">
         id="hola-id" class="hola-class">Hola World

    class="hello-class">Hello World

    class="hello-class again-class">Hello Again World

    5. Nó chọn từng mục tiêu là con thứ
     class="container">
       class="paragraph-container">
         id="hola-id" class="hola-class">Hola World

    class="hello-class">Hello World

    class="hello-class again-class">Hello Again World

    6 của cha mẹ nó.

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
5
  • Hãy thử với phần tử
    * {
      color: yellow;
    }
    0:
 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
6

Hãy thử với phần tử khác.

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
7

Nếu chúng ta thay đổi nó thành

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
01, thì nó hoạt động giống như
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
02.

Ngoài ra nếu chúng ta thay đổi nó thành

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
03, không có thay đổi gì. Đây là do không có phần tử
* {
  color: yellow;
}
0 thứ 4 trong số các anh chị em.

  • Bộ chọn Only type:
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    05. Chọn phần tử chỉ có loại đó, không có Anh / Chị / Em.

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
8

Chú ý, chúng ta có hai phần tử

* {
  color: yellow;
}
0 đổi màu.

Điều này là do có hai phần tử

* {
  color: yellow;
}
0 này không có Anh / Chị / Em cùng loại.

Dưới đây là danh sách các pesudo selector khác. Chúng thường được liên kết với các liên kết (

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
08) (mặc dù chúng có thể hoạt động với các phần tử không liên kết
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
09).pesudo selector khác. Chúng thường được liên kết với các liên kết (
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
08) (mặc dù chúng có thể hoạt động với các phần tử không liên kết
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
09).

Code HTML:

 id="app">
   class="container">
     class="hello">Hello

class="hola">Hola

class="other"> I am left behind...
9
  • Hover Selector:
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    10. Chọn phần tử được hover. Thường được sử dụng để làm nổi bật các liên kết.

p { color: blue; }
div { color: magenta; }
0

Không chỉ hoạt động với thẻ 

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
08. Bộ chọn này hoạt động với mọi thứ.

p { color: blue; }
div { color: magenta; }
1
  • Focus Selector:
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    12. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    13.

p { color: blue; }
div { color: magenta; }
2
  • Active Selector:
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    14. Chọn phần tử đang có trạng thái active.
p { color: blue; }
div { color: magenta; }
3

Lưu ý khi bạn click vào nó, nền (background) sẽ thay đổi.

  • Link Selector:
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    15. Nó chọn tất cả các link chưa được click.
p { color: blue; }
div { color: magenta; }
4

8. Attribute CSS Selector

Bộ chọn thuộc tính CSS (Attribute CSS Selector) sử dụng để chọn thuộc tính HTML (HTML Attributes). (Attribute CSS Selector) sử dụng để chọn thuộc tính HTML (HTML Attributes).

Code HTML:

p { color: blue; }
div { color: magenta; }
5
  • Hover Selector:
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    10. Chọn phần tử được hover. Thường được sử dụng để làm nổi bật các liên kết.

p { color: blue; }
div { color: magenta; }
6
  • Không chỉ hoạt động với thẻ 
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    08. Bộ chọn này hoạt động với mọi thứ.
Focus Selector:
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
12. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
13.
  • Bộ chọn thuộc tính cụ thể (Bắt đầu với ...):
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    23. Chọn tất cả các phần tử
    * {
      color: yellow;
    }
    3 có thuộc tính
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    18 với giá trị bắt đầu là
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    22. Ký tự
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    27 là ký tự thể hiện chuỗi bắt đầu (trong Biểu thức chính quy (Regex)).
p { color: blue; }
div { color: magenta; }
8
  • Active Selector:
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    14. Chọn phần tử đang có trạng thái active.
    Ký tự 
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    32 là ký tự thể hiện chuỗi kết thúc trong (Biểu thức chính quy (Regex)).
p { color: blue; }
div { color: magenta; }
9
  • Lưu ý khi bạn click vào nó, nền (background) sẽ thay đổi.Chọn tất cả phần tử
    * {
      color: yellow;
    }
    3 với thuộc tính
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    18 chứa giá trị
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    22.
.hello {
  color: red;
}
0

Link Selector:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
15. Nó chọn tất cả các link chưa được click.

8. Attribute CSS Selector


Hướng dẫn css color select - chọn màu css

Bộ chọn thuộc tính CSS (Attribute CSS Selector) sử dụng để chọn thuộc tính HTML (HTML Attributes).

Bộ chọn thuộc tính cơ bản:

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
16. Chọn tất cả các phần tử
* {
  color: yellow;
}
3 có thuộc tính
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}
18.CSS Selector này mình tin rằng đáp ứng đầy đủ cho bạn trong quá trình lập trình web / app.

    Bộ chọn thuộc tính cụ thể:

    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    19. Chọn các phần tử
    * {
      color: yellow;
    }
    3 có thuộc tính
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    18 với giá trị là
    .select-css {
    	display: block;
    	font-size: 16px;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .6em 1.4em .5em .8em;
    	width: 100%;
    	max-width: 100%; 
    	box-sizing: border-box;
    	margin: 0;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
    }
    .select-css::-ms-expand {
    	display: none;
    }
    .select-css:hover {
    	border-color: #888;
    }
    .select-css:focus {
    	border-color: #aaa;
    	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    	box-shadow: 0 0 0 3px -moz-mac-focusring;
    	color: #222; 
    	outline: none;
    }
    .select-css option {
    	font-weight:normal;
    }
    
    22.Nguyên tắc Độ đặc hiệu thấp thì:

    • p { color: blue; }
      div { color: magenta; }
      7 Bộ chọn thuộc tính cụ thể (Bắt đầu với ...):
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      23. Chọn tất cả các phần tử
      * {
        color: yellow;
      }
      3 có thuộc tính
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      18 với giá trị bắt đầu là
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      22. Ký tự
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      27 là ký tự thể hiện chuỗi bắt đầu (trong Biểu thức chính quy (Regex)).
    • Bộ chọn thuộc tính cụ thể (Kết thúc với ...):
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      28. Chọn tất cả các phần tử
      * {
        color: yellow;
      }
      3 có thuộc tính
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      18 với giá trị kết thúc là
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      22. Ký tự 
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      32 là ký tự thể hiện chuỗi kết thúc trong (Biểu thức chính quy (Regex)).BEM để quản lý
    • Bộ chọn thuộc tính cụ thể (Chứ ký tự ...):
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      33. Chọn tất cả phần tử
      * {
        color: yellow;
      }
      3 với thuộc tính
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      18 chứa giá trị
      .select-css {
      	display: block;
      	font-size: 16px;
      	font-family: sans-serif;
      	font-weight: 700;
      	color: #444;
      	line-height: 1.3;
      	padding: .6em 1.4em .5em .8em;
      	width: 100%;
      	max-width: 100%; 
      	box-sizing: border-box;
      	margin: 0;
      	border: 1px solid #aaa;
      	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
      	border-radius: .5em;
      	-moz-appearance: none;
      	-webkit-appearance: none;
      	appearance: none;
      	background-color: #fff;
      	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
      	background-repeat: no-repeat, repeat;
      	background-position: right .7em top 50%, 0 0;
      	background-size: .65em auto, 100%;
      }
      .select-css::-ms-expand {
      	display: none;
      }
      .select-css:hover {
      	border-color: #888;
      }
      .select-css:focus {
      	border-color: #aaa;
      	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
      	box-shadow: 0 0 0 3px -moz-mac-focusring;
      	color: #222; 
      	outline: none;
      }
      .select-css option {
      	font-weight:normal;
      }
      
      22.

    Ok, đến đây, mình rât tiếc phải xin lỗi rằng:

    Bạn đã biết quá nhiều về CSS Selector...CSS Selector là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ.

    Mi đã biết quá nhiều về CSS SelectorChia sẻBookmark lại để đọc kỹ hơn bạn nhé!

    Với 8 Bộ CSS Selector này mình tin rằng đáp ứng đầy đủ cho bạn trong quá trình lập trình web / app.

    Thậm chí, với các nguyên tắc viết CSS mang lại hiệu suất tốt như Nguyên tắc Độ đặc hiệu thấp thì:
    https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

    Nên sử dụng CSS Selector cùng một độ đặc hiệu (như là

    .hello {
      color: red;
    }
    2)

    Và đặt tên class theo nguyên tắc BEM để quản lý

    Các CSS Selector càng sâu, càng cụ thể càng làm giảm hiệu suất.

    Vì thế,

    Bạn chỉ cần hiểu CSS Selector là gì và ghi nhớ một số Bộ chọn CSS phổ biến ở trên là quá đủ.

    Nếu thấy hay thì hãy Chia sẻ và Bookmark lại để đọc kỹ hơn bạn nhé!

    Tham khảo:

    https://www.w3schools.com/cssref/css_selectors.asp https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors