第三篇 CSS属性选择器

1.属性选择器语法
2.属性选择器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器语法</title>
		<style type="text/css">
			[title="hello"]{
				color: #008000;
			}
			[title^="w"]{
				color: red;
			}
			[title$="w"]{
				font-size: 1.125rem;
			}
			[title*="a"]{
				font-family: "arial black";
			}
            [title~="huhu"]{
				color: saddlebrown;
			}
            [title|="zh"]{
				color:salmon;
			}
		</style>
	</head>
	<body>
		<!--
			属性选择器
	                    [属性名] 选择含有指定属性的元素
			    [属性名=属性值] 选择含有指定属性和属性值的元素
			    [属性名^=属性值] 选择属性值以指定值开头的元素
			    [属性名$=属性值] 选择属性值以指定值结尾的元素
			    [属性名*=属性值] 选择属性值中含有某值的元素的元素
			    [属性名~=属性值] 选择属性值中，以空格作为分隔的值列表，其中至少有一个值
			    [属性名|=属性值] 选择属性值中，属性值为“value”或是以“value-”为前缀开头
		 -->
		<p title="hello">你好</p>
		<p title="world">世界</p>
		<p title="window">窗户</p>
		<p title="shadow">隐藏</p>
        <p title="zh-TW">哈哈</p>
	</body>
</html>

2.属性选择器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器案例</title>
		<style type="text/css">
			a {
			  color: blue;
			}
			
			/* 以 "#" 开头的页面本地链接 */
			a[href^="#"] {
			  background-color: gold;
			}
			
			/* 包含 "example" 的链接 */
			a[href*="example"] {
			  background-color: silver;
			}
			
			/* 包含 "insensitive" 的链接,不区分大小写 */
			a[href*="insensitive" i] {
			  color: cyan;
			}
			
			/* 包含 "cAsE" 的链接，区分大小写 */
			a[href*="cAsE" s] {
			  color: pink;
			}
			
			/* 以 ".org" 结尾的链接 */
			a[href$=".org"] {
			  color: red;
			}
		</style>
	</head>
	<body>
		<ul>
		  <li><a href="#internal">Internal link</a></li>
		  <li><a href="http://example.com">Example link</a></li>
		  <li><a href="#InSensitive">Insensitive internal link</a></li>
		  <li><a href="http://example.org">Example org link</a></li>
		</ul>
	</body>
</html>

posted on 2021-11-18 10:20 码农青葱阅读(55) 评论(0) 收藏举报