|
主题设置

卡片式面板通常用于非白色背景色的主体内

属性选择器

属性选择器(Attribute Selectors)是 CSS 中一种强大的选择器,允许你根据HTML元素的属性及其对应的属性值来选择元素。属性选择器可以根据元素的属性存在与否、属性值完全匹配、属性值包含特定字符串等条件进行选择。

笔记内容

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			/* 属性选择器:是 html5 中功能 */

			/* 类型为 text 的 input 输入框,使用此样式 */
			input[type=text]{
				width:150px;
				display:block;
				margin-bottom:10px;
				background-color:yellow;
			}

			/* 类型为 text 的 input 输入框,获取到焦点后,改变边框和背景色样式 */
			input[type=text]:focus {
				border: 3px solid #555;
				background-color: lightblue;
			}

			/* 是 a 标签,且里面存在 id 属性,就会被修饰 */
			a[id]{
				background: red;
			}

			/* 是 a 标签,且里面存在 id 属性,且 id 属性的值等于 first,就会被修饰 */
			a[id=first]{
				background: red;
			}

			/* 是 a 标签,且里面存在 class 属性,就会被修饰 */
			a[class]{
				background: red;
			}

			/* 是 a 标签,且里面存在 class 属性,且 class 属性的值等于 link,就会被修饰 */
			a[class=link]{
				background: red;
			}

			/* 是 a 标签,且里面存在 class 属性,且 class 属性的值包含 link,就会被修饰 */
			a[class*=link]{
				background: red;
			}

			/* 是 a 标签,且里面存在 class 属性,且 class 属性的值以 link 开头,就会被修饰 */
			a[class^=link]{
				background: red;
			}

			/* 是 a 标签,且里面存在 href 属性,且 href 属性的值以 http 开头,就会被修饰 */
			a[href^=http]{
				background: red;
			}

			/* 是 a 标签,且里面存在 href 属性,且 href 属性的值以 com 结尾,就会被修饰 */
			a[href$=com]{
				background: red;
			}
		</style>
	</head>
	<body>

	</body>
</html>