HTMLCSS小白——select复选框，标签选择器，css选择器权重

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!-- <style>
		2.页面级css
	</style> -->
	<!-- 3.外部css
	<link rel="stylesheet" type="text/css" href="放css地址的"> -->
	<style type="text/css">
		/*通配符 选择器*/
		*{
			background-color: white;

		}
		/*属性选择器*/
		[id="only"]{
			background-color: black !important; 
		}
		/*id 选择器*/
		#only{
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
		}
		/*class选择器*/
		[class="demo"]{
			background-color: blue;
		}
		.demo{
			width: 100px;
			height: 100px;
			position: absolute;
			left: 50px;
			top: 150px;
			background-color: green;
			border-radius: 10px;
		}
		.demo1{
			background-color: blue;
			top: 300px;
		}
		/*标签选择器*/
		span{
			color: red;
		}
		
	</style>
</head>
<body>
	<!-- <div style="1.行间样式"></div> -->


	<!-- 选择器 -->
	<!-- 1.id选择器一一对应的 -->
	<div id="only">123</div>
	<!-- 2.class选择器多对多 -->
	<div class="demo">1233</div>
	<div class="demo demo1"></div>
	<!-- 3.标签选择器 -->
	<span>23123</span>
	<!-- 4.通配符选择器 -->
	<!-- 优先级 !important infinity > 行间样式 > id > class = 属性选择器 > 标签选择器 > 通配符选择器-->
	<!-- css权重决定优先级比值大  256进制-->



	<form method="get" action="链接">
	<select name="province">
		<option value="beijing">beijing</option>
		<option value="beijing">yinchuang</option>
		<option>ningxia</option>
		<!-- 有value 的输出value 没value的输出innerHTML -->
	</select>
		<!-- 复选框 -->
		<!-- 1.apple<input type="checkbox" name="friuit" value="apple" checked=""> -->
		<!-- 默认选中 -->
		<!-- 2.banana<input type="checkbox" name="friuit" value="banana"> -->
		<!-- 3.orange<input type="checkbox" name="friuit" value="orange"> -->
		<input type="submit" name="">

	</form>

</body>
</html>

不会java不改名

发布了82 篇原创文章 · 获赞 21 · 访问量 2012

私信关注

HTMLCSS小白——select复选框，标签选择器，css选择器权重

猜你喜欢