前端基础知识梳理——css选择器

最新推荐文章于 2024-05-04 20:39:06 发布

VICHOU_FA

最新推荐文章于 2024-05-04 20:39:06 发布

阅读量451

点赞数

分类专栏：前端前端知识梳理文章标签：前端

本文链接：https://blog.csdn.net/VICHOU_FA/article/details/80367083

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端知识梳理

5 篇文章 0 订阅

订阅专栏

前言

css(cascading style sheet)层叠样式表，网页组成中处于表现层，用于控制页面中的元素样式。css可以用来为网页创建样式表，通过样式表可以对网页进行修饰。所谓层叠，可以将网页想想成一层一层的结构，层次高的覆盖层次低的，而css可以分别给各个层次设置样式。

css引入方式

（1）行内样式，可以直接将样式写到标签内部的style属性中，这样不用编写选择器，直接编写即可。

<p style="background-color:red"></p>

这种方式比较简单，可以准确定位到标签元素。当时将css样式写到html标签内部，导致网页表现与结构耦合，同时导致样式不能复用。

（2）内部样式表，写在网页内部的样式表，可以直接将样式写到<style></style>标签中

<style>
    p{color:red}
</style>

这种方式使css独立于html代码，而且同事为多个元素设置样式，达到样式的复用。

（3）外部样式表，同过外部样式文件，然后通过<link>标签引入网页中。

<link rel="stylesheet" type="text/css" href="style.css"></link>

这种方式将样式表放到页面外面，可以在多个网页中引入，同事浏览器加载时候可以使用缓存，这是开发中使用最多的方式。

css选择器

选择器（selector），会告诉浏览器：网页上的哪些元素需要设置什么样的样式

（1）基础选择器

元素选择器（标签选择器）：通过标签名字来从页面中选取指定元素。语法：标签名称{样式}
类选择器：通过元素的class属性从网页中选取指定的元素。语法： .className{样式}
id选择器：通过元素的class属性从网页中选取指定的元素。语法： #id{样式}
复合选择器：可以使用多个选择器，这样就可以选择同时满足多个选择器的元素，这种属于“与”关系。语法：选择器1选择器2{样式} 选择器与选择器之间没有空格。
群组选择器：多个选择器以‘，’分隔，用于选择多个选择器，这种属于“或”关系。语法：选择器1，选择器2{样式}
通用选择器：*{}，用于选择所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		 /* 元素/便签选择器 */
		 p { background-color: yellowgreen; }
		 /*类选择器 */
		 .class1 { color:red; }
		 /*id选择器*/
		 #id1 { color:green; }
		 /*复合选择器*/
		 div.class2 {color:yellow;}		 
		 /* 群组选择器*/
		 .class3,.class4{ color: blue; }
		 /*通用选择器 */
		 *{font-size: 20px;}
	</style>
	<body>
		<p>这个是测试 元素/标签选择器</p>
		
		<span class="class1">这是测试类选择器</span>
		<br/>
		<span id="id1">这是测试id选择器</span>
		
		<div class="class2">
			<span>这是测试复合选择器</span>
		</div>

		<span class="class3"> 群组选择器  选择器1</span>
		<br/>
		<span class="class4"> 群组选择器  选择器2</span>
	</body>
</html>

（2）后代选择器与子选择器

html是一个结构化语言，很容易从编写的外观上看出元素标签之间的父子兄弟关系。元素之间的关系有祖先元素，父元素，子元素，后代元素，兄弟元素。css选择器中也有针对这种关系的选择器

后代选择器后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。语法：祖先元素后代元素后代元素{}
子元素选择器选中指定父元素的子元素。语法：父元素>子元素{} 注意:这个在IE6以及之前版本中不支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*后代元素选择器  用于选择后代元素将p去掉div中所有的<span>元素颜色都为红色*/	
			div p span {
				color:red;
			}
			/*子元素选择器：用于选择子元素*/
			#div2 > span {
				color:blue;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				<span>div的后代1</span><br />
				<span>div的后代2</span>
			</p>
			<span>div的后代3</span>
		</div>
		
		<div id="div2">
			<span>这是div2的子元素</span>
		</div>
	</body>
</html>

（3）兄弟元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 选取之后的所有兄弟元素
			 */
			span~p {
				color:green;
			}
			/*选取直接兄弟元素，第二个选择器对应元素是第一个的弟弟*/
			span + p {
				color:red;
			}
			
		</style>
	</head>
	<body>
		<p>这是p1</p>
		<p>这是p2</p>
		<p>这是p3</p>
		<span>这是span</span>
		<p>这是p4</p>
		<p>这是p5</p>
		<p>这是p6</p>
	</body>
</html>

（4）伪类选择器

有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标画过的的链接。css为他们提供给一些选择器：伪类和伪元素。伪类描述为标签所处的状态似乎更让人理解一些。

比如常见的链接标签对应的伪类有：

正常状态下的链接 a:link 点击后的链接 a:visited
鼠标划过的链接 a:hover 鼠标正在点击的链接 a:active

还有其他的一些伪类：

获取焦点 :foucs 选中的元素 ::selection （注意是两个分号）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		    /*正常状态下的链接*/ 
			a:link{color:blue;}
			/*访问过的链接*/
			a:visited{color:red;}
			/*鼠标移入的链接 */
			a:hover{color:orange;}
			/*鼠标点住不放的链接*/
			a:active{color:yellow;}
			/*选中元素,在火狐浏览器中要用-moz-sellection */
			span::selection{background-color:yellow;}
			span::-moz-selection{background-color:yellow;}
		</style>
	</head>
	<body>
		<a href="#">这是一个链接</a>
		<p><span>这是一段文字</span></p>
	</body>
