css3的基本css3内容选择器器有哪几种?

来源：蜘蛛抓取(WebSpider) 时间：2022-12-07 03:04 标签： css3内容选择器

css3中继承了css2中的一般选择器,并且属性选择器有了通配符的概念

//选择元素E且有attr属性，并且属性是以val开头的所有元素; //选择元素E有属性attr属性,并且属性是以val结尾的所有元素; //选择元素E有属性attr属性，并且属性包含val的所有元素; //选择元素中没有任何内容的标签 4, :first-child选择器表示的是选择父元素的第一个子元素的元素E //表示选择ul下的第一个li元素 5, :last-child选择器选择的是元素的最后一个子元素。 //表示选择ul下的第一个li元素 6, :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。 其中“n”是其参数，而且可以是整数值(1,2,3,4)， 但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时， 选择器将选择不到任何匹配的元素。 //选择ul的第奇数位置的li元素 只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别， 从某父元素的最后一个子元素开始计算，来选择特定的元素。 //从最后一个开始计算,ul下的最后第五个li元素

不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

//选择div的父元素下的第一个div元素

不同的是它只计算父元素中指定的某种类型的子元素。
当某个元素中的子元素不单单是同一种类型的子元素时，
使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的
可以是具体的整数，也可以是表达式，还可以是关键词。

//选择div的父元素下的第奇数位置的div元素，和父元素下的第偶数位置的p元素

不同的是他选择是父元素下的某个类型的最后一个子元素。

//选择div父元素下的最后一个div元素

选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，
而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

//选择div的父元素下的最后第五个div元素

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

::before和::after这两个主要是给元素的前面或者后面插入元素，这两个常和“content”配合使用，使用的场景最多的是清除浮动

语义化的主要目的可以概括为用正确的标签做正确的事

HTMl语义化可以让页面的内容结构化，以便于浏览器解析和搜索引擎解析，

并且提高了代码的可读性便于代码维护，

本地离线存储（localStorage）,长期存储数据，关闭浏览器后不丢失。

会话储存（sessionStorage）,数据在关闭浏览器后自动删除。

cookie存放在客户的浏览器上。

session都在客户端中保存，不参与服务器通讯。

cookie可设置失效时间

session可以接受原生接口

因为cookie每次请求都会携带在http请求中,所以它的主要用来识别用户登录,localStorage可以用

来跨页面传参,sessionStorage可以用来保留一些临时数据。



特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行

特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。

父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）

给浮动元素父级增加标签（由于新增标签会造成不必要的渲染，不建议使用）

clear: both;）（不会新增标签，不会有其他影响，）

相对父元素字体大小单位: em

相对于根元素字体大小的单位: rem

相对于视口*宽度的百分比（100vw即视窗宽度的100%）: vw

相对于视口*高度的百分比（100vh即视窗高度的100%）: vh

display:none：隐藏元素，在文档布局中不在给它分配空间（从文档中移除），会引起回流（重排）

visibility:hidden: 隐藏元素，但是在文档布局中仍保留原来的空间（还在文档中），


某个dom节点的颜色，背景颜色变了，字体大小，只影响自己，不影响其他元素。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

某个dom节点的宽高，布局，隐藏等发生改变，不仅自身发生了改变，而且其他元素也会受到影响随之发生改变。每个页面最少一次回流，就是页面第一次加载的时候。

页面初始化渲染（无可避免）

添加或删除可见的DOM元素

元素尺寸的改变------大小，外边距；边框

填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。

兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。

DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。 

 

 
 

 

 

 
 

 
 

 
 

 
 
 

 

 
 

 

 

 
 

 

 

 
 

 
 

 

  - 箭头函数是匿名函数，不能作为构造函数，不能使用new
 
 

 
 

 
 

 
 

 
 

 

 

 
 

  - 创建临时对象，并将this指向临时对象

 

  - 将构造函数的原型属性和方法挂载到新对象的__proto__(原型指针)上
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 

 

 
 

 

 

 
 

 新增块级作用域let定义变量和const定义常量
 
 

 
 

 模板字符串 （‘${}’）
 
 

 
 

 箭头函数（=>）

原因：JavaScript是单线程，所有任务需要排队，前一个任务结束，才会执行后一个任务。

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不进入主线程、而进入"任务队列"的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

