选择器zuoye

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<link rel="stylesheet" type="text/css" href="css/10.23zy.css"/>
	</head>
	<body>
		<!-- （1）.class 	.aa 	选择所有class="aa"的元素 -->
		<div class="aa"></div>
		<div class="aa"></div>
		<div class="aa"></div>
		<div class="aa"></div>
		<!-- （2）#id 	#bb 	选择所有id="bb"的元素 -->
		<div id="ss">
			<div id="bb">飞机</div>
			<div id="bb">火箭</div>
			<div id="bb">大炮</div>
			<div id="bb">导弹</div>
		</div>
		<!-- 3）标签：根据标签名选中元素 -->
		<span>123e1736et</span>
		<span>123e1736et</span>
		<span>123e1736et</span>
		<!-- （4）复合 -->
		<p>1qqufhcabhus</p>
		<p>1qqufhcabhus</p>
		<div id="z4">eee</div>	
		<div class="b4">dddd</div>
		<!-- （5）属性选择器 -->
		<input type="text" id="hh" value="123" />
		<input type="password" id="hh" value="123" />
		<!-- （6）:checked 	input:checked 	选择所有选中的表单元素 -->
			<input type="checkbox" name="" id="" value="临淄" />临淄
			<input type="checkbox" name="" id="" value="" />高清
			<input type="checkbox" checked="checked" name="" id="" value="" />沂源
			<select name="sel">
				<option value="张店">张店</option>
				<option value="临淄">临淄</option>
				<option value="高清">高清</option>
				<option value="沂源" selected="selected">沂源</option>
			</select>
			<input type="submit" name="" id=""/>
		<!-- （7）:disabled 	input:disabled 	选择所有禁用的表单元素 -->
			<input type="text" name="sss" id="" value="" />
			<input type="text" name="sss" id="" value="" disabled="disabled" />
			<!-- （8）:empty 	p:empty 	选择所有没有子元素的p元素 -->
			<p>123</p>
			<p><br>123<br></p>
			<p></p>
			<!-- （9）:last-child 	p:last-child 	选择所有p元素的最后一个子元素  	
				选择所有p元素的第二个子元素    选择所有p元素倒数的第二个子元素-->
			<div id="">
				<p>第一个段落。</p>
				<p>第二个段落。</p>
				<p>第三个段落。</p>
				<p>第四个段落。</p>
				<p>第五个段落。</p>
			</div>
		<!-- （12）:read-only 	input:read-only 	选择只读属性的元素属性 -->
		<p>普通的input元素:<br><input value="hello"></p>
		<p>普通的input元素:<br><input value="hello"></p>
		<p>只读的input元素:<br><input readonly value="hello"></p>
	</body>
</html>

　　

/* （1）.class 	.aa 	选择所有class="aa"的元素 */
.aa{
	width: 24.8%;
	height: 200px;
	background-color: #666666;
	border: 1px solid #2E8B57;
	float: left;
}
/* （2）#id 	#bb 	选择所有id="bb"的元素 */
#bb{
	width: 40px;
	height: 1.875rem;
	color: blue;
	float: right;
}
/* 3）标签：根据标签名选中元素 */
span{
	height: 2em;
	font-weight: 100;
	background-color: sandybrown;
}
/* （4）复合 */
#z4,.b4{
	color: #0000ff;
}
/* （5）属性选择器 */
input[type="text" ]{
	background-color: #0000FF;
}
/* （6）:checked 	input:checked 	选择所有选中的表单元素 */
input:checked{
	width: 20px;
}
/* （7）:disabled 	input:disabled 	选择所有禁用的表单元素 */
input:disabled{
	background-color: #2E8B57;
}
/* （8）:empty 	p:empty 	选择所有没有子元素的p元素 */
p:empty{
	height: 20px;
	background-color: red;
}
/* （9）:last-child 	p:last-child 	选择所有p元素的最后一个子元素 */
p:last-child{
	width: 20px;
	color: red;
}
/* （10）:nth-child(n) 	p:nth-child(2) 	选择所有p元素的第二个子元素 */
p:nth-child(2){
	color: #0000FF;
}
/* （11）:nth-last-child(n) 	p:nth-last-child(2) 	选择所有p元素倒数的第二个子元素 */
p:nth-last-child(2){
	color: skyblue;
	background-color: #444444 !important;
}
/* （12）:read-only 	input:read-only 	选择只读属性的元素属性 */
input:read-only
{
	background-color: yellow;
}

　　效果

posted @ 2019-11-03 18:24  xiren88  阅读(155)  评论(0)    收藏  举报