Blogger Information
Blog 14
fans 0
comment 0
visits 8428
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0321
王报喜的博客
Original
379 people have browsed it

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css选择器</title>
	<style type="text/css">
		/*id选择器*/
		#name{
			/*color: blue;*/
		}
		/*类选择器*/
		.three{
			/*color: white;
			background-color: black;*/
		}
		/*通配选择器*/
		ul *{
			background-color: skyblue;
		}
		/*相邻选择器*/
		.three +li{
			/*background-color: coral;*/
		}

		/*兄弟选择器*/
		#item2 ~ li {
			/*background-color: yellow;*/
		}
		/*子元素选择器*/
		div > p{
			background-color: yellow;
		}
		/*子元素选择器*/
		select > option{
			/*color: white;*/
		}
		/*父子选择器s*/
		ul li{
			/*background-color: black;*/
			color: white;
		}

		ul [id]{
			/*color: skyblue;*/
		}

		[class="three"]{
			color: red;
		}

		p[class ^="m"]{
			/*color: skyblue;*/
		}
		li[id $="o"]{
			color: red;
		}
	</style>
</head>
<body>
		<ul>
			<li id="name">1</li>
			<li id="two">2</li>
			<li class="three">3</li>
			<li>
				<select>
					<option id="xing">wang</option>
					<option id="ming">shuo</option>
					<option>wang</option>
					<option class="ming">bao</option>
					<option class="three">xi</option>
				</select>
			</li>
			<li id="item2">兄弟选择器</li>
			<li>5</li>
			<li>5</li>
			<li>5</li>
			<li><p>5</p></li>
		</ul>

		<div>
			<p id="item1">我是第一个div里的第一个div</p>
			<p class="ming">我是第一个div里的第二个div</p>
		</div>
		<div>
			<p id="item11">我是第二个div里的第一个div</p>
			<p class="mingg">我是第二个div里的第二个div</p>
		</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄代码:

QQ截图20180322151432.jpg


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post