同步和异步任务分别进入不同的执行环境， 先执行同步任务，把异步任务放入循环队列当中挂起，等待同步任务执行完，再执行队列中的异步任务。异步任务先执行微观任务，再执行宏观任务。一直这样循环，反复执行。

react 实例的生命周期，就是react实例从初始化，更新，到销毁的过程

react实例生命周期经历三个阶段

初始化阶段：完成从react组件创建到首次渲染的过程

更新阶段：当调用setState函数时，会引起组件的重新渲染

销毁阶段：完成组件的销毁

三个阶段分别对应的构造函数有

构造函数里，可以做状态的初始化，接收props的传值

渲染函数，不要在这里修改数据。 vue中也有render函数。

渲染完毕，在第一次渲染后调用。

当组件的 props 或 state 发生变化时会触发更新（严谨的说，是只要调用了setState（）或者改变了props时）。组件更新的生命周期调用顺序如下：

是否更新？ 需要返回true或者false。如果是false，那么组件就不会继续更新了。

在组件完成更新后立即调用。在初始化时不会被调用。 相当于vue中的updated

即将卸载，可以做一些组件相关的清理工作，例如取消计时器、网络请求等

其次，操作虚拟DOM，就是在操作javascript对象，所以，并不会引起页面的重绘和重排。而操作真实DOM是会引起页面的重绘和重排的。

需要遍历整棵树的节点然后进行比较，是一个深度递归的过程，运算复杂度常常是O(n^3)

DOM节点跨层级的操作不做优化，因为很少这么做，这是针对的tree层级的策略；

对于同一个类的组件，会生成相似的树形结构，对于不同类的组件，生成不同的树形结构，这是针对

对于同一级的子节点，拥有同层唯一的key值，来做删除、插入、移动的操作，这是针对element层级

把传入setState（）里的参数对象和当前的state进行（属性）合并。 触发调和过程

React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面

React 会自动计算出新的树与老树的节点差异（用diff算法），然后根据差异对界面进行最小化重

state是组件的状态，也叫组件内部的数据

props是组件的属性，也可以认为是外部给组件传入的数据

如果要拿到修改后的状态，需要使用回调函数的方式，如下：

因为，这样不会引起组件的重新渲染，所以，数据修改后没法 呈现在页面上。

而调用setState()函数，会引起组件的重新渲染，这样更新的数据就会呈现在页面上。

原文地址：/syfwhu/p//目录，会判断这个“目录是什么文件类型，或者是目录。）

  • 5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速 度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏 览体验也更好了。）
  • 6.减少http请求（合并文件，合并图片）。

7.如果你参与到一个项目中，发现他们使用Tab来缩进代码，但是你喜欢空格，你会怎么做？

  • 为了保持一致性，接受项目原有的风格

8.请写一个简单的幻灯效果页面

如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）

9.你都使用哪些工具来测试代码的性能？

10.如果今年你打算熟练掌握一项新技术，那会是什么？

11.请谈一下你对网页标准和标准制定机构重要性的理解。

w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。

12.什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出 奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

13.doctype（文档类型）的作用是什么？你知道多少种文档类型？

此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

14.浏览器标准模式和怪异模式之间的区别是什么？

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编 写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。

  •  在js中如何判断当前浏览器正在以何种方式解析？

15.使用XHTML的局限有哪些？

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

所有的 XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。

16.如果网页内容需要支持多语言，你会怎么做？

下面这些问题需要考虑：

  • 应用字符集的选择，选择UTF-8编码
  • 语言书写习惯&导航结构

17.data-属性的作用是什么？

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

18.如果把HTML5看作做一个开放平台，那它的构建模块有哪些？

览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或 tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口

20.描述下“reset”CSS文件的作用和使用它的好处。

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。

21.解释下浮动和它的工作原理。

关于浮动我们需要了解，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。

22.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。

  • 1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。
  • 3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮 动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，content属性的值设 为”.”，空亦是可以的。

此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。

23.解释下CSS sprites，以及你要如何在页面或网站中使用它。

24.你最喜欢的图片替换方法是什么，你如何选择使用。

把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。一般都是：alt，title，onerror。

各个浏览器都认识，这里给firefox用；

我要回帖

更多关于 css3内容选择器 的文章

 

随机推荐