</html>

（5）伪元素选择器

使用伪元素表示元素中特殊的位置，比如段落中的第一个字，第一句话等。

比如，给段落定义样式：首字母 :first-letter 首行 :first-line

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*第一个字/词20像素，红色*/
			.p1:first-letter{font-size: 20px;color: red;}
			/*可见区域第一行是25像素，蓝色*/
			.p2:first-line{font-size: 25px;color:blue;}
			/*在元素标签前加入内容，用鼠标选择不了*/
			.p3:before{content:'某位名人说过：'}
			.p3:after{content:'---结束---'}
		</style>
	</head>
	<body>
		<p class="p1">窗前明月光，疑是地上霜。举头望明月，低头思故乡</p>
		
		<p class="p2">这少年便是闰土。我认识他时，也不过十多岁，离现在将有三十年了；那时我的父亲还在世，家景也好，我正是一个少爷。那一年，我家是一件大祭祀的值年（10）。这祭祀，说是三十多年才能轮到一回，所以很郑重；正月里供祖像，供品很多，祭器很讲究，拜的人也很多，祭器也很要防偷去。我家只有一个忙月（我们这里给人做工的分三种：整年给一定人家做工的叫长工；按日给人做工的叫短工；自己也种地，只在过年过节以及收租时候来给一定人家做工的称忙月），忙不过来，他便对父亲说，可以叫他的儿子闰土来管祭器的。</p>
		
		<p class="p3">时间就是生命</p>
	</body>
</html>

（6）其他子元素选择器

之前提到子元素选择器的语法是父元素 > 子元素，这样会选择所有的子元素，然而有时候会有选择第一个子元素，最后一个子元素这种需求，css选择器也是可以做到的，他们是通过伪类来实现的。

:first-child 是父元素的第一个子元素 :last-child 是父元素的最后一个子元素 :nth-child(次数) 是父元素的第几个元素

:first-of-type 是父元素的第一个此类型的元素 :last-of-type 是父元素的最后一个此类型的元素

:nth-of-type(次数) 是父元素的第几个此类型的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			/*是p元素，并且是父元素的第一个元素*/	
			p:first-child{color:red;}
			/*
			 * 如果只需要div中的第一个子元素可以这样：
			 * div > p:first-child {
			 * 	color:red;
			 * }
			 */
			/*是p元素，并且是父元素的最后一个元素*/
			p:last-child{color:blue;}
			/*在()中写上行数，也可以写even：表示偶数，odd：表示奇数*/
			p:nth-child(3){color:yellowgreen;}
			
			/*:first-of-type表示所有此类型子元素的第一个，注意区别于:first-child
			 *:last-of-type与:nth-of-type()
			 */
			p:first-of-type{
				color:green;
			}
		</style>
	</head>
	<body>
		<span>蜀道难</span>
		<!--
        使用p:first-of-type会生效，但是p:first-child不会生效
        -->
		<p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！</p>
		<div>
			<p>蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。</p>
			<p>西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。</p>
		</div>
		<p>上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。</p>
		<p>青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p>
		<p>问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。</p>
		<!--
        	如果即使第一个又是最后一个谁后声明就选用谁的样式
        -->
		<div><p>又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜。</p></div>
		
	</body>
</html>

（7）属性选择器

属性选择器利用标签属性中的内容来选定特定的标签。语法如下：

[属性名]：存在此属性名的标签 [属性名=""]：属性名等于某个字符串的标签

[属性名^=""]：以某个字符串开都的标签 [属性名$=""]：属性名以某个字符串结束的标签

[属性名*=""]：属性名以包含某个字符串的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*有title属性*/
			p[title]{
				color:red;
			}
		/*title属性是bcd*/
			p[title="bcd"]{
				color:blue;
			}	
		/*title属性以s开头*/
			p[title^="s"]{
				color:pink;
			}
		/*title属性以m结束*/
			p[title$='m']{
				color: yellow;
			}	
		/*title属性包含mdf*/
			p[title*='msf']{
				color: green;
			}	
		</style>
	</head>
	<body>
		<p>这是一个没有title属性的p标签</p>
		<p title="abc">这是一个有title属性的标签</p>
		<p title="bcd">这是一个有title属性为bcd的标签</p>
		<p title="sdf">这是一个title属性以s开头的标签</p>
		<p title="lkm">这是一个title属性以m结束的标签</p>
		<p title="asmsfas">这是一个title属性包含msf的标签</p>
	</body>
</html>

（8）否定伪类选择器

这个还是个伪类，语法：选择器:not(选择器) 表示不包含关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		/*将class不是.nom的p标签设置背景颜色为黄色*/
			p:not(.nom){
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<p>这是正常的p标签</p>
		<p>这是正常的p标签<</p>
		<p class="nom">这是class为nom的标签<</p>
		<p>这是正常的p标签<</p>
		<p>这是正常的p标签<</p>
	</body>
</html>

以上及时我们开发中常用的选择器了，具体可见W3CSchool：点击打开链接

这里有一个CSS练习的网站：

点击前往练习

乃们可以试一试

VICHOU_FA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识梳理——css选择器

前言css(cascading style sheet)层叠样式表，网页组成中处于表现层，用于控制页面中的元素样式。css可以用来为网页创建样式表，通过样式表可以对网页进行修饰。所谓层叠，可以将网页想想成一层一层的结构，层次高的覆盖层次低的，而css可以分别给各个层次设置样式。css引入方式（1）行内样式，可以直接将样式写到标签内部的style属性中，这样不用编写选择器，直接编写即可。&lt;p ...
复制链接

扫一扫

专栏目录