CSS 属性选择器

最新推荐文章于 2024-05-19 00:30:00 发布

冷月醉雪

最新推荐文章于 2024-05-19 00:30:00 发布

阅读量181

点赞数

分类专栏： CSS 文章标签： CSS 属性选择器

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80447634

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

属性选择器

下面的例子是把包含标题(title)的所有元素变为蓝色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			[title]
			{
				color:blue;
			}
		</style>
	</head>
	<body>
		<h2>Will apply to:</h2>
		<h1 title="Hello World">Hello World</h1>
		<a title="baidu.com" href="http://www.baidu.com">baidu.com</a>
		<hr>
		<h2>Will not apply to:</h2>
		<p>Hello!</p>
	</body>
</html>

属性和值选择器

下面的实例改变了标题title='baidu'元素的边框样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			[title=baidu]
			{
				border: 5px solid green;
			}
		</style>
	</head>
	<body>
		<h2>将适用：</h2>
		<img title="baidu" src="logo.png" width="270" height="50" />
		<br />
		<a title="baidu" href="http://www.baidu.com">baidu</a>
		<hr>
		<h2>将不适用:</h2>
		<p title="greeting">Hi!</p>
		<a class="baidu" href="http://www.baidu.com/">baidu</a>
	</body>
</html>

属性和值的选择器-多值

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			[title~=hello]
			{
				color:blue;
			}
		</style>
	</head>
	<body>
		<h2>将适用：</h2>
		<h1 title="hello world">Hello world</h1>
		<p title="student hello">Hello CSS students!</p>
		<hr>
		<h2>将不适用:</h2>
		<p title="student">Hi CSS students!</p>
	</body>
</html>

表单样式

属性选择器样式无需使用class或id的形式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			input[type="text"]
			{
				width:150px;
				display:block;
				margin-bottom:10px;
				background-color:yellow;
			}
			
			input[type="button"]
			{
				width:120px;
				margin-left:35px;
				display:block;
			}
		</style>
	</head>
	<body>
		<form name="input" action="demo-form.hpp" method="get">
			Firstname:<input type="text" name="fname" value="Peter" size="20">
			Lastname:<input type="text" name="lname" value="Griffin" size="20">
			<input type="button" value="Example Button">
		</form>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/90f9c1b4-18da-4867-8173-7096a94b5f3a