Chủ Nhật, 29 tháng 12, 2013
CSS Pseudo-classes
CSS pseudo-lớp học được sử dụng để thêm các hiệu ứng đặc biệt để một số bộ chọn.
Cú pháp
Cú pháp của các lớp học giả:
selector:pseudo-class {property:value;}
Lớp CSS cũng có thể được sử dụng với giả các lớp học:
selector.class:pseudo-class {property:value;}
Neo Giả lớp
Liên kết có thể được hiển thị theo những cách khác nhau trong một trình duyệt CSS hỗ trợ:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
Thử nó cho mình »
 | Lưu ý: a: hover phải đến sau khi một: liên kết và một:! truy cập trong định nghĩa CSS để có hiệu quả là: hoạt động phải đến sau khi một: hover trong định nghĩa CSS để có hiệu quả! tên Pseudo-lớp không phải là trường hợp nhạy cảm. |
|---|
Giả các lớp học và lớp học CSS
Giả các lớp học có thể được kết hợp với các lớp CSS:
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
<a class="red" href="css_syntax.asp">CSS Syntax</a>
Nếu liên kết trong ví dụ trên đã được truy cập, nó sẽ được hiển thị bằng màu đỏ.
CSS - Các: đầu tiên con Pseudo-lớp
Các: đầu tiên con pseudo-class phù hợp với một yếu tố quy định đó là đứa con đầu tiên của nguyên tố khác.
| Lưu ý: Đối với: đầu tiên con làm việc trong IE8 và trước đó, một <! DOCTYPE> phải được khai báo. |
|---|
Phù hợp với các yếu tố đầu tiên <p>
Trong ví dụ sau, bộ chọn phù hợp với bất kỳ yếu tố <p> đó là đứa con đầu tiên của bất kỳ yếu tố:
Ví dụ
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Thử nó cho mình »
Phù hợp với các yếu tố <i> đầu tiên trong tất cả các yếu tố <p>
Trong ví dụ sau, bộ chọn phù hợp với yếu tố <i> đầu tiên trong tất cả các yếu tố <p>:
Ví dụ
<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Thử nó cho mình »
Phù hợp với tất cả các yếu tố <i> trong các yếu tố tất cả các đứa con đầu <p>
Trong ví dụ sau, bộ chọn phù hợp với tất cả các yếu tố trong các yếu tố <i> <p> đó là những đứa con đầu tiên của nguyên tố khác:
Ví dụ
<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Thử nó cho mình »
CSS - Các: lang Pseudo-lớp
Các: lang pseudo-class cho phép bạn xác định quy tắc đặc biệt cho các ngôn ngữ khác nhau.
| Lưu ý: IE8 hỗ trợ: lang pseudo-class chỉ khi một <DOCTYPE> được chỉ định. |
|---|
Trong ví dụ dưới đây,: lang lớp học định nghĩa các dấu ngoặc kép cho các yếu tố q với lang = "không":
Ví dụ
<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét