Chủ Nhật, 29 tháng 12, 2013
CSS Thuộc tính chọn lọc
Các yếu tố phong cách HTML với thuộc tính cụ thể
Nó có thể tạo kiểu phần tử HTML có các thuộc tính cụ thể, không chỉ lớp và id.
 | Lưu ý: IE7 và IE8 hỗ trợ thuộc tính bộ chọn chỉ khi một DOCTYPE được quy định!. |
|---|
Chọn thuộc tính
Ví dụ dưới đây phong cách tất cả các yếu tố với một thuộc tính tiêu đề:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="lutip" href="http://lutip.com">W3Schools</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>
Thử nó cho mình »
Thuộc tính và giá trị Selector
Ví dụ dưới đây phong cách tất cả các yếu tố với title = "lutip":
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
[title=lutip]
{
border:5px solid green;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<img title="lutip" src="lutip_logo.gif" width="270" height="50" />
<br>
<a title="lutip" href="http://lutip.com">lutip</a>
<hr>
<h2>Will not apply to:</h2>
<p title="greeting">Hi!</p>
<a class="lutip" href="http://lutip.com">lutip</a>
</body>
</html>
Thử nó cho mình »
Thuộc tính và giá trị Selector - Nhiều giá trị
Ví dụ dưới đây phong cách tất cả các yếu tố với một thuộc tính tiêu đề có chứa một giá trị quy định. Điều này làm việc ngay cả khi các thuộc tính có không gian tách biệt giá trị:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>Will not apply to:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>
Thử nó cho mình »
Ví dụ dưới đây phong cách tất cả các yếu tố với một thuộc tính lang bắt đầu với một giá trị quy định:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en]
{
color:blue;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>Will not apply to:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>
</html>
Thử nó cho mình »
Các hình thức tạo kiểu tóc
Các bộ chọn thuộc tính đặc biệt hữu ích cho phong cách hình thức mà không có lớp học hoặc ID:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>
</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