2024年Web前端最新一文带你入门css【选择器的详细介绍】(1)，2024年最新Web前端算法面试题

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

hello world

helloworld

• hahha

• ②.结果

  

  5.属性选择器

  ---

  根据属性，选择出符合条件的标签。

  基本语法：

  选择出有类属性的标签

  span[class=“re”] {

  color: blue;

  }

  /* 该标签属性是1+10=11 */

  选择出开头是demo的标签

  div[class^=“demo”] {

  color: chartreuse;

  }

  选择出结尾是data的id

  select[id$=“data”] {

  color: cyan;

  }

  选择出类名包含demo0的标签

  div[class*=“demo0”] {

  color: darkorchid;

  }

  ①.案例

  Hello World

  Hello World

  
  
  Hello World
  Hello World
  Hello World
  Hello World

  Hello World

  Hello World

  Hello World

  Hello World
  Hello World
  Hello World

  ②.结果

  

  6.伪类选择器

  ---

  伪类选择器有两种

  一种是孩子伪类选择器：以孩子为主体

  一种是类型选择器：以类型为主体

  /*

  ul 标签下的div标签的第一个与最后一个孩子

  */

  ul div:last-child {

  color: aquamarine;

  }

  ul div:first-child {

  color: blueviolet;

  }

  /*

  odd是奇数

  even是偶数

  括号内支持数学公式

  */

  div div:nth-child(odd) {

  background-color: grey;

  }

  div div:nth-of-type(even) {

  background-color: #ccc;

  }

  /*

  以下两个标签是这两种标签最本质的区别

  child以孩子个数为主,先检查孩子所属的位置,然后对比标签类型只有都符合才会触发效果

  type以标签类型为主,在指定的标签类型中找到标签的次序,然后触发效果

  */

  ul div:nth-child(1) {

  background-color: hotpink;

  }

  ol div:nth-of-type(1) {

  background-color: brown;

  }

  ①.案例

  Hello

  Hello
  Hello
  Hello
  Hello
  Hello

  Hello

  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello

  ②.结果

  

  7.伪元素选择器

  ---

  伪元素选择器之所以叫伪元素选择器,就是因为标签不是真实存在的

  而是依赖原有的盒子存在的,而原有的盒子身份是他的父盒子

  伪元素有before after两种

  div {

  position: relative;

  width: 300px;

  height: 300px;

  background-color: blueviolet;

  }

  /* 伪元素选择器必须要有content这一属性,如果啥也不存就用双引号引起来空格 */

  div:hover::after {

  content: ‘Hello’;

  position: absolute;

  width: 300px;

  height: 300px;

  background-color: rgba(0, 0, 0, 0.5);

  text-align: center;

  line-height: 300px;

  font-size: 30px;

  font-weight: 700;

  }

  ①.案例
• Hello World
• Hello Sky
• Hello Boy
• Hello man

• Hello Tim

  结果：

  

  ②子代选择器

  与后代选择器不同的是,并没有将所有的子标签全选上,而是选择的某特定的标签

  代码：

  Hello World

  Hello World

  结果：

  

  ③并集选择器

  将标签进行并联选择,也就是某几种标签有相同的样式

  代码：

  Hello World

  Hello World

  Hello World
• Hello W
• Hello O
• Hello RLD

• 结果：

  

  ④链接伪类选择器（放上去有动态效果）

  就是在鼠标触发某事件后,进行相应的选择

  代码：

  网址之家

  HELLO

  WORLD

  !

  YES

  结果：

  学习笔记

  主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  HTML/CSS

  **HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

  **CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

  

  HTML5 /CSS3

  **HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

  **CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

  

  JavaScript

  **JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  

  网址之家

  HELLO

  WORLD

  !

  YES

  结果：

  学习笔记

  主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  HTML/CSS

  **HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

  **CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

  [外链图片转存中…(img-T4Fps6Tg-1715449270652)]

  HTML5 /CSS3

  **HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

  **CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

  [外链图片转存中…(img-VOPyvf4Z-1715449270653)]

  JavaScript

  **JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  [外链图片转存中…(img-txnHw7a6-1715449270654)]