HTML5开发系列（3）之 CSS常用的选择器

最新推荐文章于 2019-09-16 19:11:01 发布

启之灵

最新推荐文章于 2019-09-16 19:11:01 发布

阅读量237

点赞数

分类专栏： Html 5 文章标签：选择器 html

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/81915732

版权

Html 5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用的选择器</title>
		<style type="text/css">
			/*
			 * 元素选择器：为所有的p设置一个样式，字体为红色；
			 * 元素选择器,选择页面中的所有的制定原色；选择所有的p元素；
			 */
			p{
				color: red;
			}
			h1{
				color: blue;
			}
			
			
			/*
			 * id选择器：通过id选择指定的元素；
			 * 语法：#id值{}
			 */
			#P1{
				font-size: 40px;
			}
			
			/**
			 * class 选择器：为元素分组，然后给组设置样式
			 * .class属性值{}
			 */
			.P2{
				color: green;
				font-size: 30px;
			}
			.hello{
				font-size: 100px;
			}
			.demo{
				color: royalblue;
			}
			
			/**
			 * 分组选择器:为多个选择器设置相同的属性；
			 * 语法：选择器1,选择器2,选择器3{}
			 */
			#P1,.P2,h1{
				background-color: yellow;
			}
			
			/**
			 * 通配选择器：选择了页面中的所有元素；
			 */
			*{
				background-color: black;
			}
			
			
			/**
			 * 复合选择器：多条件选择器；同时满足多个条件的元素设置样式；
			 * 语法：选择器1选择器2选择器n{}多个条件紧紧的挨着；
			 * 如果元素名作为条件必须写在最前面；
			 * 下面就是两个条件，class为P2，和 span元素；
			 */
			span.P2{
				font-size: 100px;
			}
		</style>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>床前明月光</p>
		<p id="P1">床前明月光</p>
		
		<!--为元素分组，是用class属性，class是可以重复的，但是id是不能重复
			一个元素可以设置多个class值，之间可以通过空格隔开；后设置的class值会覆盖之前的相同的属性；
		-->
		<p class="P2 hello demo">床前明月光</p>
		<p class="P2">床前明月光</p>
		<p class="P2">床前明月光</p>
		
		
		<p id="P3">床前明月光</p>
		<p>床前明月光</p>
		<span class="P2">床前明月光</span>
	</body>
</html>

子父类关系选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>父子关系选择器</title>
		<style type="text/css">
			/**
			 * 后代选择器：指定后代中的某个或者某类元素设置样式；
			 * 祖先元素  后代元素{}
			 */
			div p span{
				color: red;
			}
			#d1 span{
				color: green;
			}
			
			/**
			 * 子元素选择器：仅限给子类设置样式
			 * ie《=6 一下不支持这种选择器；
			 * 而且子类很容易改变，所以在开发中很少使用；
			 */
			div > p{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<span>我是span</span>
			<p>
				我是p
				<span>我是p中的span</span>
			</p>
		</div>
		<div id="d1">
			<span>div的兄弟span</span>
		</div>
	</body>
</html>

为标签的某一种特殊的状态设置的选择器：伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/**
			 * 伪类选择器专门是为元素的特殊状态设置的一种选择器；
			 * 例如：点击，选中，鼠标滑过等等；
			 */
			/**
			 * 为没有访问过的超链接设置选择器
			 */
			a:link{
				color: blue;

			}
			
			/**
			 * 访问过的连接显示样式；
			 * 根据浏览器的历史记录判断的
			 * visited涉及到了用户的隐私所以只能设置字体的颜色；其他的属性都不能设置；
			 * 但是在ie6浏览器是可以设置其他的属性的；
			 */
			a:visited{
				color: red;
				
			}
			/**
			 * 表示当鼠标移动到连接上的时候会变颜色；
			 */
			a:hover{
				color: green;
			}
			
			/**
			 * 表示连接被点击的状态；
			 */
			a:active{
				color: goldenrod;
			}
			
			/**
			 * hover和active也是给超链接以外的标签进行设置样式
			 * 但是ie6 是不支持对超链接以外的标签进行设置样式的；
			 */
			
			
			/**
			 *  获取焦点的时候
			 * 文本输入框获取焦点的时候，背景颜色会放生改变；
			 * ie6 不支持；
			 */
			input:focus{
				background-color: red;
			}
			
			/**
			 * 这种写法是兼容大部分浏览器
			 * ie6肯定不行，但是火狐也不行；需要另一种写法
			 */
			#p1::selection{
				background-color: yellowgreen;
			}
			/*这种协防是兼容火狐浏览器的*/
			#p1::-moz-selection{
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">訪問過的鏈接</a>
		<br />	
		<br />
		<a href="http://www.baidu.com1111">沒有訪問過的鏈接</a>
		<br />	
		<br />
		<input type="text" />
		<br />	
		<br />
		<p id="p1">我是一个段落</p>
	</body>
