NTM Solutions

Facebook Youtube Google+

Thứ Năm, 19 tháng 4, 2018

Tự học CSS - Bài 24 - Lớp giả lập Pseudo-class


Quay về MỤC LỤC TỰ HỌC CSS 

1.    Cú pháp:

Tên phần tử:lớp giả lập{thuộc tính: giá trị}
Ví dụ:
a:hover{background-color:blue;}
è Gọi lớp giả lập hover của siêu liên kết

2.    Lớp giả lập của siêu liên kết:


/* unvisited link */
a:link
{
    color
: #FF0000;
}

/* visited link */
a:visited
{
    color
: #00FF00;
}

/* mouse over link */
a:hover
{
    color
: #FF00FF;
}

/* selected link */
a:active
{
    color
: #0000FF;
}
Chú ý: các lớp giả lập của siêu liên kết phải khai báo đúng theo thứ tự trên hiệu ứng mới xảy ra.

3.    Lớp giả lập vs lớp CSS

Ví dụ:
a.highlight:hover {
    color
: #ff0000;
}

4.    Hiệu ứng hover trên thẻ div

div:hover {
    background-color
: blue;
}

5.    Hiệu ứng tooltip hover

p {
    display
: none;
    background-color
: yellow;
    padding
: 20px;
}

div:hover p
{
    display
: block;
}

6.    Lớp giả lập :first-child

Ví dụ 1: chọn phần tử con(của phần tử bất kỳ) đầu tiên là thẻ <p>
p:first-child {
    color
: blue;
}
và các giá trị HTML trong thẻ body
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
Trong ví dụ này sẽ chọn phần tử đầu tiên của thẻ <body>
Ví dụ 2: chọn phần tử i là phần tử con đầu tiên của mọi phần tử p
p i:first-child {
    color
: blue;
}
và các giá trị HTML trong thẻ body:
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
Ví dụ 3: chọn tất cả phần tử I trong thẻ p là phần tử con đầu tiên (của phần tử nào đó)
p:first-child i {
    color
: blue;
}

7.    Lớp giả lập :lang

Lớp giả lập :lang cho phép ta thiết lập 01 quy tắc đặc biệt cho những ngôn ngữ khác nhau
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>

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Nguồn: Lớp học vi tính .COM
Và sau đây là bảng phụ lục tất cả các lớp – phần tử giả lập:
https://www.w3schools.com/css/css_pseudo_classes.asp