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

客官°小女子只卖身不卖艺 2022-05-24 02:44 216阅读 0赞

##### 前言 #####

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

**css引入方式**

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

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

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

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

（3）外部样式表，同过外部样式文件，然后通过<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>噫吁嚱，危乎高哉！蜀道之难，难于上青天！</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：[点击打开链接][Link 1]

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

[点击前往练习][Link 2]

乃们可以试一试

[Link 1]: http://www.w3school.com.cn/cssref/css_selectors.asp
[Link 2]: http://flukeout.github.io/