Blogger Information
Blog 28
fans 0
comment 0
visits 14358
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3.21 css选择器
泰礴松的博客
Original
539 people have browsed it

表面感觉是听懂了,上手的话又感觉不是很懂~~

实例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
		#beijing1 {
			background-color: red;
			color:black;
			border-color: green;
		}#beijing2 {
			background-color: lightblue;
			color:yellow;
			border-color: brown;
		}
		.lei1{
			background-color: green;
			color:blue;
		}
		.lei2+li{

			background-color: black;
			color:red;
		}
		td[class="title"]{
			background-color: lightblue;
			color: white;
		}
		td[class~="bh"]{
			background-color: lightgreen;
			color: red;
		}
		td[class^="kt"]{
			background-color: blue;
			color:black;
		}
		td[class$="jw"]{
			font-size: small;

		}
		td[class*="xx"]{
			background-color: yellowgreen;
			font-size: larger;
		}

	</style>
</head>
<body>
	<div>标准选择器</div>
<ul>
	<li id="beijing1">我是id选择器</li>
	<li id= "beijing2">我也是id选择器</li>
	<li class="lei1">我是类选择器</li>
	<li class="lei2">我也是类选择器,我是改变我后面哥们颜色的</li>
	<li>我就是被改变颜色的</li>
</ul>	
<hr>
<div>属性选择器</div>
<table align="center" border="1" cellpadding="5">
	<tr>
		<td class="title">我是全部匹配</td>
		<td class="aa bh bb">我是包含</td>
		<td class="ktaac">我是开头</td>
	</tr>
	<tr>
		<td class="dnbjw">我是结尾</td>
		<td class="adnixxtt">我是存在</td>
	</tr>
</table>

</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例

124714931.jpg1351353428.jpg

Correction status:qualified

Teacher's comments:作业已检查! 写的很不错哦! 博客发布作业中添加了线上运行代码的新功能! 群文中找到入群必读文件夹下的博客如何提交作业.gif图下载了解!!
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