<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>selector-attr.html</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 属性选择器可以根据元素的属性及属性值来选择元素。 也可作用于class属性。
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
-->
<style type="text/css">
[title] {
color:red;
}
a[href*="w3school.com.cn"] {
color: red;
}
[lang|=en] {
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a href="http://w3school.com.cn">W3School</a>
<h1>无法应用样式：</h1>
<a name="w3school">W3School</a>
<hr />
<h1>可以应用样式：</h1>
<a href="http://www.w3school.com.cn/">W3School</a>
<a href="http://www.w3school.com.cn/css/">CSS</a>
<a href="http://www.w3school.com.cn/html/">HTML</a>
<h1>无法应用样式：</h1>
<a href="http://www.w3c.org/">W3C</a>
<a href="http://www.microsoft.com">Microsoft</a>
<a href="http://www.apple.com.cn">Apple</a>
<hr />
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>
css selector-attr
猜你喜欢
转载自jaesonchen.iteye.com/blog/2287507
今日推荐
周排行