示：点击上方"蓝色字体"↑ 可以订阅噢！

摘要 51RGB官方微信

网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容篇。

常用DIV+CSS命名大全集合，即CSS命名规则

我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。

一、命名规则说明

1、所有的命名最好都小写

2、属性的值一定要用双引号("")括起来，且一定要有值如 class="helloweb" , id="helloweb"

3、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4、空元素要有结束的tag或于开始的tag后加上"/"

5、表现与结构完全分离，代码中不涉及任何的表现元素，如：style、font、bgColor、border 等

6、<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7、给每一个表格和表单加上一个唯一的、结构标记 id

8、给图片加上alt 标签，优点是在于在图片发生错误时，alt 可以体现给用户

9、尽量使用英文命名原则

10、尽量不缩写，除非一看就明白的单词

下面给大家介绍常见CSS命名和DIV CSS命名方法。

二、相对网页外层重要部分CSS样式命名

外套 wrap ------------------用于最外层

头部 header ---------------用于头部

主要内容 main ------------用于主体内容（中部）

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content --------------用于网页中部主体

底部 footer -----------------用于底部

三、DIV+CSS命名参考表

以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合：

CSS命名其它说明：

DIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

2.CSS样式文件命名如下：

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

四、英文命名技巧

如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。

以上为DIV+CSS的命名规则总结，相信通过规范的CSS 命名会给你以后做网站网页的维护带来方便。

想认识志同道合的朋友一起学习web

加入我们的学习QQ群 190166743

丰富的学习资源，周一到周四免费直播公开课

长按图片，识别二维码即可入群

你可能感兴趣的精彩内容

微信：UI设计自学平台加关注

长按关注：《UI设计自学平台》

↓↓↓

、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1） 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2、行内元素有哪些？块级元素有哪些？

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

3、link 和@import 的区别是？

（1）link属于XHTML标签，而@import是CSS提供的;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

（4）link方式的样式的权重 高于@import的权重.

4、浏览器的内核分别是什么?

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

5、HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search 新的技术webworker, websockt, Geolocation

6、对语义化如何理解？

用正确的标签做正确的事情！

HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

7、HTML5的离线储存有几种方式？

localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

8、iframe有那些缺点？

iframe会阻塞主页面的Onload事件；

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会，sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；

10、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

1.id选择器（ # myid） 　　　　2.类选择器（.myclassname）

3.标签选择器（div, h1, p） 　 　4.相邻选择器（h1 + p）

5.子选择器（ul < li） 　　　 　6.后代选择器（li a）

7.通配符选择器（ * ） 　　　　8.属性选择器（a[rel = "external"]）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag important 比 内联优先级高

11、CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。

p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:enabled :disabled 控制表单控件的禁用态。

:checked单选框或复选框被选中。

12、如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后添加margin:0 auto属性

div{ width:200px; margin:0 auto; }
居中一个浮动元素

确定容器的宽高 宽500 高 300 底层 设置层的外边距 .div { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

　　1.block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。

　　2. absolute　生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。

　　relative 　生成相对定位的元素，相对于其正常位置进行定位。

　　static 默认值。没有定位，元素出现在正常的流中 *（忽略 top, bottom, left, right z-index 声明）。

　　inherit 规定从父元素继承 position 属性的值。

13、为什么要初始化CSS样式？

　　因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

14、css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1 div{}/*权重为10+1=11*/.class1 div{}/*权重为10+10+1=21*/.class1 .class2 div{} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

15、CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba

16、介绍一下CSS的盒子模型？

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

17.对WEB标准以及W3C的理解与认识？

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

18.XHTML和HTML有什么区别？

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。标签名必须用小写字母。

XHTML 文档必须拥有根元素。

19.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范(HTML/XHTML)一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

20.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

21.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

22.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

23.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 HTML 表示层 CSS 行为层 js

24.CSS的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

25.你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

26.写出几种IE6 BUG的解决方法

1. 双边距BUG float引起的 使用display
2. 3像素问题 使用float引起的 使用dislpay:inline -3px
3. 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4. Ie z-index问题 给父级添加position:relative
5. Png 透明 使用js代码 改
6. Min-height 最小高度 !Important 解决’
7. select 在ie6下遮盖 使用iframe嵌套
8. 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)
9. ie 6 不支持!important

27.img标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

28.描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

29.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

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

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

31.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

32.什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处

