css权威指南-优快云博客

本文深入解析CSS选择器的使用技巧，包括属性选择器、部分匹配选择器等高级应用，通过实例展示如何精确控制网页样式。

本博客主要针对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”]

css权威指南

第二章 选择器

一、属性选择器

第二章选择器