css框模型

最新推荐文章于 2024-11-08 16:59:14 发布

betterIatethanne

最新推荐文章于 2024-11-08 16:59:14 发布

阅读量36

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/betterIatethanne/article/details/130091216

版权

本文演示了CSS中的各种选择器用法，包括属性选择器（如[attribute=value]、[attribute^=value]等），后代选择器（如divspan），子元素选择器（如ul>li），相邻兄弟选择器（如li+li）和伪类选择器（如:first-child）,通过实例展示了它们在HTML元素选择和样式设置中的应用。

摘要由CSDN通过智能技术生成

css属性选择器

整体：

<title>属性选择器</title>
	<style>/* 所有标签都可以写,不是只有Li标签,可以是p标签 ,h标签 */
		/* [attribute]元素有 attribute属性
		li[name]{/* 有name属性的Li标签 */
			color:red;
		}
		/* [attribute=value]用于选取带有指定属性和值得元素 */
	li[name=c]{
		color: aqua;
	}
	/* attribute~=value用于选取属性值中包含指定词汇的元素 */
	li[name~=a]{
		color: blue;
	}
	/* [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 */
	li[name|=c]{
		background-color: black;
	}
	/* [attribute^=value] 匹配属性值以指定值开头的每个元素。 */
	li[name^=a]{
		background-color: bisque;
	}
	/* [attribute$=value] 匹配属性值以指定值结尾的每个元素。 */
	li[name$=d]{
		background-color: beige;
	}
	/* [attribute*=value] 匹配属性值中包含指定值的每个元素。 */
	li[name*=ab]{
		font-size: 30px;
	}
	</style>
	</head>
	<body>
	</body>
	<ul>
		<li name="a">1</li>
		<li name="b">2</li>
		<li name="c">3</li>
		<li name="a c">4</li>
		<li name="acd">5</li>
		<li name="cad">6</li>
		<li name="abcd">7</li>
		<li>8</li>
		
	</ul>
</html>

后代选择器：整体示例

<title>后代</title>
	<style>
		div span{/* <!-- 空格代表后代选择器 --> */
			color: red;
		}
	</style>
	</head>
	<body>
		<div>
			<span>div的子元素</span>
			<P>
			等闲识得东风面<span>万紫千红总是春</span>
			</P>
			<P>
				<span>后代选择器：</span>
				div span:代表div中所有的span 标签，不管是子标签，还是孙子标签
			</P>
			<P></P>
			<P></P>
			<P></P>
		</div>
	</body>

子元素选择器：整体示例

<title>子元素</title>
	<style>
		/* ul的所有后代 */
		/* ul li{
			border: 1px solid red;
		} */
		/* 子元素选择器，只改变直接子元素 */
		ul>li{
			border: 1px solid yellow;
		}
	</style>
	</head>
	<body>
		<ul>
			<li>
				<ol>
					<li>11</li>
					<li>12</li>
					<li>13</li>
				</ol>
			</li>
			<li>2</li>    
			<li>3</li>
			<li>4</li>
			
		</ul>
	</body>

相邻兄弟选择器：整体示例

<title>兄弟选择器</title>
	<style>
		/* 相邻兄弟选择器 */
		.li5 + li{
			color: red ;
		}
		/* 后续兄弟选择器 */
		.li5~li{
			font-size: 25px;
		}	
	</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li class="li5">5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>

伪类选择器：整体示例

<title>伪类选择器</title>
	<style>
		input:focus{
			background-color: brown;
		}
		.u1 li:first-child{
		background-color: aqua;
		}
	</style>
	</head>
	<body>
		<form action="#" method="get">
			文本框<input type="text" name="user" value="文本框"/><br />
			密码框:<input type="password" name="pwd" required/><br />
			电话:<input type="tel" name="tel" value="18137861350" readonly/><br />
			
		</form>
		<ul class="u1">
			<li></li>
			<li class="a"></li>
			<li class="a"></li>
		</ul>
		<ul class="u2">
			<li></li>
			<li class="a"></li>
			<li class="a"></li>
		</ul>