CSS选择器分类

前端开发学习笔记 专栏收录该内容
14 篇文章 0 订阅

选择器 【掌握】

一、基本选择器【重点】

1.标签选择器 权值1

标签选择器: 利用标签名称做为选择器的名称,可以选择页面上的一种标签
格式: 标签名

<style type="text/css">
		p {
			color: red;
		}
        div {
		    color: red;
		}
</style>

2.ID选择器 权值100

ID选择器: 选择页面上唯一的标签,
格式: #id属性的值

<style type="text/css">
		#header {
			color: blue;
		}
        #header {
			color: red;
		}
        #header {
			color: yellow;
		}
</style>
<body>
        <div id="header">我是头部</div>
		<div id="main">我是主体</div>
		<div id="footer">我是尾部</div>
</body>

3.类选择器 【开发中引用最常见】 权值10

类选择器: 利用标签中的class属性的值作为选择器的名称,可以选择页面上的一类标签,这里的一类是由开发者自己来定义的,用户也可以使用复合属性来对标签归类,class的名称在页面中可以重复

格式: .class属性的值

<style type="text/css">
			.a {
				color: red;
			}
			
			.b {
				color: green;
			}

            .c {
                color:blue
}
</style>
<body>   
		 <h1 class="a">王宝强</h1>
         <span class="b">PGONE</span>
		 <p class="c">班长</p>
		 <!-- 复合属性 -->
		 <p class="a b">李小璐</p>
</body>

三种选择器的优先级 【掌握】
如果多个基本选择器作用于同一个标签,那么优先级顺序是:
Id选择器 > 类选择器 > 标签选择器

选择器的权值 【了解】
选择器 权值 描述
style = “” 1000 标签内引入
id 100 ID选择器
.class 10 类选择器
tag name 1 标签名选择器

如果多个选择器的优先级相同时,根据浏览器的渲染工作原理,从上向下渲染。也即谁离结构越近,谁的优先级越高。

三种基本选择器还可以互相嵌套使用,使用规则如下
1.如果中间有标签选择器,那么标签选择器必须出现在最前面
2.如果没有标签选择器,那么随意

二、高级选择器 【掌握】

1.通用选择器 【掌握】

选择页面中所有的标签,通常用来设置页面的整体样式,例如外边距和内边距

<style type="text/css">	
		/* 选择页面中所有的标签 */
		* {
			padding: 0px;
			margin: 0px;
		}
</style>

2.组合选择器 【掌握】

选择页面中多个选择器,每个选择器使用逗号隔开,一般用来抽取多个标签的共同样式
div, span,ul,li {
color: white;
background: black;
}

3.层次选择器 【掌握】

3.1 后代选择器
格式: E F 选择E标签下面所有的F标签
3.2 子代选择器
格式: E>F 选择E标签下面第一层中所有的F子标签
3.3 相邻兄弟选择器
格式: E+F 选择E标签后面同辈的紧邻的F标签
3.4 通用兄弟选择器
格式: E~F 选择E标签后面同辈的所有F标签

代码示例

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3层次选择器</title>
	<style type="text/css">

		/*让所有的p标签和ul标签加上边框*/
		p,ul{
			border: 1px solid red;  /*边框属性*/
		}

		/*后代选择器: 给body下面所有的p标签加上背景*/
		body p {
			background-color: red;
		}
		/*子选择器 给body下面的一级子标签p标签加上背景*/
		body>p {
			background-color: red;
		}
		/*相邻兄弟选择器: 给.active所对应的p标签 紧邻的p标签设置背景*/
		.active+p {
			background-color: red;
		}
		/*通用兄弟选择器: 给.active对应的p标签 后面的所有兄弟标签p标签设置背景*/
		.active~p {
			background-color: red;
		}
	</style>
</head>
<body>
	<p class="active">1</p>
	<p class="active2">2</p>
	<p>3</p>
	<ul>
		<li>
			<p>4</p>
		</li>
		<li>
			<p>5</p>
		</li>
		<li>
			<p>6</p>
		</li>
	</ul>

</body>
</html>

4.结构伪类选择器 【掌握】

