css selector-attr

最新推荐文章于 2023-08-01 14:20:31 发布

iteye_8208

最新推荐文章于 2023-08-01 14:20:31 发布

阅读量316

点赞数

分类专栏： css/html

本文链接：https://blog.csdn.net/iteye_8208/article/details/82650034

版权

css/html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>