2024年Web前端最全学CSS选择器，看这篇文章就够了（近2万字详解）(2)，看完这一篇你就懂了

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

样式的优先级

---

1．行内样式和嵌入样式比较

行内样式的优先级大于嵌入样式

2．嵌入样式和链接样式比较

嵌入样式的优先级高于链接样式。

3．链接样式和导入样式

链接样式的优先级高于导入样式的优先级。

通过前面的例子，CSS样式表方式的优先顺序由高到低次依为：行内样式、嵌入样式、链接样式和导入样式。

四、CSS复合选择器

=========================================================================

复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器，可以实现更强、更方便的选择功能，主要有交集选择器、并集选择器和后代选择器等。

交集选择器

---

交集选择器是由两个选择器直接连接构成的，其结果是选中两者各自作用范围的交集。其中，第一个必须是标记选择器，第二个必须是类选择器或ID选择器，例如：“h1.class1；p#id1”。

交集选择器的基本语法格式如下。

tagName.className {

property:value;

}

示例演示了交集选择器的作用

代码

正常div标记，蓝色，9px

类选择器，12px

交集选择器，红色，加粗，10px

效果

并集选择器

---

并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，每个选择器可以是任何类型选择器。

如果某些选择器定义的样式完全相同，或者部分相同，则可以使用并集选择器。

下面是并集选择器的语法格式。

selector1,selector2,… {

property:value;

}

示例演示了并集选择器的作用

代码

后代选择器

---

在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。例如，当<div>与</div>之间包含<b>标记时，就可以使用后代选择器定义出现在<div>标记中的<b>标记的格式。后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。

selector1 selector2 {

property:value;

}

两个选择器之间用空格隔开，并且selector2是selector1包含的对象。

示例

代码

请选择下列选择器

• 交集选择器
• 并集选择器
• 后代选择器
• 子选择器
• 相邻选择器

• 效果

  

  子选择器

  ---

  子选择器语法格式如下：

  selector1>selector2

  示例

  代码

  子选择器是在CSS2.1以后的版本中增加的。

  本行应用了子选择器,幼园红色

  本行不属于相邻选择器，因为div标记和p标记不同级

  本行应用相邻选择器,幼园红色

  效果

  

  相邻选择器

  ---

  相邻选择器的定义符号是加号（+），可以选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）

  示例

  代码

  相邻选择器是在CSS2.1以后的版本中增加的。

  本行应用相邻选择器,幼园红色

  本行不与div相邻,相邻选择器无效

  ---

  相邻选择器是在CSS2.1以后的版本中增加的。

  本行不属于相邻选择器，因为div标记和p标记不同级

  ---

  相邻选择器是在CSS2.1以后的版本中增加的。

  本行无标记，不影响应用相邻选择器

  本行应用相邻选择器,幼园红色

  效果

  

  五、CSS3新增的选择器

  ===========================================================================

  属性选择器

  ---

  通过各种各样的属性，可以给元素增加很多附加信息。例如，通过id属性，可以区分不同的元素；通过class属性，可以设置元素的样式。

  为了扩展属性选择器的功能，可以使用^、$和*这三个通配符。

  属性选择器及其功能

  

  示例是关于属性选择器的一个例子

  代码
• Welcome to DL
• Firework素材
• Photoshop素材

• 效果

  

  伪类选择器

  ---

  伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选择器是在CSS中已经定义好的选择器。

  伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。

  1. 基本结构伪类选择器

  基本结构伪类选择器

  

  伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。

  2. 与元素位置有关的结构伪类选择器

  与元素位置有关的结构伪类选择器

  

  示例

  代码

  大连广场 广场名称特点描述 星海广场从星海广场沿中央大道北行500米左右是星海会展…… 人民广场城雕前100双脚印揭示了大连一步一个脚印地走过了百年…… 中山广场是一个购物，餐饮，休闲，娱乐一站式购物街区…… 友好广场博物馆/纪念展览馆，主题公园/游乐场…… 五四广场从百盛的兴起，到家乐福的进驻，再到罗斯福的开业……

  效果

  

  3.UI伪类选择器

  常用的UI伪类选择器

  

  示例

  代码

  姓          名:
  

  身份证号码:

  效果

  

  示例是超级链接的伪类选择器的应用。

  

  示例展示了伪类选择器:focus和:first-child的功能

  代码

  first-child 伪类选择器示例:

  本块是body的first-child，按指定格式显示
  本块是strong的first-child，本行按指定格式显示
  本行非first-child，未按指定格式显示

  :focus伪类选择器示例：

  请输入姓名：

  效果

  

  伪元素选择器

  ---

  1．:first-letter和:first-line

  :first-letter用于选中元素内容的首字符。:first-line用于选中元素中的首行文本。

  

  2．选择器:before和:after

  :before和:after两个伪对象必须配合content属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内标记，该行内元素的内容由content属性里的内容决定。

  before选择器用于在某个元素之前插入内容。

  : before {

  content:文字或其他内容

  }

  after选择器用于在某个元素之后插入内容。

  : after {

  content:文字或其他内容

  }

  示例

  代码

  课程清单
• HTML5
• CSS3
• JavaScript

• HTML5

  Canvas

  WebWorker

  WebStorage

  离线应用

  WebSocket

  效果

  

  六、使用CSS设计网站页面

  ============================================================================

  示例的布局使用表格，页面中的元素如文字、超级链接、表单、水平线等由CSS来控制，页面效果如图所示。

  

  代码