008_CSS属性选择器

最新推荐文章于 2024-06-23 04:29:52 发布

原创最新推荐文章于 2024-06-23 04:29:52 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了CSS2的属性选择器，包括如何根据元素的属性及值选择，如简单属性选择、具体属性值选择、部分属性值选择，以及特定属性选择类型和子串匹配。通过实例演示，展示了如何针对不同情况应用这些选择器来精确控制样式。

1. CSS 2引入了属性选择器。

2. 属性选择器可以根据元素的属性及属性值来选择元素。

3. 简单属性选择

3.1. 如果希望选择有某个属性的元素, 而不论属性值是什么, 可以使用简单属性选择器。

3.2. 如果您希望把包含标题(title)属性的所有元素变为红色, 可以写作:

*[title] {
	color: red;
}

3.3. 与上面类似, 可以只对有href属性的超链接应用样式:

a[href] {
	text-decoration: none;
}

3.4. 还可以根据多个属性进行选择, 只需将属性选择器链接在一起即可。例如, 为了将同时有href和title属性的html超链接应用样式, 可以这样写:

a[href][title] {
	text-decoration: line-through;
}

3.5. 例子

3.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>简单属性选择</title>
		<meta charset="utf-8" />

		<style type="text/css">
			[title] {
				color: red;
			}
			a[href] {
				text-decoration: none;
			}
			a[href][title] {
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<h2 title="Hello world">Hello world</h2>
		<a href="http://w3school.com.cn">W3School</a>
		<a title="W3School" href="http://w3school.com.cn">W3School</a>
	</body>
</html>

3.5.2. 效果图

4. 根据具体属性值选择

4.1. 除了选择拥有某些属性的元素, 还可以进一步缩小选择范围, 只选择有特定属性值的元素。

4.2. 例如, 假设希望将指向Web服务器上某个指定文档的超链接变成红色, 可以这样写:

a[href="http://www.w3school.com.cn/about_us.asp"] {
    color: red;
}

4.3. 与简单属性选择器类似, 可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {
    color: red;
}

4.4. 属性与属性值必须完全匹配。

4.5. 例子

4.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>根据具体属性值选择</title>
		<meta charset="utf-8" />

		<style type="text/css">
			a[href="http://www.w3school.com.cn/about_us.asp"] {
				text-decoration: none;
			}
			a[href="http://w3school.com.cn"][title="W3School"] {
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<a href="http://www.w3school.com.cn/about_us.asp">About W3School</a>
		<a href="http://w3school.com.cn" title="W3School">W3School</a>
	</body>
</html>

4.5.2. 效果图

5. 根据部分属性值选择

5.1. 如果需要根据属性值中的词列表的某个词进行选择(意思是包含某个单词), 则需要使用波浪号(~)。

5.2. 例子

5.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>根据部分属性值选择(具体某个单词)</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p[class~="important"] {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>可以应用样式：</h1>
		<p class="important warning">This is a paragraph.</a>
		<p class="important">This is a paragraph.</a>

		<hr />

		<h1>无法应用样式：</h1>
		<p class="warning">This is a paragraph.</a>
	</body>
</html>

5.2.2. 效果图

6. 特定属性选择类型

6.1. 特定属性选择器, 用于选取带有以指定值开头的属性值的元素, 该值必须是整个单词。请看下面的例子:

*[lang|="en"] {
    color: red;
}

6.2. 上面这个规则会选择lang属性等于en或以en开头的所有元素。因此, 以下示例标记中的前三个元素将被选中, 而不会选择后两个元素:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

6.3. 一般来说, [att|="val"]可以用于任何属性及其值。当然, 这种属性选择器最常见的用途还是匹配语言值。

6.4. 例子

6.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>特定属性选择类型</title>
		<meta charset="utf-8" />
		<style type="text/css">
			*[lang|="en"] {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>可以应用样式：</h1>
		<p lang="en">Hello!</p>
		<p lang="en-us">Greetings!</p>
		<p lang="en-au">G'day!</p>


		<hr />

		<h1>无法应用样式：</h1>
		<p lang="fr">Bonjour!</p>
		<p lang="cy-en">Jrooana!</p>
	</body>
</html>

6.4.2. 效果图

7. 子串匹配属性选择器

7.1. 子串匹配属性选择器是更高级的选择器模块, 它是CSS2完成之后发布的。

7.2. 下表是对这些选择器的简单总结:

7.3. 例子

7.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>子串匹配属性选择器</title>
		<meta charset="utf-8" />
		<style type="text/css">
			a[href^="http://www.w3school.com"] {
				text-decoration: none;
			}
			a[href$="cn"] {
				color: orange;
			}
			a[href*="microsoft"] {
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="http://www.w3school.com.cn/">W3School</a> <br />
		<a href="http://www.w3school.com.cn/css/">CSS</a> <br />
		<a href="http://www.w3school.com.cn/html/">HTML</a> <br />
		<a href="http://www.w3c.org/">W3C</a> <br />
		<a href="http://www.microsoft.com">Microsoft</a> <br />
		<a href="http://www.apple.com.cn">Apple</a>
	</body>
</html>

7.3.2. 效果图