博客列表 >3月21日作业

3月21日作业

张鑫的博客
张鑫的博客原创
2018年03月22日 17:45:561005浏览

基本选择器代码:

实例

<!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

上一条:321-CSS选择器下一条:3.20作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议