css权威指南

最新推荐文章于 2023-02-22 14:24:50 发布

底层打工仔

最新推荐文章于 2023-02-22 14:24:50 发布

阅读量457

点赞数

本文链接：https://blog.csdn.net/echo750/article/details/89671740

版权

本博客主要针对css权威指南中的相关内容对以前学习的知识进行查缺补漏，记录以前未使用和存在疑惑的地方。具体以实例说明。

第二章选择器

一、属性选择器

1、[content]添加需要设置样式的属性，下面例子使用的是class属性名，即带有class属性名的h1元素都设置颜色为sliver：

<style>
	h1[class]{
		color:silver;
	}
</style>
</head>
<body>
	<h1 class="hoopla">Hello</h1>
	<h1 class="severe">Serenity</h1>
	<h1 class="fancy">Fooling</h1>
</body>

在这里插入图片描述
2、根据具体属性值改变样式：

h1[class="hoopla"]{
	color:silver;
}

在这里插入图片描述
这种格式必须与属性值完全匹配。
3、根据部分属性值选择，也就是部分匹配：

p[class~="warning"]{
	color:red;
}
<p class="urgent warning">warning</p>

在这里插入图片描述
~（波浪号）是部分选择的关键，出现该符号，代表相关元素有相应属性就可以进行匹配，如果忽略该符号，则须完全匹配。上述实例与p.warning的作用是相同的。但是它不仅用于class。而是用于任何属性。

img[title~="figure"]{
	border:1px solid red;
}
<img title="figure and text" alt="null" src="11.jpg">

4、更多的属性选择器
[foo^=“bar”]

底层打工仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css权威指南

本博客主要针对css权威指南中的相关内容对以前学习的知识进行查缺补漏，记录以前未使用和存在疑惑的地方。具体以实例说明。第二章选择器一、属性选择器1、[content]添加需要设置样式的属性，下面例子使用的是class属性名，即带有class属性名的h1元素都设置颜色为sliver：<style> h1[class]{ color:silver; }</styl...
复制链接

扫一扫