简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 321作业：CSS中的基本选择器和属性选择器——2018年3月28日1时50分
Blogger Information
Blog 7
fans 0
comment 0
visits 4287
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
321作业：CSS中的基本选择器和属性选择器——2018年3月28日1时50分
漫云的博客
Original
576 people have browsed it

实例

通过类选择器:选择页面中具有同一类样式的全部元素；通过父子选择器:元素之间是层级的关系,所选元素有共同的父级；通过通配选择器:选择指定父级下面的所有层级的元素；通真抓实干子元素选择器 : 选择父元素下所有的li元素,等价于标签选择器,它的优先级低于class；通过相邻兄弟选择器 +:仅选择相对于它后面的第一个兄弟节点；通过全部兄弟选择器 ~ :选择相对于它后面的全部兄弟节点，这些都可以达到基本选择器所要达到的功能。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.基本选择器</title>
	<style type="text/css">
		/*元素选择器*/
		ul {   
			padding: 0;
			margin: 0;
			width: 450px;
			border: 1px dashed #666;
			padding: 10px 5px;
		}

		ul:after {  /*子块撑开父块*/
			content:'';  /*在子元素尾部添加空内容元素*/
			display: block;  /*并设置为块级显示*/
			clear:both;   /*清除二边的浮动*/
		}
		
		li { 
			list-style: none; /*去掉默认列表项样式*/
			float: left;  /*左浮动*/
			width: 40px;  /*设置宽度*/
			height: 40px; /*设置高度*/
			line-height: 40px; /*文本垂直居中*/
			text-align: center; /*文本水平居中*/
			border-radius: 50%; /*设置边框圆角*/				
			background: lightgreen; /*背景色天蓝*/
			margin-right: 5px; /*每个球之间的右外边距*/
		}
		/*id选择器:选择页面中唯一的元素,推荐同一个id标识符只允许用一次*/
		#item1 {
			/*background-color: red;*/
		}

		/*类选择器:选择页面中具有同一类样式的全部元素*/
		.green {
			/*background-color: lightgreen;*/
		}
		
		/*父子选择器:元素之间是层级的关系,所选元素有共同的父级*/
		ul li {  /*层级关系用空格表示*/
			color: white;
		}

		/*通配选择器:选择指定父级下面的所有层级的元素*/
		ul * {
			/*border: 1px solid black;*/
		}

		/*子元素选择器 >: 选择父元素下所有的li元素,等价于标签选择器,所以它的优先级低于class,id*/
		ul > li {   /*等价于: ul > * {} */
			/*background-color: blue;*/
		}

		/*相邻兄弟选择器 +:仅选择相对于它后面的第一个兄弟节点 */
		#item2 + li {
			/*background-color: black; /*只有第7个小球变黑*/*/
		}
		
		/*全部兄弟选择器 ~ :选择相对于它后面的全部兄弟节点 */
		#item2 ~ li {
			/*background-color: coral; /*亮橙色*/*/
		}




	</style>
</head>
<body>
	<ul>
		<li id="item1">1</li>
		<li class="green">2</li>
		<li class="green">3</li>
		<li class="">4</li>
		<li>5</li>
		<li id="item2">6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>
</html>

运行实例 »

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

实例

根据属性名来选择:例如id属性，等价于:  li[id]，该还可以根据属性名与值来选择:例如选择class="green"的元素。

选择class属性值中包括指定单词的元素例如：li[class ~= "red"] ；选择以'ph'字母开头的class类样式元素，还有选择以's'结尾的类样式元素。通过这些，都可以达到属性选择器所要达到的效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.属性选择器</title>
	<style type="text/css">
		/*元素选择器*/
		ul {   
			padding: 0;
			margin: 0;
			width: 450px;
			border: 1px dashed #666;
			padding: 10px 5px;
		}

		ul:after {  /*子块撑开父块*/
			content:'';  /*在子元素尾部添加空内容元素*/
			display: block;  /*并设置为块级显示*/
			clear:both;   /*清除二边的浮动*/
		}
		
		li { 
			list-style: none; /*去掉默认列表项样式*/
			float: left;  /*左浮动*/
			width: 40px;  /*设置宽度*/
			height: 40px; /*设置高度*/
			line-height: 40px; /*文本垂直居中*/
			text-align: center; /*文本水平居中*/
			border-radius: 50%; /*设置边框圆角*/				
			background: lightblue; /*背景色天蓝*/
			margin-right: 5px; /*每个球之间的右外边距*/
		}
		
		/*根据属性名来选择:例如id属性*/
		*[id] {   /*等价于:  li[id]*/
			/*background-color: red;*/
		}

		/*根据属性名与值来选择:例如选择class="green"的元素*/
		li[class="orange"] {
			/*background-color: lightgreen;*/
		}

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

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

		/*选择属性值中包括指定字母'e'的类样式元素:;*/
		li[class *= "e"] {
			background-color: blue;  /*234背景为黄绿色*/
		}




	</style>
</head>
<body>
	<ul>
		<li id="item1">1</li>
		<li class="green">2</li>
		<li class="green red">3</li>
		<li class="red">4</li>
		<li>5</li>
		<li id="item2">6</li>
		<li class="php">7</li>
		<li class="php css">8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>
</html>

运行实例 »

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

322_1.jpg321_2.jpg

总结：学习了下面的内容：

1. css中的基本术语；

2. CSS的三种引入方式；

3.基本选择器；

4.属性选择器；

5. 了解了伪类选择器。

通过学习更清楚地了解到，html只是标签，对网页样式不够完善，而且通过学习CSS，明白了，可以把CSS当作是模式与标签分离，以前还真不了解，再看了一遍上课录像，心里明了，并且理解更深。

Correction status：Uncorrected

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！