46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>06_属性选择器</title>
|
||
<style>
|
||
/* 第一种： 选择具有title属性的元素 */
|
||
[title] {
|
||
color: red;
|
||
}
|
||
|
||
/* 第二种: 选中具有title属性，且属性值为zyjblogs2的元素*/
|
||
[title="zyjblogs2"] {
|
||
color: green;
|
||
}
|
||
|
||
/* 第三种：选择title属性值以k开头的元素 */
|
||
[title^="k"] {
|
||
color: pink;
|
||
}
|
||
|
||
/* 第四种：选择title属性值以3结尾的元素 */
|
||
[title$="3"] {
|
||
color: blue;
|
||
}
|
||
|
||
/* 第五种：选择title属性值包含4的元素 */
|
||
[title*="4"] {
|
||
color: yellow;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div title="zyjblogs1">zyjblogs1</div>
|
||
<div title="zyjblogs2">zyjblogs2</div>
|
||
<div title="zyjblogs3">zyjblogs3</div>
|
||
<div title="k3">k3</div>
|
||
<div title="kk">kk</div>
|
||
<div title="k4">k4</div>
|
||
<div title="l4">l4</div>
|
||
</body>
|
||
|
||
</html> |