Blogger Information
Blog 33
fans 0
comment 0
visits 24706
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月21日作业
张鑫的博客
Original
1013 people have browsed it

基本选择器代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
	    /*标签选择器*/
		ul{
			background-color:green;
		}
		/*ID选择器*/
		#cang{
			color:red;
		}
		/*类选择器*/
		.riben{
			background-color: blue;
		}
        /*父子选择器*/
        ul li{
        	color: white;
        }
        /*通配选择器*/
        ul>*{
        	background-color:gray; 
        }
        /*子元素选择器*/
        ul>li{
        	color: black;
        }
        /*相邻兄弟选择器*/
        #shui+li{
        	background-color: lightgreen;
        }
        /*选择全部兄弟*/
        #shui~li{
        	background-color: lightgreen;
        }

	</style>
</head>
<body>
	<ul type="none">
		<li id="cang">苍老师</li>
		<li class="riben">波多野结衣</li>
		<li class="riben">早乙女露依</li>
		<li>小川阿佐美<li>
		<li>大桥未久</li>
		<li>樱井莉亚</li>
		<li id="shui">水菜丽</li>
		<li>北野望</li>
		<li>桃谷绘里香</li>
		<li>上原瑞穗</li>
		<li>天海翼</li>
		
	</ul>
</body>
</html>

运行实例 »

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

属性选择器代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
    <style type="text/css">
    	/*选中所有有id属性的元素*/
    	*[id]{
    		color:red;
    	}
    	/*根据属性的名和值来选*/
    	li[class="riben"]{
    		background-color: red;
    	}
    	/*选择class属性中包括all单词的元素*/
    	li[class~="all"]{
    		color:blue;
    	}
    	/*选择以"al"开头的类样式的元素*/
    	li[class ^="h"]{
    		background-color: red;
    	}
    	/*选择以"n"结尾的类样式的元素*/
    	li[class$="n"]{
    		color: blue;
    	}

    	/*选择包含e的类样式的元素*/
    	li[class*="e"]{
    		background-color: lightblue;
    	}
    </style>

</head>
<body>
	<ul type="none">
		<li id="cang">苍老师</li>
		<li class="riben">波多野结衣</li>
		<li class="all riben">早乙女露依</li>
		<li class="riben all">小川阿佐美<li>
		<li>大桥未久</li>
		<li>樱井莉亚</li>
		<li id="shui">水菜丽</li>
		<li>北野望</li>
		<li class="hhaa">桃谷绘里香</li>
		<li class="hhpn">上原瑞穗</li>
		<li>天海翼</li>
		
	</ul>
</body>
</html>

运行实例 »

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

手抄作业:

03211.jpg03212.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