Blogger Information
Blog 10
fans 0
comment 0
visits 4610
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月21日作业
国服最帅程序员
Original
857 people have browsed it

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器练习</title>
	<style type="text/css">
	/*id选择器:选择页面中唯一的元素,推荐同一个id标识符只允许用一次*/
	    li{
	    	margin-top:20px;
	    }
	    div{
	    	margin-top:20px;
	    }
		#a{
			background-color: red;
		}
	/*类选择器:选择页面中具有同一类样式的全部元素*/
		.b{
			background-color: green;
		}
	/*父子选择器:元素之间是层级的关系,所选元素有共同的父级*/	
		ul li a{
			background-color: lightgreen;
		}
	/*通配选择器:选择指定父级下面的所有层级的元素*/	
	    b *{
	    	border: 1px solid black;
	    }
	/*子元素选择器 >: 选择父元素下所有的li元素,等价于标签选择器,所以它的优先级低于class,id*/
		li > strong {
			background-color: blue;
		}
    /*相邻兄弟选择器 +:仅选择相对于它后面的第一个兄弟节点 */
		.c + li {
			background-color: black; 
		}
		
    /*全部兄弟选择器 ~ :选择相对于它后面的全部兄弟节点 */
		#d ~ li {
			background-color: coral; 
		}
	/*根据属性名来选择:例如id属性*/
		*[id] { 
			background-color: red;
		}
	/*根据属性名与值来选择:例如选择class="green"的元素*/
		div[class="f"] {
			background-color: lightgreen;
		}

	/*选择class属性值中包括指定单词的元素*/
		div[class ~= "bc"] {
			background-color: brown;
		}
		
	/*选择以'ph'字母开头的class类样式元素*/
		div[class ^= "ev"] {
			background-color: coral;
		}

	/*选择以's'结尾的类样式元素*/
		div[class $= "gn"] {
			background-color: lime;  
		}

	/*选择属性值中包括指定字母'e'的类样式元素:;*/
		div[class *= "z"] {
			background-color: yellowgreen;  
		}

	</style>
</head>
<body>
	<ul type="none">
		<li id="a">id选择器</li>
		<li><b><a href="">统配选择器</a></b></li>
		<li class="b">类选择器</li>
		<li><strong>子元素选择器</strong></li>
		<li class="b">类选择器</li>
		<li><a href="">父子选择器练习</a></li>
		<li class="c">相邻兄弟选择器</li>
		<li id="d">相邻兄弟选择器</li>
		<li>全部兄弟选择器</li>
		<li>全部兄弟选择器</li>
	</ul>
	<div id="e">属性名选择器</div>
	<div class="f">属性名属性值</div>
	<div class="hds bc">包括指定单词的元素</div>
	<div class="sdf bc">包括指定单词的元素</div>
	<div class="evs">字母开头的元素</div>
	<div class="evy">字母开头的元素</div>
	<div class="stgn">字母结尾的元素</div>
	<div class="ygn">字母结尾的元素</div>
	<div class="xyz">包含字母的元素</div>
	<div class="cyez">包含字母的元素</div>	
</body>
</html>

运行实例 »

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

手抄:686435299828377768.jpg305299350572701346.jpg

490818244242194558.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