Người Viết : ViKiMi Editor

12 ) Bộ chọn chứa giá trị cần thiết X[href*=”nettuts”], miễn là thuộc tính của X là href chứa giá trị nettuts. Vì vậy bao nhiêu phần tử X cũng được miễn là href có chứa tối thiểu là giá trị nettus
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
Với css ở phía trên thì tất cả link liên kết sẽ được chọn nếu link liên kết đấy có chứa thuộc tính href, mà ở đó href sẽ có chứa giá trị tối thiểu là ‘tuts’. Ở đây cái ngôi sao chỉ định rằng giá trị phía sau là ‘tuts’ xuất hiện ở đâu đó trong giá trị của thuộc tính cũng được. Bằng cách đó, nó bao hàm cả globaltuts.com, net.globaltutsplus.com, và thậm chí tutsplus.com.
Hãy nhớ rằng đây là một bộ chọn rộng. Điều gì xảy ra nếu thẻ liên kết liên kết đến một số trang web không phải website chỉ định với chuỗi tuts trong url? Khi bạn cần cụ thể hơn, hãy sử dụng ^ và $, để tham chiếu bắt đầu và kết thúc của một chuỗi, tương ứng.
13 ) Bộ chọn chỉ định một chuỗi sẽ bắt đầu cho thuộc tính X[href^=”http”], nếu đúng thì sẽ thực hiện thiết lập.
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Để chỉ định 1 chuỗi sẽ nằm trong phần bắt đầu của một thuộc tính của một phần tử thì chúng ta sẽ sử dụng một biểu thức với biểu tượng dạng mũ ‘ ^ ‘. Với ví dụ trên thì chúng ta hiểu là, sẽ áp dụng phần css cho các thẻ <a> có phần href với giá trị bắt đầu là “http”, chẳng hạn : http://tech.com hay http://coboxtech.com etc. Còn với technical.com.vn thì không áp dụng vì nó không chứa http.
Và giả sử nhỏ là có bao giờ tự hỏi làm thế nào một số trang web có thể hiển thị một biểu tượng nhỏ bên cạnh các liên kết mà là liên kết bên ngoài? Tôi chắc là bạn đã nhìn thấy nó trước đây; chúng đang nhắc khéo rằng các liên kết sẽ chỉ dẫn bạn tới một trang web hoàn toàn khác nhau.
Ta có Đây là một biểu thức với biểu tượng dấu mũ. Nó thường được sử dụng nhiều nhất trong các biểu thức chính quy để chỉ về chuỗi bắt đầu của một chuỗi. Nếu chúng ta muốn nhắm chọn tất cả các thẻ liên kết có một href bắt đầu bằng http, chúng ta có thể sử dụng một bộ chọn tương tự như đoạn code trên.
Lưu ý rằng chúng ta không tìm kiếm https://; điều đó là không cần thiết, và không tính luôn các url mà bắt đầu bằng https://.
14 ) Bộ chọn chỉ định một chuỗi sẽ kết thúc cho thuộc tính X[href$=”.jpg”], nếu đúng thì sẽ thiết lập
a[href$=".jpg"] {
color: red;
}
Một lần nữa, chúng ta sử dụng một biểu tượng của biểu thức chính quy, $, để tham chiếu đến phần cuối của một chuỗi. Trong trường hợp này, chúng ta đang tìm kiếm tất cả các liên kết mà liên kết đến một hình ảnh – hoặc ít nhất là một url kết thúc bằng .jpg. Hãy nhớ rằng điều này chắc chắn sẽ không làm việc cho gif và png.
15 ) Bộ chọn để chỉ định cho các định dạng của kiểu data X[data-*=”foo”], ở đây áp dụng cho tất cả các dạng data là foo. Vì chúng ta có thấy rõ dấu * để áp dụng cho tât cả.
a[data-filetype="image"] {
color: red;
}
Xem lại phần số tám; làm thế nào để chúng ta bù vào tất cả các kiểu hình ảnh khác: png, jpeg, jpg, gif? Vâng, chúng ta có thể tạo nhiều bộ chọn, chẳng hạn như:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Nhưng, đó là cách rất chậm, và không hiệu quả. Một giải pháp có thể là sử dụng các thuộc tính tùy chỉnh. Nếu chúng ta thêm thuộc tính data-filetype riêng của chúng ta vào mỗi liên kết mà liên kết đến một hình ảnh thì sao?
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
Sau đó, với css chúng ta có thể chỉ định rõ các thuộc tính sẽ áp dụng cho thẻ <a> có kiểu data-filetype=”image”
a[data-filetype="image"] {
color: red;
}
16. Bộ chọn giá trị cho phép chọn các phần tử có giá trị thuộc tính là một danh sách các giá trị được phân chia bởi khoảng trắng X[foo~=”bar”]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
Với cách thiết lập trên thì nó sẽ rất ấn tượng cho một lập trình viên. Không quá nhiều người biết về thủ thuật này. Biểu tượng ~ cho phép chúng ta nhắm chọn một thuộc tính trong đó có một danh sách các giá trị được phân chia bởi khoảng trắng.
Ở ví dị trên thì chúng ta có thể tạo ra một thuộc tính data-info, có thể nhận một danh sách phân chia bởi khoảng trắng của bất cứ điều gì chúng ta cần phải lưu ý đến. Trong trường hợp này, chúng ta sẽ để ý đến các liên kết bên ngoài và các liên kết đến hình ảnh – ví dụ như vậy.
<a href="path/to/image.jpg" data-info="external image"> Click on, Cool ready </a>
<a href="path/to/image-1.jpg" data-info="internal image"> Click on, Cool ready </a>
Với mã đánh dấu đã có, bây giờ chúng ta có thể nhắm chọn bất kỳ thẻ nào có một trong những giá trị là external và image, bằng cách sử dụng bộ chọn thuộc tính ~.
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
Rất tiện ích khi cần thiết.
17. Bộ chọn với các phần tử giao diện đã được tích chọn X:checked. Tại giao diện thể hiện bởi HTML nếu được tích chọn thì sẽ thực hiện thiết lập CSS.
input[type=radio]:checked {
border: 1px solid black;
}
Ví dụ này chúng ta sẽ xét các nút radio được tích chọn thì thiết lập boder.
Nói chung là, Lớp giả này sẽ chỉ nhắm chọn một phần tử giao diện người dùng đã được tích chọn – giống như một nút radio, hoặc checkbox. Nó chỉ đơn giản như vậy.
18. Bộ chọn lớp giả X:after để thực hiện công việc thiết lập nối sau các phần tử những yêu cầu mà bạn thấy cần thiết.
Điển hình cho ví dụ này là giúp cho các phần tử cha hiển thị toàn bộ các phần tử con nằm trọn trong khung chứa của nó. Vì nhiều lần bạn có thể thấy rõ là với phần viền của phần tử cha sẽ không chứa chọn các phần tử con, mà phần viền sẽ bị kéo ngang thưng phần tử con. Vì vậy với bộ chọn :after hay :before thì vấn đề này sẽ được giải quyết triệt để.
Các lớp giả before và after rất hiệu quả. Mỗi ngày, có vẻ như, mọi người đang tìm kiếm những cách thức mới và sáng tạo để sử dụng chúng một cách hiệu quả. Ban đầu thì bạn chỉ cần áp dụng là tạo ra nội dung chung quanh phần tử được chọn.
Nhiều người lần đầu biết được các lớp này khi họ gặp vấn đề về clear-fix.
HTML code
<html>
<body>
<div id='PTCha' class='clearfix'>
<div id='PTCon1'></div>
</div>
</body>
</html>
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Ở trên là cách giải quyết để thẻ div cha sẽ chứa toàn bộ phần tử con. Vì div phần tử cha sẽ được thiết lập cho hiển thị được toàn bộ phần tử con. Khi đó với các thiết lập viền hay màu sắc đều hiển thị tốt.
Cách giải quyết này sử dụng lớp giả :after để nối thêm một khoảng trắng phía sau phần tử, và sau đó clear nó. Đây là một mẹo tuyệt vời cần có trong bộ công cụ của bạn, đặc biệt là trong các trường hợp khi overflow:hidden; là không thể.
Đối với trường hợp sử dụng sáng tạo khác, hãy tham khảo mẹo nhanh của tôi trong việc tạo ra bóng đổ.
Theo các đặc điểm kỹ thuật của các bộ chọn CSS3, về mặt kỹ thuật bạn nên sử dụng các cú pháp phần tử giả với dấu hai dấu hai chấm ::. Tuy nhiên, để duy trì tương thích, user-agent sẽ chấp nhận một cách sử dụng một dấu hai chấm. Trong thực tế, vào thời điểm này, tốt hơn là nên sử dụng phiên bản một dấu hai chấm trong các dự án của bạn.
19. Bộ chọn áp dụng cho các phần tử được di chuột qua ( hover ) X:hover
div:hover {
background: #e3e3e3;
}
Đơn giản là bạn áp dụng cho các phần tử được di chuột qua, và điển hình là các thẻ liên kết được di chuột hover qua. Dễ hiểu là áp dụng cho các phần tử được di chuột qua. Và thấy là bạn muốn áp dụng phong cách cụ thể khi người dùng di chuyển chuột qua một phần tử phải không? Nó sẽ giúp bạn hoàn thành công việc!
Hãy nhớ rằng phiên bản cũ của Internet Explorer không phản hồi khi lớp giả :hover được áp dụng cho bất cứ thứ gì khác ngoài một thẻ liên kết.
Bạn sẽ thường xuyên sử dụng bộ chọn này khi áp dụng, ví dụ, một border-bottom vào thẻ liên kết, khi 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 hơn so với text-decoration: underline;
20. Bộ chọn loại trừ X : not (selector) . Có thể hiểu là tất cả phần tử X và loại trừ phần tử X là selector.
div:not(#container) {
color: blue;
}
Với lớp giả phủ định này thật đặc biệt hữu ích. Đoạn ví dụ trên thì chúng ta chọn tất cả thẻ DIV và loại trừ đi DIV có id = ‘container’. Đoạn code ở trên sẽ xử lý nhiệm vụ đó một cách hoàn hảo.
Hoặc, nếu tôi muốn chọn tất cả các phần tử (không nên), trừ các thẻ cho đoạn văn, chúng ta có thể làm:
*:not(p) {
color: green;
}