4.1 E F: first-child 选择E标签下面第一个子标签F
4.2 E F:last-child 选择E标签下面最后一个子标签F
4.3 E F:nth-child(n) 选择E标签下面第N个子标签F
4.4 E F:first-of-type 选择E标签下面第一个类型是F的子标签
4.5 E F:last-of-type 选择E标签下面最后一个类型是F的子标签
4.6 E F:nth-of-type(n) 选择E标签下面第N个类型是F的子标签
4.7 nth-of-type(odd) 选择E标签下面偶数个类型是F的子标签
4.8 nth-of-type(even) 选择E标签下面奇数个类型是F的子标签
代码示例

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3结构伪类选择器</title>
	<style>
		ul,li,p,h2 { border: 1px solid red;}
		/*ul的第一个子元素*/
		.u li:first-child {
			background-color: red;
		}
		/* .li1 {
			background-color: orange;
		} */
		/*ul的最后一个子元素*/
		ul li:last-child{
			background-color: blue;
		}

		/*body下面的第2个p元素*/
		body p:nth-child(2) {
			background-color: green;
		}
		/*选择到父级里的第一子元素p*/
		body p:nth-of-type(1) {
			background-color: #00FF00;
		}

		/*父元素里第2个类型为p的元素*/
		body p:nth-of-type(2) {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h2>结构伪类选择器</h2>
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul class="u">
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
</body>
</html>

5.属性选择器 【了解】

5.1 E[attr] : 选择具有属性attr的元素
5.2 E[attr=val]: 选择属性attr等于val的元素
5.3 E[attr^=val]: 选择属性attr以val开头的元素
5.4 E[attr$=val]: 选择属性attr以val结尾的元素
5.5 E[attr*=val]: 选择属性attr包含val的元素

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			a {
				display: inline-block;
				width: 45px;
				height: 45px;
				background-color: #AAAACC;
				border-radius: 8px;
				margin-left: 10px;
				text-align: center;
				line-height: 45px;
				text-decoration: none;
				font-size: 20px;
				font-weight: 900;
			}
				
			/* 选中所有含有id属性的链接背景为红色*/
			a[id] {
				background-color: red;
			}
			/* 选中所有class属性等于links item的链接背景为黑色*/
			a[class="links item"] {
				background-color: black;
			}
			/*注意:如果属性值中有特殊字符,那么必须使用双引号包裹*/
			/*选中所有href中以http开头的链接为蓝色*/
			a[href^="http://"] {
				background-color: blue;
			}
			
			/*选中所有href中以png结尾的链接为绿色*/
			a[href$=png] {
				background-color: green;
			}
	
			/* 选中包含class中包含item的链接为橘色*/
			a[class*=item]{
				background-color: orange;
			}
			
		</style>
	</head>
	<body>
		<p class="demo">
	    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
	    <a href="" class="links active item" title="test website" target="_blank" >2</a>
	    <a href="sites/file/test.html" class="links item"  >3</a>
	    <a href="sites/file/test.png" class="links item" > 4</a>
	    <a href="sites/file/image.jpg" class="links item" >5</a>
	    <a href="efc" class="links item" title="website link" >6</a>
	    <a href="/a.pdf" class="links item" >7</a>
	    <a href="/abc.pdf" class="links item" >8</a>
	    <a href="abcdef.doc" class="links item" >9</a>
	    <a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
	</body>
</html>

6.伪类选择器 【掌握】

6.1 E:link 元素E未访问默认样式
6.2 E:visited 元素E访问后样式
6.3 E:hover 元素E鼠标悬浮样式
6.4 E:active 元素E鼠标点击未松开的样式
代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a {
				display: inline-block;
				width: 45px;
				height: 45px;
				background-color: #AAAACC;
				border-radius: 8px;
				margin-left: 10px;
				text-align: center;
				line-height: 45px;
				text-decoration: none;
				font-size: 20px;
				font-weight: 900;
			}
			
			/* 伪类选择器 */
			a:link {
				background-color: red;
			}
			
			a:visited {
				background-color: blue;
			}
			
			a:hover {
				background-color: yellow;
			}
			
			a:active {
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
		<a href="" class="links active item" title="test website" target="_blank" >2</a>
		<a href="sites/file/test.html" class="links item"  >3</a>
		<a href="sites/file/test.png" class="links item" > 4</a>
	</body>
</html>

总结: CSS选择器学习目标就是能够灵活地使用各种选择器选择不同的标签,并且在不使用id或者class等属性的时候也能够查找到你想要的标签,同时也要学会灵活地将不同的选择器嵌套在一起使用,掌握到这个程度就可以了。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值