33.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both(理论上能清除任何标签，增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.使用afert伪元素清除浮动(用于非IE浏览器)

34.javascript的typeof返回哪些数据类型

Object number function boolean underfind
35.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）

隐式（== – ===）
36.split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串
37.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

39.IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

40.IE和标准下有哪些兼容性的写法

Var target = ev.srcElement||ev.target
41.ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
42.call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
43.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱
44.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
46.添加 删除 替换 插入到某个节点的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
47.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

48.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等
50.”==”和“===”的不同

前者会自动转换类型

后者不会
51.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

54.CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?
在CSS中关于定位的内容是：position:relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute 脱离文档流，通过 top,bottom,left,right 定位。选其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

fixed 固定定位，这里他所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
55.函数的几种定义方法？

function a(){},
var a = function(){}
56.对象的定义方法？

a = new Object(), a = {}
57.类的定义方法（prototype）（继承）

Var a = function(){}
a.prototype = {}
new a();
58.this 关键字的指向

obj.foo() == obj //方法调用模式,this指向obj
foo() == window; //函数调用模式,this指向window
new obj.foo() == obj //构造器调用模式, this指向新建立对象

foo.call(obj) == obj;//APPLY调用模式,this指向obj
59.异步ajax的优缺点都有什么？

优点：

相对于同步ajax：不会造成UI卡死，用户体验好。

相对于刷新页面，省流量

缺点：

后退按钮无效；

多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。

搜索引擎不友好

数据安全
60、介绍js的基本数据类型。

number,string,boolean,object,undefined　　

61、Javascript如何实现继承？

通过原型和构造器

62、如何创建一个对象? （画出此对象的内存图）

function Person(name, age) { this.name = name; this.age = age; this.sing = function() { alert(this.name) } }

63、谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

64、事件是什么？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

（1） 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

（2） 事件处理机制：IE是事件冒泡、火狐是 事件捕获；

（3） ev.stopPropagation();

65、如何判断一个对象是否属于某个类？

使用instanceof （待完善） if(a instanceof Person){ alert('yes'); }

66、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

67、对JSON 的了解？

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小{'age':'12', 'name':'back'}

68、简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

69、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

70、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

71、什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

72、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

73、如何消除一个数组里面重复的元素？

var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6

74、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){

var args = Array.prototype.slice.call(arguments);

//为了使用unshift数组方法，将argument转化为真正的数组

args.unshift('(app)');

console.log.apply(console, args);

};

75、Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

76、请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

77、手写数组快速排序

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序

“快速排序”的思想很简单，整个排序过程只需要三步：

（1）在数据集之中，选择一个元素作为”基准”（pivot）。

（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。

（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

78、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

var str = "aaaabbbccccddfgh";

var obj = {};

for(var i=0;istr.length;i++){

var v = str.charAt(i);

if(obj[v] & obj[v].value == v){

obj[v].count = ++ obj[v].count;

}else{

obj[v] = {};

obj[v].count = 1;

obj[v].value = v;

}

}

for(key in obj){

document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

}

79、一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

80、对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 做好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

载说明：原创不易，未经授权，谢绝任何形式的转载

最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。

在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。

一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。

使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。这样我们就可以扩展选择器的范围，包括一个或多个兄弟或子元素。

在本文中，我们将讨论CSS选择器以及它们在代码中的多个使用示例。

何时使用:has选择器

:has() 选择器是一种CSS伪类，允许您选择包含特定子元素的元素。它是一个强大的CSS工具，您可以用于以下目的：

• 为子元素的父元素设置样式：如果一个 <div> 元素包含一个 <p> 元素，你可以使用 :has() 选择器来为它设置样式。
• 有条件地添加或删除样式：如果 <div> 元素包含特定数量的子元素，您可以使用 :has() 选择器为其添加边框。
• 根据内容选择元素：您可以使用 :has() 选择器来选择所有包含具有 "important" 类的子元素的 <div> 元素。

:has() 选择器可以与任何有效的CSS选择器一起使用，包括其他伪类。这使得它成为一个非常多功能的工具，可以以各种方式使用。

这是一个关于如何使用 :has() 选择器的小片段

/* Select all <div> elements that contain a <p> element. */
div:has(p) {
 background-color: blue;
}
  
/* Select all <div> elements that contain a child element with the class "important". */
div:has(.important) {
 border: 1px solid black;
}   
/* Select all <div> elements that contain at least two child elements. */
div:has(> * + *) {
 padding: 10px;
}

上面的代码展示了如何使用 :has 选择器的实际示例。但在我们深入使用 :has 选择器之前，让我们先来看一下为什么选择器很重要。

项目设置

要开始这个项目，你可以从这个GitHub仓库克隆起始代码。完成的仓库也在这个仓库中，但你需要使用起始代码来跟随本教程。

https://github.com/joycefoster642/-has-css-project

上面的图片展示了我们的项目在浏览器上启动时的样子。

注意：该项目只是一个简单的类似博客的演示，用于展示 :has 伪类的一般用法。

正向选择 vs 反向选择

以前，开发者只能选择前进，但是现在有了 :has 选择器，你现在也可以选择后退。

现在，我们要选择一个元素的父级。过去，通常是这样做的：

article + article {
 background-color: pink;
}

正如你所注意到的，第二和第三篇文章的颜色发生了变化。这是因为它们相邻。所以，它选择了前面而不是后面。现在，让我们用 :has 选择器来反向进行操作。