</html>

伪元素选择器：给元素特定的位置设置样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 伪元素选择器：给一个标签特定的位置设置样式；比如给段落的收个字设置样式；
			 * first-line首行；
			 */
			p:first-letter{
				color: red;
				font-size: 50px;
			}
			
			/**
			 * before 是在段落的最前面添加要的内容，但是这部分内容不能被选中
			 * 必须要和content联合使用才可以的；
			 */
			p:before{
				content: "111111111111";
				color: red;
			}
			/*
			 * 同理肯定会有after这个属性
			 * 在段落的最后面，但是也是不能被选中的；
			 */
			p:after{
				content: "222222222222";
				color: orange;
			}
		</style>
	</head>
	<body>
		<p>我是一个段落</p>
	</body>
</html>

属性选择器，根据标签中的属性设置的选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/**
			 * 表示是p元素并且还有title属性的p元素；
			 */
			p[title]{
				color: red;
			}
			/**
			 * 表示p元素带有title=“meinv”的p元素；
			 */
			p[title="meinv"]{
				color: yellow;
			}
			
			/*
			 * 表示title以han的开头的p元素；
			 */
			p[title^="han"]{
				color: blue;
			}
			
			/*
			 * 表示以title中的内容是ld结尾的p元素；
			 */
			p[title&="ld"]{
				color: orange;
			}
			
			/*
			 * 表示title的内容中包含jav的p元素；
			 */
			p[title*="jav"]{
				color: green;
			}
		</style>
	</head>
	<body>
		<!--
        	title属性是当鼠标移动上去后弹出的提示内容；
        -->
		<p title="hello">我是一个段落</p>
		<p title="meinv">我是一个段落</p>
		<p title="hanzi">我是一个段落</p>
		<p title="hello wold">我是一个段落</p>
		<p title="hello java">我是一个段落</p>
	</body>
</html>

子类选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 表示在子类元素中第一个元素并且还是p元素
			 */
			p:first-child{
				color: red;
			}
			/*
			 * 表示在所有的子元素中最后一个元素，并且还是p元素；
			 */
			p:last-child{
				color: blue;
			}
			/*
			 * 表示在所有子元素中第三元素，并且还是p元素；
			 */
			p:nth-child(3){
				color: green;
			}
			
			/*
			 * 表示在div中的第一元素并且还是p元素；
			 */
			div>p:first-child{
				color: orange;
			}
			
			/*
			 * 表示在子元素中的第一个p元素，
			 * 同理 last-of-type表示在子元素中的最后一个p元素
			 * 同理 nth-of-type表示在子元素中的第几个p元素；
			 */
			p:first-of-type{
				color: olive;
			}
		</style>
	</head>
	<body>
		<span>hahah</span>
		<p>我是一个p元素</p>
		<p>我是一个p元素</p>
		<div>
			<p>我是div中p元素</p>
		</div>
		<p>我是一个p元素</p>
		<p>我是一个p元素</p>
		<p>我是一个p元素</p>
	</body>
</html>

兄弟选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 表示span后面 挨着的一个元素，并且还是p元素；
			 */
			span + p{
				color: orange;
			}
			
			/*
			 * 表示span后面的所有p元素；
			 */
			span ~ p{
				color: green;
			}
			
		</style>
	</head>
	<body>
		<p>我是一个p元素</p>
		<p>我是一个p元素</p>
		<p>我是一个p元素</p>
		<span>wo shi yi ge span</span>
		<div>wo shi div</div>
		<p>我是一个p元素</p>
		<p>我是一个p元素</p>
		<p>我是一个p元素</p>
	</body>
</html>

伪类否定选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/**
			 * 表示除了class=hello的p，其他的p元素设置字体颜色
			 */
			p:not(.hello){
				color: red;
			}
		</style>
	</head>
	<body>
		<p>我 是一个p元素</p>
		<p>我 是一个p元素</p>
		<p class="hello">我 是一个p元素</p>
		<p>我 是一个p元素</p>
		<p>我 是一个p元素</p>
	</body>
</html>