深入理解CSS：级联、优势与选择器详解-CSDN博客

本文详细介绍了CSS的概念，包括它在网页设计中的作用，优势如内容与表现分离、提高效率，以及HTML中引入CSS的多种方式。涵盖了标签选择器、类选择器、ID选择器、高级选择器（如层次选择器、结构伪类和属性选择器）等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.css概念
Cascading Style Sheel级联样式表表现html或者xhtml文件样式的计算机语言

2.css优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

3.html引入css的三种方式
1、行内样式：使用style属性引入css样式
2、内部样式表：css代码写在<head><style>标签中
3、外部样式表：css代码保存在扩展名为.css的样式表中，html文件引入。有两种方式：链接式和导入式。

4.标签选择器
html标签作为标签选择器的名称

5.类选择器
.class

6.id选择器
#id

7.高级选择器
层次选择器
结构伪类选择器
属性选择器

8.层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

9.结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

10.属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr=val*]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

初识css3