article:has(+ article) {
 background-color: coral;
}

在上面的代码中，我们只是简单地说，如果文章有相邻的文章，选择前两篇文章。

现在，请注意这次选择了第一篇和第二篇文章。

基于子元素的选择

使用 :has ，我们不仅可以选择父元素，还可以选择子元素。

article:has(span) .bold {
 background-color: lightyellow;
}
article:has(span) .italic {
 text-decoration: underline;
}

在 index.html 文件中，我们使用 span 为文章2和3应用了一个加粗和斜体的类。在我们的CSS文件中，我们使用 article:has(span) 语法选择了我们的 span 。以下是结果：

在这里，您可以看到对第二和第三篇文章中的粗体和斜体应用的更改。我们不仅选择了文章，还选择了 span 类别应用的内容。

使用:has与:not选择

在本节中，我们将介绍如何使用 :has 伪类与 :not 。

article:not(:has(span)) {
 background-color: yellowgreen;
}

以下是结果：

只会改变没有 span 类的文章。:has 选择器还支持 0R 逻辑条件。

article:has(p, .button) {
 background-color: royalblue;
}

以下是结果：

在这里，我们可以选择一个带有 OR 的段落的文章，或者选择一个带有 button 类的任意文章。这三篇文章被选择是因为它们都有一个 p 的HTML标签。但是如果我们移除 p 标签，只有最后一个带有“buy now” button 类的文章会保持着颜色。

:has使用案例和示例

在本节中，我们将探讨使用 :has 选择器时的更多实际用例和示例。

导航菜单示例

这将引导我们进入我们项目的下一部分，它看起来是这样的：

在这里，我们将鼠标移到位置上，您可以看到当我们将鼠标悬停在位置上时，我们拥有的不同位置。

当我们不悬停在位置和员工上时，您会注意到根本没有任何下拉菜单的指示。如果我们为此使用修饰类，我们将不得不手动进入HTML文件并编写代码。然而，我们可以通过 :has 伪类来实现这一点。

.nav__item:has(.nav__submenu)::after {
 font-family: "Font Awesome 5 Free";
 font-weight: 400;
 content: "\f150";
 margin-left: 1rem;
}

在上面的代码中，我们说，如果 .nav__item 里面有 .nav__submenu ，则只将设计应用于前两个导航图标。以下是结果：

模态示例

我们可以用JavaScript创建一个模态框，但现在我们也可以使用 :has 选择器来实现。下面的示例将带我们进入项目的下一个部分，效果如下：

当复选框被选中时，没有任何反应。但是我们可以通过 :has 伪类轻松实现某些操作。

.awesome:has(.awesome__terms:checked) {
 display: none;
}

.awesome 类是我们的模态框。然后我们说如果我们有 .awesome__terms: checked ，再次点击复选框时让下一页显示出来。

浅色和深色模式示例

这是另一个快速示例，展示了如果选中了某个选项，我们可以如何应用它。

.three:has(.lightswitch:checked) {
 background-color: var(--COLOR);
 color: var(--BGCOLOR);
}

一旦我们应用上述代码并点击“切换到暗模式”，下面是结果：

现在，您可以无缝切换浅色和深色模式。

输入验证示例

我们的最后一个例子将引导我们进入项目的这一部分，看起来像这样：

上面的图像显示了包含文本“名称”和文本输入的 label 。现在，我们要选择相反的东西。以前，我们只能向前选择，所以 label 必须在文本 input 之后。现在，我们可以根据 input 中的内容更改 label 。

<div>
 <label for="name">Name:</label>
 <br />
 <input
   class="name"
   type="text"
   name="name"
   id="name"
   required
   pattern="^\[A-Z\][A-z]{2,}"
 />
</div>

在我们上面的代码中，我们对 index.html 应用了一个模式。在这里，我们有一个 required pattern ，其中的正则表达式表示文本必须以大写字母开头，并且至少为3个字符。在我们的 style.css 中，我们包含了以下代码

label:has(~ .name:valid)::after {
 content: '✔️';
 color: limegreen;
 margin-left: 1rem;
 font-size: 3rem;
}

以下是结果：

名字“Joyce”符合首字母大写且最多三个单词的要求，因此出现了绿色的勾号。

既然我们已经到了教程的结尾，希望你对 CSS 选择器/伪类有所了解。

结论

CSS :has 选择器提供了一种创新的方法来解决网页开发中的复杂样式挑战。在本文中，我们探讨了这个强大选择器的功能和潜在用例，它允许我们根据元素的后代来定位目标元素。

通过利用 :has 选择器，网页开发人员可以提高他们的CSS代码的效率和灵活性，简化选择过程，减少不必要的类和嵌套结构的需求。

这个选择器使开发人员能够创建更清晰、更易于维护的代码，同时保持HTML结构的完整性。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。