【H5/CSS】CSS的写法与选择器

百科简介

层叠样式表 (英文全称:Cascading Style Sheets)是一种用来表现 HTML ( 标准通用标记语言 的一个应用)或 XML (标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

1. CSS要怎么写?写哪里?

1.1 CSS的三种写法:

1.1.1 第一种:内联样式/行内样式

在标签内部通过style属性来设置元素的样式

【H5/CSS】CSS的写法与选择器插图

问题:使用内联样式,样式只能对该标签生效

1.1.2 第二种:内部样式表

将样式编写到head中的style标签里,然后通过CSS的选择器来选中元素并为其设置各种样式,可以同时为多个标签设置样式。
【H5/CSS】CSS的写法与选择器插图1

优点:
内部样式表更加方便对样式进行复用

缺点:
内部样式表只能对一个网页起作用,不能跨页面进行复用

1.1.3 第三种:(外部样式表)

可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件。
【H5/CSS】CSS的写法与选择器插图2

优点:

  1. 样式可以在不同页面之间进行复用
  2. 将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户的体验

1.2 CSS的基本语法

【H5/CSS】CSS的写法与选择器插图3

2. CSS选择器

【H5/CSS】CSS的写法与选择器插图4

2.1 常用选择器

2.1.1 元素选择器

根据标签名来选中指定的元素,语法为:标签名{},比如:p{}、h1{}、div{}
【H5/CSS】CSS的写法与选择器插图5

2.1.2 id选择器

根据元素的id属性值选中一个元素,语法为:#id属性值{},比如:#box{} #red{}
【H5/CSS】CSS的写法与选择器插图6

2.1.3 类选择器

根据元素的class属性值选中一组元素,语法为:.class属性值

类选择器和id类似,不同的是class可以重复使用,可以通过class属性来为元素分组。
【H5/CSS】CSS的写法与选择器插图7

可以同时为一个元素指定多个class属性。
【H5/CSS】CSS的写法与选择器插图8

2.1.4 通配选择器

选中页面中的所有元素,语法为:*
【H5/CSS】CSS的写法与选择器插图9

2.2 复合选择器

2.2.1 交集选择器

同时复合多个条件的元素,语法为:选择器1选择器2选择器3选择器n{}
【H5/CSS】CSS的写法与选择器插图10

注意点:
交集选择器中如果有元素选择器,必须使用元素选择器开头
【H5/CSS】CSS的写法与选择器插图11

2.2.2 并集选择器

同时选择多个选择器对应的元素,语法:选择器1,选择器2,选择器3,选择器n{}
【H5/CSS】CSS的写法与选择器插图12

2.3 关系选择器

2.3.1 后代选择器

选中指定元素内的指定后代元素,语法:祖先 后代
【H5/CSS】CSS的写法与选择器插图13

2.3.2 子代关系选择器

选中指定父元素的指定子元素,语法:父元素 > 子元素
【H5/CSS】CSS的写法与选择器插图14

2.3.3 邻接兄弟

选择同一个父类元素下一个兄弟,语法:前一个 + 下一个



	
		
		Document
		
	
	
		
我是div外的span

【H5/CSS】CSS的写法与选择器插图15

2.3.4 通用兄弟

选择下边所有的兄弟,语法:兄 ~ 弟



	
		
		Document
		
	
	
		
我是一个div

我是div中的p元素 我是p元素中的span

我是div中的span元素 我是div中的span元素 我是div中的span元素 我是div中的span元素

【H5/CSS】CSS的写法与选择器插图16

2.4 属性选择器

2.4.1 [属性名] 选择含有指定属性的元素

【H5/CSS】CSS的写法与选择器插图17

2.4.2 [属性名=属性值] 选择含有指定属性和属性值的元素

【H5/CSS】CSS的写法与选择器插图18

2.4.3 [属性名^=属性值] 选择属性值以指定值开头的元素

【H5/CSS】CSS的写法与选择器插图19

2.4.4 [属性名$=属性值] 选择属性值以指定值结尾的元素

【H5/CSS】CSS的写法与选择器插图20

2.4.5 [属性名*=属性值] 选择属性值中含有某值的元素的元素

【H5/CSS】CSS的写法与选择器插图21

2.5 伪类选择器

伪类(即不存在的类,特殊的类),用来描述一个元素的特殊状态,比如:第一个子元素、被点击的元素、鼠标移入的元素等。

一般情况下都是使用 : 开头。

2.5.1 :first-child 第一个子元素



	
		
		Document
		
	
	
		
  • 第〇个
  • 第一个
  • 第二个
  • 第三个
  • 第四个
  • 第五个

【H5/CSS】CSS的写法与选择器插图22

2.5.2 :last-child 最后一个子元素

ul > li:last-child {
    color: red;
}

【H5/CSS】CSS的写法与选择器插图23

2.5.3 :nth-child() 选中第n个子元素

2n+1odd 表示选中奇数位的元素

ul > li:nth-child(odd) {
    color: red;
}

【H5/CSS】CSS的写法与选择器插图24

2neven 表示选中偶数位的元素

ul > li:nth-child(even) {
    color: red;
}

【H5/CSS】CSS的写法与选择器插图25

nnn的范围0到正无穷

ul > li:nth-child(n) {
    color: red;
}

【H5/CSS】CSS的写法与选择器插图26

2.5.4 :not() 否定伪类

可以将符合条件的元素从选择器中去除

ul > li:not(:nth-of-type(3)) {
    color: yellowgreen;
}

【H5/CSS】CSS的写法与选择器插图27

以下几个伪类的功能和上述的类似,不同点是以下伪类要在同类型元素中进行排序
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
:empty

2.6 a元素的伪类



	
		
		Document
		
	
	
		没访问过的链接
	

点击后就会从蓝色触发成红色,再跳转
【H5/CSS】CSS的写法与选择器插图28

2.6.2:visited 用来表示访问过的链接

由于隐私的原因,所以visited这个伪类只能修改链接的颜色



	
		
		Document
		
	
	
		访问过的链接
	

【H5/CSS】CSS的写法与选择器插图29

2.6.3 :hover 用来表示鼠标移入的状态



	
		
		Document
		
	
	
		访问过的链接
	

【H5/CSS】CSS的写法与选择器插图30

2.6.4 :active 用来表示鼠标点击



	
		
		Document
		
	
	
		链接效果跟link一样
	

【H5/CSS】CSS的写法与选择器插图31

2.7 伪元素的选择器

伪元素:
页面中一些特殊的并不真实的存在的元素(即在特殊的位置指定显示渲染效果),伪元素使用 :: 开头

2.7.1 ::first-letter 表示第一个字母



	
		
		Document
		
	
	
		

Lorem

【H5/CSS】CSS的写法与选择器插图32

2.7.2 ::first-line 表示浏览器边框下的第一行



	
		
		Document
		
	
	
		

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.

【H5/CSS】CSS的写法与选择器插图33

2.7.3 ::selection 表示选中的内容


【H5/CSS】CSS的写法与选择器插图34

2.7.4 ::before 元素的开始插入内容


【H5/CSS】CSS的写法与选择器插图35

2.7.5 ::after 元素的最后插入内容

div::after {
    content: '』';
}

【H5/CSS】CSS的写法与选择器插图36

注意:
before 和 after 必须结合content属性来使用

参考:

视频(P28~P36):
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通

关系选择器 - 学习 Web 开发 | MDN

B站学友分享的源码

tip:
如果无法上github,可以使用dev-sidecar加速:https://blog.csdn.net/m0_51973551/article/details/120675918
gitee的暂未找到合适的

文章来源于互联网:【H5/CSS】CSS的写法与选择器

THE END
分享
二维码