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

前言

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

css引入方式

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

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

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

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

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

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

css选择器

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

（1）基础选择器

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

	
		
		
	
	
	
		
这个是测试 元素/标签选择器
		
		这是测试类选择器
		

		这是测试id选择器
		
		

			这是测试复合选择器
		

		 群组选择器  选择器1
		

		 群组选择器  选择器2
	

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

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

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

	
		
		
		
	
	
		

			

				div的后代1

				div的后代2
			
			div的后代3
		
		
		

			这是div2的子元素
		
	

（3）兄弟元素选择器

	
		
		
		
	
	
		
这是p1
		
这是p2
		
这是p3
		这是span
		
这是p4
		
这是p5
		
这是p6
	

（4）伪类选择器

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

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

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

还有其他的一些伪类：

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

	
		
		
		
	
	
		这是一个链接
		
这是一段文字
	

（5）伪元素选择器

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

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

	
		
		
		
	
	
		
窗前明月光，疑是地上霜。举头望明月，低头思故乡
		
		
这少年便是闰土。我认识他时，也不过十多岁，离现在将有三十年了；那时我的父亲还在世，家景也好，我正是一个少爷。那一年，我家是一件大祭祀的值年（10）。这祭祀，说是三十多年才能轮到一回，所以很郑重；正月里供祖像，供品很多，祭器很讲究，拜的人也很多，祭器也很要防偷去。我家只有一个忙月（我们这里给人做工的分三种：整年给一定人家做工的叫长工；按日给人做工的叫短工；自己也种地，只在过年过节以及收租时候来给一定人家做工的称忙月），忙不过来，他便对父亲说，可以叫他的儿子闰土来管祭器的。
		
		
时间就是生命
	

（6）其他子元素选择器

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

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

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

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

	
		
		
		
	
	
		蜀道难
		
		
噫吁嚱，危乎高哉！蜀道之难，难于上青天！
		

			
蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。
			
西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。
		
		
上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。
		
青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
		
问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。
		
		
又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜。
		
	

（7）属性选择器

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

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

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

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

	
		
		
		
	
	
		
这是一个没有title属性的p标签
		
这是一个有title属性的标签
		
这是一个有title属性为bcd的标签
		
这是一个title属性以s开头的标签
		
这是一个title属性以m结束的标签
		
这是一个title属性包含msf的标签
	

（8）否定伪类选择器

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

	
		
		
		
	
	
		
这是正常的p标签
		
这是正常的p标签<
		
这是class为nom的标签<
		
这是正常的p标签<
		
这是正常的p标签<
	

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

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

点击前往练习

乃们可以试一试