Tôi đã sử dụng CSS trước và tôi đi qua phong cách CSS dưới đây, không có một đầu mối những gì nó làm.[href^= "..."] làm gì trong CSS?
a[href^="http:"] {
background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
background-image: none; padding-right:0;
}
a[href^="http:"]
Chọn một yếu tố <a> mà href giá trị thuộc tính bắt đầu với http:.
Ví dụ:
p[title^="para"] {background: green;}
sẽ phù hợp với những điều sau đây:
<p title="paragraph"> This paragraph should have a green background. </p>
+1 cho ví dụ. Tôi cũng đã thêm một ví dụ vào câu trả lời của mình nhưng nó dài như heck: P – BoltClock
Đó là attribute-starts-with selectors, họ sẽ chọn <a> yếu tố với một thuộc tính href bắt đầu với giá trị đó, ví dụ a[href^="http:"] trận đấu bất kỳ neo với một href bắt đầu với href="http:....", ví dụ:
<a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a> <!-- wouldn't match -->
vì vậy bạn có ý nghĩa gì nếu có bộ chọn css nói với một [href^= ”http://www.google.com”] { màu: đỏ;} chỉ liên kết cố định có href = "www .google.com "sẽ có màu đỏ? – user443946
@ user443946 - không, nhưng nếu cả hai có 'www.' thì nó sẽ có màu đỏ, nó phải bắt đầu bằng * chính xác * cùng một chuỗi. Kiểm tra nó ở đây: http: // jsfiddle.net/nick_craver/7hnAB/(đảm bảo bạn đang ở trong một trình duyệt mới hơn có hỗ trợ bộ chọn). –
Có phải sử dụng cụm từ thông dụng này không? [^] (trích dẫn từ wikipedia sau) Khớp một ký tự đơn không nằm trong dấu ngoặc đơn. Ví dụ: [^ abc] khớp với bất kỳ ký tự nào khác ngoài "a", "b" hoặc "c". [^ a-z] khớp với bất kỳ ký tự đơn nào không phải là chữ cái thường từ "a" đến "z". Như trên, các ký tự và phạm vi chữ có thể được trộn lẫn. – orolo
Đối với mỗi liên kết đó là "href" tham số bắt đầu với "http:", thiết lập nền tảng cho một hình ảnh chủ chốt (không lặp lại, vị trí trong góc trên cùng bên phải).
Đối với mỗi liên kết có thông số "href" bắt đầu bằng "http://mysite.com" hoặc "http://www.mysite.com", đặt hình nền thành không có gì (và phần đệm bên phải 0).
Với tôi, điều này có vẻ giống như một thủ thuật CSS thông minh sẽ làm cho người dùng của bạn biết khi họ rời khỏi trang web của bạn thông qua một liên kết bên ngoài bằng cách hiển thị một hình ảnh quan trọng.
(Tôi nghĩ rằng tôi sẽ sử dụng nó trong tương lai. :)
Chính xác điều này. Và đó là một ý tưởng tuyệt vời * cực kỳ hay mà tôi chưa từng nghĩ đến trước đây nhưng có lẽ sẽ sử dụng ở mọi nơi từ thời điểm này trở đi. –
+1 để đề xuất mục đích của các kiểu. – BoltClock
Các quy tắc nói, theo the W3C docs:
href rằng bắt đầu với http:href thuộc tính bắt đầu bằng http://mysite.com hoặc http://www.mysite.comĐây là một selector thuộc tính.
Phần ^= có nghĩa là thuộc tính href của thẻ neo phải bắt đầu với http: trong ví dụ đầu tiên của bạn.
Đó là một trong số substring-matching attribute selectors có sẵn trong CSS3. Nó khớp với các liên kết với các thuộc tính href có giá trị bắt đầu bằng chuỗi đã cho.
Để minh họa, chúng tôi sẽ lấy một ví dụ CSS của bạn, và thêm một số giá trị mặc định:
a {
background: none; padding: 0 1em;
}
a[href^="http:"] {
background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
background-image: none; padding-right:0;
}
Và kiểu HTML sau với nó. Kiểu đầu ra được tóm tắt trong các nhận xét:
<ul>
<!-- [1] No background, 1em left and right padding -->
<li><a href="/index.php">My site's page</a></li>
<!-- [2] Background, 1em left and right padding -->
<li><a href="http://example.com">External link</a></li>
<!-- [3] No background, no right padding -->
<li><a href="http://mysite.com">My site's base URL without www</a></li>
<!-- [4] No background, no right padding -->
<li><a href="http://www.mysite.com">My site's base URL with www</a></li>
<!-- [5] No background, no right padding -->
<li><a href="http://mysite.com/page.php">A page in my site with base URL</a></li>
</ul>
Điều gì đang xảy ra?
chọn bởi a chỉ
href="/index.php" thuộc tính của phần tử này không bắt đầu bằng http: hoặc các giá trị khác.
Không có nền, nhưng có đệm trái và phải.
chọn bởi a[href^="http:"] chỉ
href="http://example.com" thuộc tính của phần tử này bắt đầu với http: nhưng không bắt đầu bằng http://mysite.com.
Có cả đệm trái và phải và hình nền.
chọn bởi a[href^="http:"] và a[href^="http://mysite.com"]
thuộc tính của phần tử này href="http://mysite.com" bắt đầu với http: và bắt đầu hơn nữa với http://mysite.com.
Vì bộ chọn thứ hai sẽ ghi đè bộ chọn đầu tiên, hình nền và đệm phải được xóa.
chọn bởi a[href^="http:"] và a[href^="http://www.mysite.com"]
href="http://www.mysite.com" thuộc tính của phần tử này bắt đầu với http: và bắt đầu hơn nữa với http://www.mysite.com (chú ý www).
Vì bộ chọn thứ hai sẽ ghi đè bộ chọn đầu tiên, hình nền và đệm phải được xóa.
chọn bởi a[href^="http:"] và a[href^="http://mysite.com"]
thuộc tính của phần tử này bắt đầu với http: và bắt đầu hơn nữa với http://mysite.com.
Lưu ý rằng, so với liên kết thứ ba, thuộc tính trong cột này không chỉ chứa URL cơ sở; tuy nhiên, ^= cho biết giá trị của thuộc tính chỉ cần bắt đầu bằng URL cơ sở của trang web của bạn, thay vì = có nghĩa là "chọn các liên kết chỉ trỏ đến http://mysite.com". Do đó, liên kết này được khớp với bộ chọn thứ hai.
Vì bộ chọn thứ hai sẽ ghi đè bộ chọn đầu tiên, hình nền và đệm phải được xóa.
Giải thích tuyệt vời, xấu hổ Tôi là người duy nhất đã +1. – Lazlo
@Lazlo: Cảm ơn bạn đã bỏ phiếu. Nick và Russell đánh tôi với những ví dụ ngắn gọn hơn, và do đó ít thời gian hơn để viết câu trả lời của họ :) – BoltClock
+1 câu trả lời dài (nhưng có liên quan) là những gì làm cho trang web này tuyệt vời =) –
Phải biết thông tin ở đây: http://edgar.tumblr.com/post/1483797785/the-30-css-selectors-you-must-know-memorize – techfoobar
Xem thêm https://stackoverflow.com/q/7366323 ('chuỗi trùng lặp'). – SamGoody