Html & Javascript 30-6-2015
Bộ chọn màu là một trong những chức năng thường xuất hiện trong trình soạn thảo văn bản mà chúng ta sử dụng để soạn thảo bài viết. Hôm nay mình sẽ chia sẻ cho các bạn cách tạo chức năng này với jQuery vài đoạn script và các bạn có thể nâng cao để sử dụng cho trang web hay blog của các bạn
HTML
Các bạn copy đoạn html bên dưới để làm chuẩn cho bảng chọn màu
<div class="color-wrapper"> <p>Choose color (#hex)</p> <input type="text" name="custom_color" placeholder="#ffffff" id="pickcolor" class="call-picker"> <div class="color-holder call-picker"></div> <div class="color-picker" id="color-picker" style="display:none" ></div> </div>CSS
Kế hoạch định dạng bảng màu của bạn với đoạn css sau
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }jQuery
Và đây chính là trái tim của bài viết, các bạn sử dụng đoạn script sau để ứng dụng hoàn tất
var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });Đoạn code trên sử dụng thuật toán rất đơn giản trong việc chọn màu, mình hy vọng là qua bài viết này, các bạn có thể học hỏi thêm được nhiều kinh nghiệm trong việc sử dụng jQuery để tạo ra các hiệu ứng của riêng mình
Trong hướng dẫn này, chúng tôi sẽ tạo Hộp thoại chọn màu bằng cách sử dụng thư viện GitHub được gọi là thư viện AmbilWarna. Thư viện này là một thư viện khá tốt và được đánh giá cao về ứng dụng sử dụng. Vì vậy, đây là hướng dẫn từng bước hoàn chỉnh việc tạo ứng dụng có sử dụng Hộp thoại Bộ chọn Màu
Biết cách sử dụng CSS Selector (hay còn gọi là CSS Selector) là một kỹ năng bắt buộc của thiết lập giao diện người dùng
Bộ chọn CSS là gì?
CSS Selector đơn giản 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
Bộ chọn CSS giống như đường dẫn, chỉ định để 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
Đây là file HTML và file CSS. Và bạn sẽ viết CSS để chỉnh sửa, tạo kiểu cho phần tử HTML
Bộ chọn CSS trong tệp CSS
Qua bài viết này, bạn sẽ được khám phá về 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
Tại sao bạn cần biết 8 CSS Selector này?
8 Type 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ề từng nhóm, bạn sẽ thấy có một đoạn mã HTML
Hãy sử dụng đoạn mã HTML đó để 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ó vẫn tiếp tục được cập nhật
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
lục mục
1. Bộ chọn CSS cơ bản
Bộ chọn CSS cơ bản (Basic CSS Selector) sử dụng chọn phần tử / lớp / 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 dùng để bạn chơi với Basic CSS Selector
Mã HTML
Hello
Hola
I am left behind...
- Bộ chọn phần tử. * { color: yellow; }8. Nó chọn bất kỳ phần tử nào
- Bộ chọn lớp. * {
color: yellow;
}9. Nó chọn tất cả các phần tử có
Hola World
Hello World
Hello Again World
0 đã chọn
- Bộ chọn ID.
Hola World
Hello World
Hello Again World
1. Nó chọn tất cả các phần tử có ______72 đã chọn
- bộ chọn chung.
Hola World
Hello World
Hello Again World
3. Nó chọn tất cả các phần tử
> Lưu ý. Trước khi chuyển sang phần tiếp theo. Hãy nhớ rằng đang thực thi việc sử dụng 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é.
And CSS Dinner là một trò chơi rất thú vị để bạn luyện tập sử dụng CSS Selector. Medium học lý thuyết về Selector (bên dưới đây) và dùng nó để vượt qua 32 Level này nhé
Học CSS Selector qua Game CSS Diner
> Tham khảo ngay các từ khóa học dưới đây để nhanh chóng làm chủ bộ kỹ năng lập trình Web. Học với giảng viên doanh nghiệp. Hỗ trợ công việc làm cuối khóa
2. Bộ chọn CSS hậu duệ
Đây là CSS Selector để chọn phần hậu duệ của bất kỳ phần tử nào
Mã HTML
Hola World
Hello World
Hello Again World
- Bất kỳ bộ chọn con cháu nào.
Hola World
Hello World
Hello Again World
4. 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
Chúng ta có thể kết hợp với
Hola World
Hello World
Hello Again World
3 để chọn tất cả các phần tử hậu duệ.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }8Bộ chọn CSS trên mọi phần tử bên trong được chọn trong
Hola World
Hello World
Hello Again World
6bộ chọn con.
Hola World
Hello World
Hello Again World
7. Không giống với Any Descendant CSS Selector, CSS Selector này chỉ chọn hậu duệ trực tiếpTry test with CSS as after to view results nhé
var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });1Trong khi đó, CSS Selector bên dưới sẽ không hoạt động vì class
Hola World
Hello World
Hello Again World
8 trong HTML này không phải là hậu duệ trực tiếpvar colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });33. Nhiều bộ chọn CSS
Multiple CSS Selector cho phép chúng ta chọn nhiều phần tử không liên quan với nhau
Mã HTML
p { color: blue; } div { color: magenta; }0- Nhiều bộ chọn CSS.
Hola World
Hello World
Hello Again World
9. To select many element / class / id
4. Bộ chọn CSS kết hợp
Bộ chọn CSS kết hợp 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 biến phổ biến nhất là nút hiệu ứng làm nổi bật khi được di chuột (di chuột) / nhấp (nhấp) bằng cách cung cấp cho chúng một lớp .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }60
Mã HTML
p { color: blue; } div { color: magenta; }2- Bộ chọn CSS kết hợp. .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }61. Cho phép chọn phần tử bao gồm 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
Chúng ta có thể kết hợp nhiều thứ, không phải chỉ có lớp. (Nhớ là để chúng ta sát nhau)
p { color: blue; } div { color: magenta; }45. Bộ chọn CSS anh chị em
Sibling CSS Selector nhắm chọn các thành phần anh chị em
Mã HTML
p { color: blue; } div { color: magenta; }0- Bộ chọn Anh/Chị/Em liền kề (Nghiêm cấm). .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }62. 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 .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }63, mặc dù đó là anh chị em của .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }64, nhưng nó cách .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }64 2 phần tử
p { color: blue; } div { color: magenta; }7- Bộ chọn Anh/Chị/Em liền kề (Không nghiêm cấm). .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }66. 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
Bạn thấy không, nó chọn cả thẻ .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 ở bên dưới vì chúng là thành phần anh chị em với nhau và có lớp là
Hola World
Hello World
Hello Again World
8Lưu ý. This selector not active back
The should CSS side not active
p { color: blue; } div { color: magenta; }96. Bộ chọn CSS giả
Mã HTML
.hello { color: red; }0- Select the first section. .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }69. It select to the first element con. (.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }80 phải có cha mẹ)
You try to view. Mục tiêu của .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }81 có thành công không?
.hello { color: red; }2không có gì xảy ra
Điều này được mặc định là dù .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }82 có cha mẹ (div with class .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }83), nhưng .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }82 không phải là con đầu tiên (nó là con thứ 3)
CSS dưới đây sẽ hoạt động vì
Hola World
Hello World
Hello Again World
6 là con đầu tiên của .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }83.hello { color: red; }3- Select the end of the end section. Một. con cuối cùng. Activity as .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }69, NGOẠI LỆ thay vì chọn phần tử con đầu tiên, nó chọn phần tử con cuối cùng
- Chỉ chọn phần tử con. Một. con một. Select all A is con duy nhất của cha mẹ nó. Tương tự như bộ chọn phần tử con đầu tiên (_______169) và phần tử con cuối cùng (.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }89). Tiêu đề ngoại trừ 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-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67, chỉ phần tử cuối cùng được áp dụng vì các phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 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 áp dụng được
- Conction section con thứ N. var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });12. Nó chọn từng mục tiêu là con thứ var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });13 của cha mẹ nó
Please try with the .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 section
.hello { color: red; }7Bạn có thể thấy tại sao hai phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 thay đổi màu sắc?
- The select con last N. var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });16. Nó tương tự như bộ chọn con thứ N, ngoại trừ nó được tính từ cuối cùng
- Không chọn. var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });17. Chọn tất cả các phần tử A mà không phải B
- First select type. var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });18. Nó chọn phần tử đầu tiên thuộc loại này trong số các phần tử của anh chị em của nó
Nghe có vẻ tương tự var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });19 nhỉ?
But not must be
Để cảm nhận sự khác biệt của nó, hãy thử nghịch nó xem sao
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }10Được rồi, đó không phải là một ví dụ hay vì nó cho thấy kết quả tương tự như var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });30 😅
Hãy làm một ví dụ khác
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }11Cái này thì tốt hơn
So sánh với var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });31. Bạn sẽ thấy rằng .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 ở giữa chuyển sang màu đỏ khi sử dụng var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });33
Điều này là do .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 ở giữa là loại phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 đầu tiên trong số các anh chị em của nó
- The last select type. var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });36. Giống như trên, nhưng ngược lại
- Selected type thứ N. var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });37. Cũng giống như hai bộ chọn trên, nhưng nó chọn phần tử thứ N
Please try with other section
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }14Nếu chúng ta thay đổi nó thành var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });38, thì nó hoạt động giống như var colorList = ['000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF']; var picker = $('#color-picker'); for(var i=0; i< colorList.length; i++) { picker.append('<li class="color-item" data-hex="'+ '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>'); } // khi click vao bang mau, no se tu mat $('body').click(function(){ picker.fadeOut(); }); // click de xuat hien bang mau $('.call-picker').click(function(event){ event.stopPropagation(); picker.fadeIn(); picker.children('li').hover(function(){ var codeHex = $(this).data('hex'); $('.color-holder').css('background-color',codeHex); $('#pickcolor').val(codeHex); }); });39
Ngoài ra nếu chúng ta thay đổi nó thành p { color: blue; } div { color: magenta; }00, không có gì thay đổi. Đây là do không có phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 thứ 4 trong số các anh chị em
- Bộ chọn Chỉ loại. p { color: blue; } div { color: magenta; }02. Chọn phần tử chỉ có loại đó, không có Anh/Chị/Em
Chú ý, chúng ta có hai phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 đổi màu
Điều này là do có hai phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }67 đây không có Anh / Chị / Em cùng loại
7. Bộ chọn giả (liên kết và đầu vào)
Dưới đây là danh sách các bộ chọn pesudo khác. Chúng thường được liên kết với các liên kết (p { color: blue; } div { color: magenta; }05) (mặc dù chúng có thể hoạt động với các phần tử không liên kết p { color: blue; } div { color: magenta; }06)
Mã HTML
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }16- Bộ chọn di chuột. p { color: blue; } div { color: magenta; }07. Chọn phần tử được di chuột. Thường được sử dụng để làm nổi các liên kết
Not only active with thẻ p { color: blue; } div { color: magenta; }05. This option active with all second
.color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }18- Bộ chọn lấy nét. p { color: blue; } div { color: magenta; }09. Chọn phần tử bạn đang tập trung vào nó. Thường được sử dụng với p { color: blue; } div { color: magenta; }10
- Bộ chọn hoạt động. p { color: blue; } div { color: magenta; }11. Chọn phần tử đang có trạng thái hoạt động
Lưu ý khi bạn nhấp vào nó, nền (nền) sẽ thay đổi
- Bộ chọn liên kết. p { color: blue; } div { color: magenta; }12. Nó chọn tất cả các liên kết chưa được nhấp
8. Bộ chọn CSS thuộc tính
Bộ chọn thuộc tính CSS (Attribute CSS Selector) được sử dụng để chọn thuộc tính HTML (HTML Attributes)
Mã HTML
* { color: yellow; }2- Cơ bản tùy chọn thuộc tính. p { color: blue; } div { color: magenta; }13. Chọn tất cả các phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }80 có thuộc tính p { color: blue; } div { color: magenta; }15
- The select tool tool. p { color: blue; } div { color: magenta; }16. Chọn các phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }80 có thuộc tính p { color: blue; } div { color: magenta; }15 với giá trị là p { color: blue; } div { color: magenta; }19
- Bộ tùy chọn thuộc tính cụ thể (Bắt đầu với. ). p { color: blue; } div { color: magenta; }20. Chọn tất cả các phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }80 có thuộc tính p { color: blue; } div { color: magenta; }15 với giá trị bắt đầu là p { color: blue; } div { color: magenta; }19. Ký tự p { color: blue; } div { color: magenta; }24 là ký tự có thể hiện chuỗi bắt đầu (trong Biểu thức chính quy (Regex)).
- Bộ tùy chọn thuộc tính cụ thể (Kết thúc với. ). p { color: blue; } div { color: magenta; }25. Chọn tất cả các phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }80 có thuộc tính p { color: blue; } div { color: magenta; }15 với giá trị kết thúc là p { color: blue; } div { color: magenta; }19. Ký tự p { color: blue; } div { color: magenta; }29 là ký tự có thể hiển thị kết thúc chuỗi trong (Biểu thức chính thức (Regex))
- Bộ chọn thuộc tính cụ thể (Chữ ký tự. ). p { color: blue; } div { color: magenta; }30. Chọn tất cả các phần tử .color-wrapper{ position:relative; width:250px; margin:20px auto; } .color-wrapper p{ margin-bottom:5px; } input.call-picker{ border:1px solid #aaa; color:#666; text-transform:uppercase; float:left; outline:none; padding:10px; width:85px; } .color-picker{ width:130px; background:#f3f3f3; height:81px; padding:5px; border:5px solid #fff; box-shadow:0px 0px 3px 1px #ddd; position:absolute; top:61px; left:2px; } .color-holder{ background:#fff; cursor:pointer; border:1px solid #aaa; width:40px; height:36px; float:left; margin-left:5px; } .color-picker .color-item{ cursor:pointer; width:10px; height:10px; list-style-type:none; float:left; margin:2px; border:1px solid #ddd; } .color-picker .color-item:hover{ border:1px solid #666; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=8); }80 với thuộc tính p { color: blue; } div { color: magenta; }15 có chứa giá trị p { color: blue; } div { color: magenta; }19
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
Tôi đã biết quá nhiều về CSS Selector
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ì
- Nên sử dụng Bộ chọn CSS cùng một mức độ đặc hiệu (ví dụ như là * { color: yellow; }9)
- Và đặt tên lớp theo nguyên tắc BEM để quản lý
- Bộ chọn CSS 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 Bộ chọn CSS 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à Đánh dấu lại để đọc kĩ hơn bạn nhé
Tham khảo
https. //www. w3schools. com/cssref/css_selectors. asp
https. //hướng dẫn. freecodecamp. org/css/tutorials/css-selectors-cheat-sheet/
https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/CSS_Selectors
HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI
Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay
Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT. 02435574074 - 0383. 180086
E-mail. xin chào@niithanoi. giáo dục. vn
trang chủ. https. //Facebook. com/NIIT. CNTT-TT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #php #java #python