NTM Solutions

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:
Tác giả: #drM

Nguồn: Sưu Tầm
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


Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS