CSS-属性选择器

最新推荐文章于 2024-10-11 16:46:33 发布

forward93124

最新推荐文章于 2024-10-11 16:46:33 发布

阅读量207

点赞数

文章标签： css html5 html

本文链接：https://blog.youkuaiyun.com/weixin_41342791/article/details/119975361

版权

- 属性选择器
           * - 作用：可以根据元素中的属性或属性值来选取指定元素
           * - 语法：
           * [属性名] 选取含有指定属性的元素
           * [属性名="属性值"]选取含有指定属性值的元素
           * [属性名^="属性值"]选取以属性值开头的元素
           *               [属性名$="属性值"]选取以属性值结尾的元素
           * [属性名*="属性值"]选取包含属性值元素的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/**
			 * 需求:为所有具有title说下的p元素，设置一个背景颜色
			 *   - 属性选择器
			 *          - 作用：可以根据元素中的属性或属性值来选取指定元素
			 *          - 语法：
			 *               [属性名] 选取含有指定属性的元素
			 *               [属性名="属性值"]选取含有指定属性值的元素
			 *               [属性名^="属性值"]选取以属性值开头的元素
			 * 				 [属性名$="属性值"]选取以属性值结尾的元素
			 *               [属性名*="属性值"]选取包含属性值元素的元素
			 */
			p[title]{
				background-color: yellow;
			}
			/**
			 * 为title属性值是hello word的元素设置一个背景颜色
			 */
			p[title="hello word"]{
				background-color: #9ACD32;
			}
			/**
			 * 为title属性值以T开头的元素设置一个背景
			 */
			p[title^="T"]{
				background-color: antiquewhite;
			}
			/**
			 * 为title属性值以C结尾的元素设置一个背景
			 */
			p[title$="C"]{
				background-color: blue;
			}
			/**
			 * 为title属性值包含d元素的元素设置一个背景
			 */
			p[title*="d"]{
				background-color: darkgreen;
			}
		</style>
	</head>
	<body>
		<!--
			title属性，这个属性可以给任何标签指定
			    当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
		-->
		<p title="我是title中的文字">我是一个段落</p>
		<p>我是一个段落</p>
		<p>我是一个段落</p>
		<p title="hello word">我是一个段落</p>
		<p title="我是title中的文字">我是一个段落</p>
		<p title="Tjlkjl">我是一个段落</p>
		<p title="Tpppppp">我是一个段落</p>
	</body>
</html>