code.tutsplus.com-30 Bộ chọn CSS bạn phải thuộc lòng

30 Bộ chọn CSS bạn phải thuộc lòng code.tutsplus.com/vi/tutorials/the-30-css-selectors-you-must-memorize net-16048 Jeffrey Way Như vậy, bạn học chọn id , lớp phần tử - sau bạn nghĩ đủ? Nếu vậy, bạn bỏ lỡ cấp độ linh hoạt lớn Mặc dù nhiều chọn đề cập viết phần đặc tả CSS3, và, đó, có sẵn trình duyệt đại, bạn cần phải ghi nhớ chọn sau * *{ margin : padding : ; ; } Hãy tìm hiểu dễ nhận thấy nhất, người bắt đầu, trước di chuyển vào chọn cao cấp Biểu tượng nhắm chọn phần tử trang Nhiều nhà phát triển sử dụng thủ thuật để loại bỏ margin padding Mặc dù công cụ để nhanh chóng kiểm tra, tơi muốn khun bạn đừng sử dụng code sản phẩm cuối Nó thêm q nhiều gánh nặng cho trình duyệt, khơng cần thiết Dấu * sử dụng với chọn #container * { border : } 1px solid black ; Điều chọn phần tử mà div #container Một lần nữa, cố gắng đừng làm dụng kỹ thuật nhiều, không muốn nói đừng Xem demo Tương thích 1/29 IE6+ Firefox Chrome Safari Opera Advertisement #X #container { width : 960px ; margin : auto ; } Gắn vào đằng trước biểu tượng # cho chọn cho phép nhắm chọn id Đây cách sử dụng dễ dàng phổ biến nhất, nhiên thận trọng sử dụng chọn id Hãy tự hỏi mình: Tơi có cần phải áp dụng id cho phần tử để chọn khơng? chọn id cứng nhắc không cho phép tái sử dụng Nếu có thể, trước tiên cố gắng sử dụng tên thẻ, phần tử HTML5 mới, chí lớp giả Xem demo Tương thích IE6+ Firefox Chrome Safari Opera .X error { color : red ; } 2/29 Đây chọn lớp Sự khác id lớp là, với lớp, bạn chọn nhiều phần tử Sử dụng lớp bạn muốn phong cách bạn áp dụng cho nhóm phần tử Ngồi ra, sử dụng id để tìm phần tử nhất, định phong cách cho phần tử cụ thể Xem demo Tương thích IE6+ Firefox Chrome Safari Opera X Y li a { text-decoration : none ; } Bộ chọn nhắc đến nhiều chọn phần tử Khi bạn cần cụ thể với chọn bạn, bạn sử dụng Ví dụ, nếu, thay nhắm chọn tất thẻ liên kết, bạn cần nhắm chọn liên kết mà nằm danh sách có thứ tự? Đặc biệt bạn muốn sử dụng chọn phần tử Mẹo hay - Nếu chọn bạn trông giống X Y Z A B.error , bạn làm sai Hãy ln ln tự hỏi có hồn tồn cần thiết hay khơng áp dụng tất chúng Xem demo Tương thích IE6+ Firefox Chrome Safari Opera X 3/29 a{ color : ul { margin-left : red ; } ;} Điều xảy bạn muốn nhắm chọn tất phần tử trang, theo kiểu chúng, id tên lớp ? Hãy giữ cho đơn giản, sử dụng chọn theo kiểu Nếu bạn cần nhắm chọn tất danh sách khơng có thứ tự, sử dụng ul {} Xem demo Tương thích IE6+ Firefox Chrome Safari Opera X:visited X:link a:link { a:visted { color : red ; } color : purple ; } Chúng ta sử dụng lớp giả :link để nhắm chọn tất thẻ liên kết mà chưa nhấp vào Ngoài ra, có lớp giả :visited , đó, bạn thấy, cho phép áp dụng phong cách cụ thể đến thẻ liên kết trang nhấp vào, truy cập Xem demo Tương thích IE7+ IE7+ Chrome Safari Opera X + Y 4/29 ul + p { color : red ; } Đây gọi chọn liền kề Nó chọn phần tử mà nằm sau phần tử trước Trong trường hợp này, có đoạn văn sau ul có chữ màu đỏ Xem demo Tương thích IE7+ Firefox Chrome Safari Opera X > Y div#container > ul { border : } 1px solid black ; Sự khác biệt X Y tiêu chuẩn X > Y sau chọn phần tử trực tiếp Ví dụ, xem xét mã đánh dấu sau 5/29 01 < div 02 < ul > 03 < li > List Item 04 05 id = "container" > < ul > < li > Child 06 07 < li > List Item 08 < li > List Item 09 10 < li > List Item 11 12 Một chọn #container > ul nhắm chọn ul mà trực tiếp div với id container Nó khơng nhắm chọn, ví dụ, ul mà li Vì lý này, có lợi ích hiệu việc sử dụng kết hợp Trong thực tế, khuyến khuyến sử dụng đặc biệt làm việc với công cụ chọn CSS dựa JavaScript Xem demo Tương thích IE7+ Firefox Chrome Safari Safari X ~ Y 6/29 ul ~ p { color : red ; } Sự kết hợp anh chị em tương tự X + Y , nhiên, nghiêm ngặt Trong chọn liền kề ( ul + p ) chọn phần tử sau đó, tổng qt Nó chọn, lấy ví dụ trên, phần tử p , miễn chúng theo sau ul Xem demo Tương thích IE7+ Firefox Chrome Chrome Opera 10 X[title] a[title] { color : green ; } Được xem chọn thuộc tính, ví dụ trên, điều chọn thẻ liên kết có thuộc tính title Các thẻ liên kết khơng có khơng nhận phong cách đặc biệt Nhưng bạn cần cụ thể sao? À Xem demo Tương thích IE7+ Firefox Chrome Safari Opera 7/29 11 X[href="foo"] a[href= "https://net.tutsplus.com" ] { color : #1f6053 ; /* nettuts green */ } Đoạn code định phong cách cho tất thẻ liên kết liên kết đến https://net.tutsplus.com; chúng nhận màu xanh Tất thẻ liên kết khác không bị ảnh hưởng Lưu ý bao giá trị dấu ngoặc kép Đồng thời nhớ làm điều sử dụng công cụ chọn CSS dựa JavaScript Khi có thể, ln ln sử dụng chọn CSS3 thay phương pháp khơng thức Tuy nhiên, điều hoạt động tốt, cứng nhắc chút Điều xảy liên kết không thực hướng đến Nettuts+, mà, có thể, đường dẫn nettuts.com thay url đầy đủ? Trong trường hợp sử dụng chút biểu thức quy Xem demo Tương thích IE7+ Firefox Chrome Safari Opera 12 X[href*="nettuts"] a[href*= "tuts" ] { color : */ #1f6053 ; /* nettuts green } Bạn thấy đó; mà cần Cái ngơi định giá trị phía sau phải xuất giá trị thuộc tính Bằng cách đó, bao hàm nettuts.com, net.tutsplus.com, chí tutsplus.com 8/29 Hãy nhớ chọn rộng Điều xảy thẻ liên kết liên kết đến số trang web Envato với chuỗi tuts url? Khi bạn cần cụ thể hơn, sử dụng ^ $ , để tham chiếu bắt đầu kết thúc chuỗi, tương ứng Xem demo Tương thích IE7+ Firefox Chrome Safari Opera 13 X[href^="http"] a[href^= "http" ] { background : url (path/to/external/ icon png) padding-left : 10px ; no-repeat ; } Có tự hỏi làm số trang web hiển thị biểu tượng nhỏ bên cạnh liên kết mà liên kết bên ngồi? Tơi bạn nhìn thấy trước đây; chúng nhắc khéo liên kết dẫn bạn tới trang web hoàn toàn khác Đây biểu thức với biểu tượng dấu mũ Nó thường sử dụng nhiều biểu thức quy để chuỗi bắt đầu chuỗi Nếu muốn nhắm chọn tất thẻ liên kết có href bắt đầu http , sử dụng chọn tương tự đoạn code Lưu ý khơng tìm kiếm https:// ; điều khơng cần thiết, khơng tính url mà bắt đầu https:// Bây giờ, muốn thay phong cách cho tất thẻ liên kết mà liên kết tới, ví dụ, ảnh nhỉ? Trong trường hợp đó, tìm kiếm phần cuối chuỗi Xem demo Tương thích 9/29 IE7+ Firefox Chrome Safari Opera 14 X[href$=".jpg"] a[href$= ".jpg" ] { color : red ; } Một lần nữa, sử dụng biểu tượng biểu thức quy, $ , để tham chiếu đến phần cuối chuỗi Trong trường hợp này, tìm kiếm tất liên kết mà liên kết đến hình ảnh - url kết thúc jpg Hãy nhớ điều chắn không làm việc cho gif png Xem demo Compatibility IE7+ Firefox Chrome Safari Opera 15 X[data-*="foo"] a[data-filetype= "image" ] { color : red ; } Xem lại phần số tám; làm để bù vào tất kiểu hình ảnh khác: png , jpeg , jpg , gif ? Vâng, tạo nhiều chọn, chẳng hạn như: 10/29 Theo đặc điểm kỹ thuật chọn CSS3, mặt kỹ thuật bạn nên sử dụng cú pháp phần tử giả với dấu hai dấu hai chấm :: Tuy nhiên, để trì tương thích, useragent chấp nhận cách sử dụng dấu hai chấm Trong thực tế, vào thời điểm này, tốt nên sử dụng phiên dấu hai chấm dự án bạn Tương thích IE8+ Firefox Chrome Safari Opera 19 X:hover div:hover { background : #e3e3e3 ; } Thôi Bạn biết Thuật ngữ thức cho việc lớp người dùng tương tác giả Nghe khó hiểu, thực khơng có khó hiểu Bạn muốn áp dụng phong cách cụ thể người dùng di chuyển chuột qua phần tử phải khơng? Nó giúp bạn hồn thành cơng việc! Hãy nhớ phiên cũ Internet Explorer không phản hồi lớp giả :hover áp dụng cho thứ khác ngồi thẻ liên kết Bạn thường xuyên sử dụng chọn áp dụng, ví dụ, border-bottom vào thẻ liên kết, di chuyển chuột qua a:hover { border-bottom : } 1px solid black ; Mẹo hay - border-bottom: 1px solid black; trông tốt so với text-decoration: underline ; Tương thích 15/29 IE6 + (Trong IE6, :hover phải áp dụng cho phần tử liên kết) Firefox Chrome Safari Opera 20 X:not(selector) div:not(#container) { color : blue ; } Lớp giả phủ định đặc biệt hữu ích Giả sử tơi muốn chọn tất thẻ div, ngoại trừ có id container Đoạn code xử lý nhiệm vụ cách hồn hảo Hoặc, tơi muốn chọn tất phần tử (không nên), trừ thẻ cho đoạn văn, làm: *:not(p) { color : green ; } Xem demo Tương thích IE9+ Firefox Chrome Safari Opera 21 X::phần tử giả 16/29 p::first-line { font-weight : font-size : bold ; 1.2em ; } Chúng ta sử dụng phần tử giả (được định :: ) để định phong cách cho mảnh phần tử, chẳng hạn dòng đầu tiên, chữ Hãy nhớ phải áp dụng vào phần tử cấp độ khối để đạt hiệu Một phần tử giả gồm có hai dấu hai chấm: :: Nhắm chọn ký tự đoạn văn p::first-letter { float : left ; font-size : 2em ; font-weight : bold ; font-family : cursive ; padding-right : } 2px ; Đoạn code minh hoạ cho việc tìm tất đoạn văn trang, sau chọn chữ phần tử Điều thường sử dụng để tạo phong cách giống với báo chí cho chữ báo Chọn dòn đoạn văn 17/29 p::first-line { font-weight : font-size : bold ; 1.2em ; } Tương tự vậy, phần tử giả ::first-line sẽ, kỳ vọng, định phong cách dòng phần tử "Đối với khả tương thích với stylesheet có, user-agent phải chấp nhận ký hiệu dấu hai chấm cho phần tử giả giới thiệu CSS cấp độ (cụ thể là, :first-line, :first-letter, :before :after) Khả tương thích khơng phép cho phần tử giả giới thiệu đặc tả " - Nguồn Xem demo Tương thích IE6+ Firefox Chrome Safari Opera 22 X:nth-child(n) li:nth-child( ) { color : red ; } Còn nhớ ngày khơng có cách để chọn phần tử cụ thể ngăn xếp không? Lớp giả nth-child giải điều đó! Tuy nhiên, xin lưu ý nth-child chấp nhận số nguyên tham số, khơng dựa vào số làm số Nếu bạn muốn chọn phần tử danh sách thứ hai, sử dụng li:nth-child(2) Chúng ta chí sử dụng điều để chọn tập hợp phần tử Ví dụ, làm cho li:nth-child(4n) chọn tất phần cách sau bốn phần danh sách 18/29 Xem demo Tương thích IE9+ Firefox 3.5+ Chrome Safari 23 X:nth-last-child(n) li:nth-last-child( ) { color : red ; } Điều xảy bạn có danh sách lớn phần tử ul , cần truy cập, ví dụ, phần tử thứ ba đến phần tử cuối cùng? Thay thực li:nth-child(397) , thay vào bạn sử dụng lớp giả nth-last-child Kỹ thuật hoạt động gần giống với số 16 trên, nhiên, khác biệt bắt đầu vào cuối tập hợp, quay ngược trở lại Xem demo Tương thích IE9+ Firefox 3.5+ Chrome Safari Opera 24 X:nth-of-type(n) ul:nth-of-type( ) { border : } 1px solid black ; Sẽ có lúc, thay chọn phần tử , bạn cần phải chọn theo kiểu phần tử 19/29 Hãy tưởng tượng mã đánh dấu bao gồm năm danh sách khơng có thứ tự Nếu bạn muốn định phong cách cho ul thứ ba, khơng có id để chọn, bạn sử dụng lớp giả nth-of-type(n) Trong đoạn code trên, ul thứ ba có đường viền xung quanh Xem demo Tương thích IE9+ Firefox 3.5+ Chrome Safari 25 X:nth-last-of-type(n) ul:nth-last-of-type( ) { border : } 1px solid black ; Và vâng, để thống nhất, sử dụng nth-last-of-type để bắt đầu vào cuối danh sách chọn, lần ngược trở lại để chọn phần tử mong muốn Tương thích IE9+ Firefox 3.5+ Chrome Safari Opera 26 X:first-child ul li:first-child { border-top : none ; } Lớp giả cho phép chọn phần tử phần tử cha Bạn thường sử dụng điều để loại border khỏi phần tử cuối 20/29 Ví dụ: giả sử bạn có danh sách hàng, có border-top border-bottom Vâng, với xếp đó, phần tử cuối tập hợp trơng khác Nhiều nhà thiết kế áp dụng lớp first last để bù đắp cho việc Thay vào đó, bạn sử dụng lớp giả Xem demo Tương thích IE7+ Firefox Chrome Safari Opera 27 X:last-child ul > li:last-child { color : green ; } Ngược lại first-child , last-child chọn phần tử cuối phần tử cha Ví dụ Hãy xây dựng ví dụ đơn giản để minh hoạ khả sử dụng lớp Chúng ta tạo danh sách phần tử Mã đánh dấu < ul > < li > List Item < li > List Item < li > List Item 21/29 Khơng có đặc biệt đây; danh sách đơn giản CSS 01 ul { 02 width : 03 04 200px ; background : color : white ; list-style : none ; 05 padding-left : 06 } 07 li { 08 09 10 11 #292929 ; padding : ; 10px ; border-bottom : border-top : 1px 1px solid solid black ; #3c3c3c ; } 12 13 Phong cách thiết lập nền, loại bỏ padding mặc định trình duyệt ul , áp dụng border vào li để thêm chút chiều sâu 22/29 Để thêm chiều sâu cho danh sách bạn, áp dụng border-bottom vào li màu tối màu li Tiếp theo, áp dụng border-top với vài sắc thái nhẹ Vấn đề nhất, thể hình trên, border không áp dụng cho phần danh sách khơng có thứ tự - trơng khác Hãy sử dụng lớp giả :first-child :last-child để khắc phục điều li:first-child { border-top : none ; } li:last-child { border-bottom : none ; } 23/29 Bạn thấy đó; điều khắc phục nó! Xem demo Tương thích IE9+ Firefox Chrome Safari Opera À - IE8 hỗ trợ :first-child , khơng :last-child Hãy tìm cách khắc phục 28 X:only-child div p:only-child { color : } red ; Thành thật mà nói, bạn thấy khơng sử dụng lớp giả only-child thường xun Tuy nhiên, có sẵn, bạn cần Nó cho phép bạn chọn phần tử mà phần tử cha Ví dụ, tham khảo 24/29 đoạn code trên, có đoạn div có màu đỏ Giả sử mã dấu sau < div >< p > My paragraph here < div > < p > Two paragraphs total < p > Two paragraphs total Trong trường hợp này, đoạn văn div thứ hai không chọn; div Ngay sau bạn áp dụng nhiều vào phần tử, lớp giả only-child khơng cịn có hiệu lực Xem demo Tương thích IE9+ Firefox Chrome Safari Opera 29 X:only-of-type li:only-of-type { font-weight : bold ; } Lớp giả sử dụng theo số cách khéo léo Nó chọn phần tử mà khơng có anh chị em container cha Ví dụ, chọn tất ul , mà có phần tử Đầu tiên, tự hỏi làm bạn thực nhiệm vụ này? Bạn làm ul li , nhưng, điều chọn tất phần tử list Giải pháp để sử dụng only-of-type 25/29 ... text-decoration : none ; } Bộ chọn nhắc đến nhiều chọn phần tử Khi bạn cần cụ thể với chọn bạn, bạn sử dụng Ví dụ, nếu, thay nhắm chọn tất thẻ liên kết, bạn cần nhắm chọn liên kết mà nằm danh... lúc, thay chọn phần tử , bạn cần phải chọn theo kiểu phần tử 19/29 Hãy tưởng tượng mã đánh dấu bao gồm năm danh sách thứ tự Nếu bạn muốn định phong cách cho ul thứ ba, khơng có id để chọn, bạn sử... với bạn bè bạn Không nhiều người biết thủ thuật Biểu tượng ~ cho phép nhắm chọn thuộc tính có danh sách giá trị phân chia khoảng trắng Cùng với thuộc tính tùy chỉnh từ phần số 15, trên, tạo thuộc