Blogger Information
Blog 33
fans 3
comment 0
visits 22837
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20180321-前端-作业
MrZ的博客
Original
564 people have browsed it

基本属性实例

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
	<title>基本选择器</title>
</head>
<style type="text/css">
	/*选择全部有ID*/
*[id]
{
	/*background-color: green;*/
}


	/*选择名值*/
li[clsss="c3"]{
/*	background-color: blue;*/
}
li[class~=d1]{
  /* background-color: red;*/
}

li[class^=d]{
	background-color: black;
}
</style>


<body>

<ul>
	<li id="i2">我是标签一</li>
<li class="c2">我是标签二</li>
<li class="c2">我是标签三</li>
<li class="c3">我是标签四</li>
<li class="d1">我是标签五</li>
<li class="d2">我是标签六</li>
<li id="i3">我是标签七</li>
<li id="i4">我是标签八</li>
</ul>
</body>
</html>

运行实例 »

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




属性选择器


实例

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
	<title>属性选择器</title>
</head>
<style type="text/css">
	/*选择全部有ID*/
*[id]
{
	/*background-color: green;*/
}


	/*选择名值*/
li[clsss="c3"]{
/*	background-color: blue;*/
}
li[class~=d1]{
  /* background-color: red;*/
}

li[class^=d]{
	background-color: black;
}
</style>


<body>

<ul>
	<li id="i2">我是标签一</li>
<li class="c2">我是标签二</li>
<li class="c2">我是标签三</li>
<li class="c3">我是标签四</li>
<li class="d1">我是标签五</li>
<li class="d2">我是标签六</li>
<li id="i3">我是标签七</li>
<li id="i4">我是标签八</li>
</ul>
</body>
</html>

运行实例 »

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

1111.jpg222.jpg


Correction status:qualified

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