CSS中.a {margin-left: 35px;.b {display: flex;}}这是什么写法？

2023-03-05 16:11:02html-css08

CSS中.a {margin-left: 35px;.b {display: flex;}}这是什么写法？,第1张

您提到的代码中有一些语法错误，导致它无法被正确解析。

首先，在 CSS 中，选择器后面应该跟着一个大括号，用来括起来样式声明。例如，正确的写法应该是这样的：

.a {

margin-left: 35px

}

其次，在 CSS 中，不能在一个选择器的样式声明块中嵌套另一个选择器。也就是说，您不能在 .a 选择器的样式声明块中写另一个选择器 .b 的样式声明。这种写法是错误的。

正确的写法应该是这样的：

.a {

margin-left: 35px

}

.b {

display: flex

}

也就是说，您需要分开写两个选择器的样式声明。

关于css常见问题，大多是移动端的。简单的排版规则：条目与条目之间空两行，每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。条目编号后面紧跟英文字母的，要空一格，比如 4. css，“4.”和“css”之间有一个空格。一、在做手机轮播图时，banner图的宽度是手机屏幕的宽度，轮播图加了左右切换按钮，按钮的position:absolute；定位的元素，定位的元素超出父容器时（超出了100%），会出现滚动条。二、在移动端有3种布局可选。 1.定位布局说明：头部、尾部是fixed定位。中间内容部分绝对定位，overflow-y:auto； 2. flex布局（朕极力推荐）说明：这里写的简洁，没有写很多兼容，移动端兼容性比较好，安卓5.1以上都可以用。用的是较新的flex声明。（这个布局是抄袭手淘团队的。） 3.普通的流式布局说明：头部和尾部依然是fixed定位，但是#content内容部分则是用padding-top和padding-bottom来支撑页面，这种布局相当垃圾，会带来各种页面上下莫名其妙的留白问题。三、css属性 1. word-wrap:break-word； word-break:break-all；让一行连续的数字或英文字母遇到边界自动换行。 2. -webkit-user-select:none | normal | text；这个属性是禁止用户选择、复制文字，同时还会使input框、select框不能获取焦点，导致无法输入或选择。所以在使用这个属性时，注意防止对input和select的污染。 3. css3属性选择器。li[class*='act']，可以选中所有class中有‘act’的li元素。 $('li').attr('class').indexOf('act')只是获取第一个li的class，然后判断是否有‘act’ 通过for循环可以进一步操作， for(var i = 0i <$("li[class*='act']").lengthi++){ $("li[class*='act']")[i] . . . } 4.清除浮动，解决高度塌陷 a.伪类(抄袭bootstrap的做法) .clearfix{} .clearfix:after{ display:tablecontent:' 'clear:both} b.王妮的做法 .box{ clear:bothoverflow:hidden} c.对于子元素写margin-top把父级拖下来的情况（百度说是W3C的标准，只要破坏了父级子级紧贴的结构就可以了）给父级写border-top，或者给父级写padding-top。采用b方法也可以，a方法无效。 5. css高度单位和颜色单位 height:calc（100vh - 200px）目前来看，兼容性还不错。注意，减号两边是有空格的。 background:rgba（255，255，255，0.5）rgb颜色值和颜色透明度。 6.关于 padding-top:100%padding-left:100% 可以利用这两个属性做绝对正方形。比如微信朋友圈的照片9宫格，qq空间的照片9宫格，sina微博的照片9宫格。屏幕宽度未知，一行排3个，每个宽度都是33.33333%，但是高度不能写百分比了。在每个宽度为33.3333%的元素里再写一个div，这个div的默认宽度就是父级的33.33333%，再用padding-top:100%把高度撑开，padding-top:%就是根据已有宽度计算，padding-top:100%padding-top的px值就和宽度相同，这样，正方形就做出来了，在正方形里面position:absolute一个div，width:100%height:100%然后在这个div里面布局就好。每个正方形的间距可以用qq空间的2px的透明边框来做，也可以像sina微博一样，用左右padding和margin-bottom来做。一张图和四张图的时候，sina是另外写两个class来做的。 qq空间是js插件写进去的，最大宽度是290px，高度是根据最大宽度计算出来的。 7. 0.5px的线 a.发现qq空间的细线，兼容2倍屏和3倍屏 @media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) { .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after { -webkit-transform:scaleY(.5) -moz-transform: scaleY(.5) -ms-transform: scaleY(.5) -o-transform: scaleY(.5) transform: scaleY(.5) } .action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after { -webkit-transform-origin: 100% 0 -moz-transform-origin: 100% 0 -ms-transform-origin: 100% 0 -o-transform-origin: 100% 0 transform-origin: 100% 0 } .action.flex:after,.action.flex>.btn:after,.feed .source:after { -webkit-transform-origin: 0 100% -moz-transform-origin: 0 100% -ms-transform-origin: 0 100% -o-transform-origin: 0 100% transform-origin: 0 100% } } @media only screen and (-webkit-device-pixel-ratio: 1.5) { .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after { -webkit-transform:scaleY(.6666) -moz-transform: scaleY(.6666) -ms-transform: scaleY(.6666) -o-transform: scaleY(.6666) transform: scaleY(.6666) } } @media only screen and (-webkit-device-pixel-ratio: 3) { .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after { -webkit-transform:scaleY(.33) -moz-transform: scaleY(.33) -ms-transform: scaleY(.33) -o-transform: scaleY(.33) transform: scaleY(.33) } } b. weui的作法是 .weui-cells:after { content: " " position: absolute left: 0 bottom: 0 right: 0 height: 1px border-bottom: 1px solid #e5e5e5 color: #e5e5e5 -webkit-transform-origin: 0 100% transform-origin: 0 100% -webkit-transform: scaleY(0.5) transform: scaleY(0.5) z-index: 2 } 8.背景图片尺寸background-size，img标签object-fit，object-position。 background-size:contain | cover | auto 90% | 50% auto 这是以背景图的方式展示图片的，如果用img元素的话， object-fit:fill | contain | cover | none | scale-down（和background-size效果类似） object-position:center和background-position的取值一样。这两个属性一起用的话，就能让img元素src的图片效果像背景图片的效果一样，不会因为图片尺寸不成比例而走形。但是兼容性不太好，目前只适合在移动端用。 9.阻止手机弹出默认菜单，长按img标签或者长按a标签会弹出系统默认菜单（ios上，安卓上没测）。 -webkit-touch-callout:none 10.给文字写行高时，让文字垂直居中时，要把高度也一起写了，line-height:35pxheight:35px 在用appcan做hybrid app时，发现在华为meta8上，用 ul li 做九宫格，li 浮动排在一行时，每个 li 有文字，高度用li的行高撑开的，没有文字的 li 和有文字的 li 的高度是不一样的。有的格子有文字有的没有文字，导致九个格子没有排在3行，有格子掉下去了，排成了4行。所以，在用行高让文字居中时，高度和行高要都写上。 11. text-align:justify p标签内大段文字时，除了最后一行，其余的文字都是左对齐，导致段落文字距离右边间距明显大于左边。可以利用这个属性不处理最后一行的特性，做这种布局：上面这个布局有一点bug，最后一行是留白，把父级撑高了，原因是父级认为所有子代，包括空文本节点都是占据空间的，哪怕空格，也占据空间。可以给父级 ul 写 font-size:0；就能把底部留白去除了，然后给子代再写font-size:14px就可以了。但是，text-align:justify毕竟是处理空格（拉伸空格来使内部元素水平分散），所以在html中，li 要是连着写和分段写，表现结果是不一样的，所以这种奇妙的布局还是有些许不完美，甚至不能用。 12.去除-webkit-的滚动条 #content::-webkit-scrollbar{ display：none} 设置滚动条样式 /*滚动条宽度*/ #content::-webkit-scrollbar{ width:5px} /*滚动条滑块*/ #content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25)border-radius:3px} /*滚动条的整个背景*/ #content::-webkit-scrollbar-track-piece{ background:#eee} TGuide /* scrollbar */ ::-webkit-scrollbar{width:10pxheight:10px} ::-webkit-scrollbar-button{display:none} ::-webkit-scrollbar-track{background-color:black} ::-webkit-scrollbar-track-piece{background:#FFF} ::-webkit-scrollbar-thumb{background-color:#8E8E8Eborder-radius:5px} ::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B} ::-webkit-scrollbar-corner{background-color:#535353} /*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/ 前面不加选择器表示，所有出现滚动条的元素。 13.设置placeholder的样式 input::-webkit-input-placeholder{ color:#999} input::-moz-input-placeholder{ color:#999} input:-ms-input-placeholder{ color:#999} 注意 -ms- 前面是一个 “ ：”。 14.移动端点击某一行 :active 时添加背景色，比如 li:active{ background:#eee} 时，要给 body标签上写ontouchstart，否则没有效果。另一方面，给body添加，可以阻止图片被默认拖拽。百度的logo就可以被拖拽。 15.pageshow（）和pagehide（）方法。问题描述：A页面跳转到B页面，在B页面操作后，返回到A页面，A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面，微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如，修改姓名，修改性别。从A页面点击input跳转到B页面进行修改操作，修改完成之后返回A页面，发现信息没有刷新，此时需要主动触发。解决方法：可以监听pageshow方法，用addEventListener方法进行监听。pageshow（）方法的触发条件是，只要页面被显示就触发，比如appcan里的B页面覆盖在A页面，把B页面关闭，A页面自然就展现出来了，那么A页面的pageshow方法就会触发；微信里，点击返回，虽然是从缓存里取页面，但也会触发pageshow方法。pagehide（）顾名思义。 16.关于position。华为meta7，安卓版本4.4.2，position:relative的元素比position:absolute的元素层级要高。百度新闻的导航效果，也是利用了这个。很奇怪。这种结构，i.line是absolute，每个div都是relative，安卓4.4.2上 i.line 会被父级的兄弟div遮挡住。解决办法是，把 i.line 拿出来，和div同级。 17. background:url() no-repeat center, url() no-repeat center可以一次性放两个图片，中间用逗号隔开。 18.关于移动端软键盘弹起，盖住页面的问题。核心解决办法是利用 document.activeElement.scrollIntoView(false)参数false，表示activeElement的元素与页面下边对齐，true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。另一个方法与之类似 document.activeElement.scrollIntoViewIfNeeded()这个方法效果不是很好，没有上面那个好用。 19.常见于小说、报纸排版的column布局。常用的5个属性有4个是知晓效果的： column-width:每列的宽度。 column-gap:列与列之间的间距。 column-fill:不知有何软用。 column-rule:列与列直接的分割线，与border属性效果一样。 column-count:总共分多少列。（这个属性受column-width限制，当同时写上column-width和column-count时，以column-width优先，比如总宽度800px，height:200pxcolumn-width:400pxcolumn-count:4显然，800px最多只能分2列，所以优先以column-width进行计算。）小兼容：ios上，横向滚动 overflow-x:auto的容器不适合直接当成分栏布局的容器，应该在 overflow-x 的元素内嵌套一个div当做分栏布局的容器。否则会出现，分栏线，column-rule不跟随容器滚动的奇异现象。另外，column-gap不适合赋值，应当将column-gap写成0，列与列之间的间距可以用分栏布局的子元素的左右padding来做。大段文字 .box{ width:300pxheight:14emoverflow-x:auto} /*滚动的容器*/ .col{ height:11.9emtext-align:justifycolumn-count:2column-gap:0} /*分栏的容器*/ .col >p{ padding:0 .5emline-height:1.2} /*文字内容的容器，加左右padding以增加列与列之间的间距。*/ 四、貌似很多webapp都会写两个meta标签不确定是否支持16进制的颜色值。（好像测试过，16进制颜色没有效果。在appcan里也没有效果。）五、一般不能上传相同图片可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset()重置后就可以了。六、在安卓上touchmove出现了神奇的bug，百度上说，安卓上touchmove的一瞬间就会触发touchcancel，touch事件就全部被取消了。IOS上是没有这个问题的。解决方法是：在touchmove里写e.preventDefault()即可。但是这样的话，手指滑动页面就不能scroll了。页面将无法滚动了。七、flex布局 1. 2012年以后的版本给父级添加 display:-webkit-flexdisplay:flex flex盒子内子元素的排列方向称作主轴，与主轴垂直的称作交叉轴。 flex盒子内的子元素可以被作项目。注意：设为flex后，其子元素的float、clear、vertical-align属性就会失效。 a.作用于父级的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。 //子元素的排列方向 flex-direction:row（默认值，从左到右） | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上） //子元素是否换行 flex-wrap:nowrap（默认值，不换行） | wrap（换行） | wrap-reverse（换行，但第一行在下方） //子元素排列方向和子元素是否换行的简写 flex-flow:row nowrap（默认值，从左到右，不换行。） //项目（子元素）在主轴上的对齐方式 justify-content:flex-start（默认值，以起点为始） | flex-end（以终点为始） | center（居中） | space-between（首尾两个元素紧贴边界，其余元素之间间隔相等） | space-around（每个项目的两侧间隔相等，相当于给每个项目加了margin，并且左右margin相等。所以首尾元素与边界都是有间距的。） //项目（子元素）在交叉轴上的对齐方式 align-items:flex-start（以起点为始） | flex-end（以终点为始） | center（居中） | baseline（与项目的第一行文字的基线对齐） | stretch（默认值，在交叉轴方向撑满父级） //多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。 align-content:flex-start（与交叉轴的起点对齐） | flex-end（与交叉轴的终点对齐） | center（与交叉轴的中点对齐） | space-between（与交叉轴两端对齐，轴线之间的间隔平均分布） | space-around（每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍，第一行和最后一行不会紧贴边框） | stretch（默认值，铺满整个交叉轴）（ align-content：stretch第一根轴线与边框对齐，其他轴线均分父级间隙。） b.作用于项目（子元素）的6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。 //子元素的排列顺序 order:0（默认值） | 1 | 2 | 3 . . . //项目（子元素）的放大比例 flex-grow:0（默认值，默认不放大，尽管有剩余空间） | 1 | 2 | 3 . . . //项目的缩小比例 flex-shrink:1（默认值，当空间不足时，该项目将缩小） | 0（不论如何，都不缩小） //项目占据的主轴空间 flex-basis:auto（默认值，项目本来的大小） | 固定值（200px，50%，100% . . .） //flex-grow，flex-shrink，flex-basis的简写 flex ：0 1 auto； flex:0 1 auto（默认值，有多余空间也不放大，但空间不足会缩小，默认占据空间就是自身大小） flex:auto=>flex：1 1 auto根据空间大小，可放大可缩小。（有兼容性问题，chrome可以正常解析 flex：auto-- flex：1 1 auto但 IE 就搞笑了，IE10解析出来的flex：auto -- flex：1 0 auto；只放大，不缩小。IE11解析出来的flex：auto；和chrome一样，可放大可缩小。所以在用这个属性的时候，要写完整值，不要简写。） flex:none； -- flex：0 0 auto；不放大，也不缩小。 //单个项目与其他项目不一样的对齐方式，会覆盖父级的align-items align-self:auto（默认值，继承父级的align-items的值） | flex-start | flex-end | center | baseline | stretch除了auto，其他的与父级align-items属性一致。注意要活用align-self：stretch和align-items：stretch 2. 2009年的版本目前新版本被支持的很好，所以旧版的直接写带前缀的。 display:-webkit-boxdisplay:-ms-flexbox 子元素如果有display：inline的，要把子元素写成display：block2012年的版本不需要。 a.父级的5个属性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。 //项目在主轴上的对齐方式 -webkit-box-pack:start（默认值，从起点开始） | end | center | justify //项目在交叉轴上的对齐方式 -webkit-box-align:stretch（默认值，交叉轴方向撑满父级） | start | end | center | baseline //项目的排列顺序 -webkit-box-direction:normal（默认值，以起点为始） | reverse（以终点为始） //主轴方向 -webkit-box-orient:horizontal（默认值，水平方向） | vertical（垂直方向） | inline-axis（行内方式，映射为horizontal） | block-axis（块方式排列，映射为vertical） //项目（子元素是否换行） box-lines:single（默认值，不允许） | multiple（允许）经测试，没有浏览器支持，这个属性不能用。 b.子元素的3个属性。box-flex，box-flex-group，box-ordinal-group。 //是否缩放 -webkit-box-flex:0（默认值，不放大也不缩小） | 1 | 2 | 3 . . . //子元素排列次序 -webkit-box-ordinal-group:1 | 2 | 3 . . . 从小到大排列。 3. 对 1、2 的小结。 2012年版本比2009年的版本主要多了两个属性，1个是子元素是否换行，flex-wrap，2009年的box-lines不起作用。还有一个是子元素在主轴的对齐方式，2012年的justify-content:space-around2009年的没有这个效果，但是可以通过加左右padding值的方式做到。如果要兼容2009年版本的盒子布局又想换行的，只能改用float布局。八、html结构嵌套问题 p标签内不要嵌套块元素，其他的像h、p、dl . . .的块元素都会发生解析错误。可以嵌套行间元素。类似的，还有a标签里不能再出现a标签，嵌套多少层都不行。 html标签嵌套要按照块元素包含行间元素的规则来写。九、标签让浏览器用最新内核渲染。十、form标签一点特性在移动端，input框获取焦点时，浏览器会弹出软键盘，想让软键盘的enter键变成搜索两个字，需要让这个input按照这种结构写：说明：onsubmit='return false'阻止表单默认提交，便于自己操作。 input 的 type 必须是 search。 input 的加了style='position：relative'，防止ios上点击搜索按钮会闪屏（白屏）。十一、浏览器兼容 1.关于table表格的宽度设置问题。 Firefox和chrome的解析方式是不一样的，chrome会把你写的table宽度全部转化成px。Firefox则不会，所以在td写行间样式宽度时，不能百分比和px混用，要统一，要么每个td都写百分比的宽，要么都写px的宽；不要这几个td写百分比，那几个td写px。 2.某些安卓不识别height:calc（）可以用flex布局代替。十二、KTV字幕效果实现方式1：把文字写两遍，两个行间元素span，包裹相同的文字。首页首页或者首页首页实现原理是：让内部两个span宽度相等，其中一个设置width:0%；overflow:hidden然后用js动态控制width从0% -- 100%。实现方式2：（张鑫旭说只适用于chrome，但是我测了下，好像firefox也是可以的。）实现原理：background-image是覆盖在background-color上的，chrome有个私有属性 -webkit-background-clip:text意为背景裁切，以文字为裁切起止。效果就是背景图片只会展示文字的书写路径，除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent将文字渲染的颜色写为透明，这样，文字路径就透出了背景图。再改变背景图片的水平位置，就能露出文字和背景图片下的背景颜色，就做到KTV字母效果了。核心的css属性： background-image:url()/*纯色的背景图，用来渲染文字颜色，因为文字是透明的。*/ background-repeat:no-repeat -webkit-background-clip:text -webkit-text-fill-color:transparent background-position:0 0 ↑改变他就可以了。关于实现方式2的图示：

探究 CSS 解析原理

吃早饭的时候，同事随意问了一句：你知道 CSS 是怎么解析的吗？我一头雾水。对哦，作为前端，每天都在与 CSS 打交道，我竟然忽视了最基本的原理。

一、浏览器渲染

开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：

正如上图所展示的，我们浏览器渲染过程分为了两条主线：

其一，HTML Parser 生成的 DOM 树；

其二，CSS Parser 生成的 Style Rules ；

在这之后，DOM 树与 Style Rules 会生成一个新的对象，也就是我们常说的 Render Tree 渲染树，结合 Layout 绘制在屏幕上，从而展现出来。

本文的重点也就集中在第二条分支上，我们来探究一下 CSS 解析原理。

二、Webkit CSS 解析器

浏览器 CSS 模块负责 CSS 脚本解析，并为每个 Element 计算出样式。CSS 模块虽小，但是计算量大，设计不好往往成为浏览器性能的瓶颈。

CSS 模块在实现上有几个特点：CSS 对象众多(颗粒小而多)，计算频繁(为每个 Element 计算样式)。这些特性决定了 webkit 在实现 CSS 引擎上采取的设计，算法。如何高效的计算样式是浏览器内核的重点也是难点。

先来看一张图：

Webkit 使用 Flex 和 Bison 解析生成器从 CSS 语法文件中自动生成解析器。

它们都是将每个 CSS 文件解析为样式表对象，每个对象包含 CSS 规则，CSS 规则对象包含选择器和声明对象，以及其他一些符合 CSS 语法的对象，下图可能会比较明了：

Webkit 使用了自动代码生成工具生成了相应的代码，也就是说词法分析和语法分析这部分代码是自动生成的，而 Webkit 中实现的 CallBack 函数就是在 CSSParser 中。

CSS 的一些解析功能的入口也在此处，它们会调用 lex , parse 等生成代码。相对的，生成代码中需要的 CallBack 也需要在这里实现。

举例来说，现在我们来看其中一个回调函数的实现，createStyleRule(),该函数将在一般性的规则需要被建立的时候调用，代码如下：

CSSRule* CSSParser::createStyleRule(CSSSelector* selector) { CSSStyleRule* rule = 0 if (selector) { rule = new CSSStyleRule(styleElement) m_parsedStyleObjects.append(rule) rule->setSelector(sinkFloatingSelector(selector)) rule->setDeclaration(new CSSMutableStyleDeclaration(rule, parsedProperties, numParsedProperties)) } clearProperties() return rule }

从该函数的实现可以很清楚的看到，解析器达到某条件需要创建一个 CSSStyleRule 的时候将调用该函数，该函数的功能是创建一个 CSSStyleRule ，并将其添加已解析的样式对象列表 m_parsedStyleObjects 中去，这里的对象就是指的 Rule 。

那么如此一来，经过这样一番解析后，作为输入的样式表中的所有 Style Rule 将被转化为 Webkit 的内部模型对象 CSSStyleRule 对象，存储在 m_parsedStyleObjects 中，它是一个 Vector。

但是我们解析所要的结果是什么？

通过调用 CSSStyleSheet 的 parseString 函数，将上述 CSS 解析过程启动，解析完一遍后，把 Rule 都存储在对应的 CSSStyleSheet 对象中；

由于目前规则依然是不易于处理的，还需要将之转换成 CSSRuleSet。也就是将所有的纯样式规则存储在对应的集合当中，这种集合的抽象就是 CSSRuleSet；

CSSRuleSet 提供了一个 addRulesFromSheet 方法，能将 CSSStyleSheet 中的 rule 转换为 CSSRuleSet 中的 rule ；

基于这些个 CSSRuleSet 来决定每个页面中的元素的样式；

这里描述了大致过程，深入阅读可以查看如下链接：

Webkit CSS 引擎分析CSS 样式表解析过程Webkit CSS实现

三、CSS 选择器解析顺序

可能很多同学都知道排版引擎解析 CSS 选择器时是从右往左解析，这是为什么呢？

1.HTML 经过解析生成 DOM Tree（这个我们比较熟悉）；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。Render Tree 中的元素（WebKit 中称为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。

2.在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。

3.因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。

4.如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。

对于上述描述，我们先有个大概的认知。接下来我们来看这样一个例子，参考地址：

CSS 选择器：

div >div.jartto p span.yellow{ color:yellow}

对于上述例子，如果按从左到右的方式进行查找：

1.先找到所有 div 节点；

2.在 div 节点内找到所有的子 div ,并且是 class = “jartto”；

3.然后再依次匹配 p span.yellow 等情况；

4.遇到不匹配的情况，就必须回溯到一开始搜索的 div 或者 p 节点，然后去搜索下个节点，重复这样的过程。

这样的搜索过程对于一个只是匹配很少节点的选择器来说，效率是极低的，因为我们花费了大量的时间在回溯匹配不符合规则的节点。

如果换个思路，我们一开始过滤出跟目标节点最符合的集合出来，再在这个集合进行搜索，大大降低了搜索空间。来看看从右到左来解析选择器：

1.首先就查找到的元素；

2.紧接着我们判断这些节点中的前兄弟节点是否符合 P 这个规则，这样就又减少了集合的元素，只有符合当前的子规则才会匹配再上一条子规则。

结果显而易见了，众所周知，在 DOM 树中一个元素可能有若干子元素，如果每一个都去判断一下显然性能太差。而一个子元素只有一个父元素，所以找起来非常方便。

试想一下，如果采用从左至右的方式读取 CSS 规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样会做费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

浏览器 CSS 匹配核心算法的规则是以从右向左方式匹配节点的。这样做是为了减少无效匹配次数，从而匹配快、性能更优。

深入阅读，请移步：

jQuery 源码解析CSS 选择器从右向左的匹配规则CSS 选择器

四、CSS 语法解析过程

CSS 样式表解析过程中讲解的很细致，这里我们只看 CSS 语法解释器，大致过程如下：

1.先创建 CSSStyleSheet 对象。将 CSSStyleSheet 对象的指针存储到 CSSParser 对象中。

2.CSSParser 识别出一个 simple-selector ，形如 “div” 或者 “.class”。创建一个 CSSParserSelector 对象。

3.CSSParser 识别出一个关系符和另一个 simple-selecotr ，那么修改之前创建的 simple-selecotr, 创建组合关系符。

4.循环第3步直至碰到逗号或者左大括号。

5.如果碰到逗号，那么取出 CSSParser 的 reuse vector，然后将堆栈尾部的 CSSParserSelector 对象弹出存入 Vecotr 中，最后跳转至第2步。如果碰到左大括号，那么跳转至第6步。

6.识别属性名称，将属性名称的 hash 值压入解释器堆栈。

7.识别属性值，创建 CSSParserValue 对象，并将 CSSParserValue 对象存入解释器堆栈。

8.将属性名称和属性值弹出栈，创建 CSSProperty 对象。并将 CSSProperty 对象存入 CSSParser 成员变量m_parsedProperties 中。

9.如果识别处属性名称，那么转至第6步。如果识别右大括号，那么转至第10步。

10.将 reuse vector 从堆栈中弹出，并创建 CSSStyleRule 对象。CSSStyleRule 对象的选择符就是 reuse vector, 样式值就是 CSSParser 的成员变量 m_parsedProperties 。

11.把 CSSStyleRule 添加到 CSSStyleSheet 中。

12.清空 CSSParser 内部缓存结果。

13.如果没有内容了，那么结束。否则跳转值第2步。

五、内联样式如何解析？

通过上文的了解，我们知道，当 CSS Parser 解析完 CSS 脚本后，会生成 CSSStyleSheetList ，他保存在Document 对象上。为了更快的计算样式，必须对这些 CSSStyleSheetList 进行重新组织。

计算样式就是从 CSSStyleSheetList 中找出所有匹配相应元素的 property-value 对。匹配会通过CSSSelector 来验证，同时需要满足层叠规则。将所有的 declaration 中的 property 组织成一个大的数组。数组中的每一项纪录了这个 property 的selector，property 的值，权重（层叠规则）。

可能类似如下的表现：

p >a { color : red background-color:black} a { color : yellow} div { margin : 1px}

重新组织之后的数组数据为(weight我只是表示了他们之间的相对大小，并非实际值。）

selector property weight 1, a color:yellow 1 2, p >a color:red 2 3, p >a background-color:black 2 4, div margin:1px 3

好了，到这里，我们来解决上述问题：

首先，要明确，内敛样式只是 CSS 三种加载方式之一；

其次，浏览器解析分为两个分支，HTML Parser 和 CSS Parser，两个 Parser 各司其职，各尽其责；

最后，不同的 CSS 加载方式产生的 Style rule ，通过权重来确定谁覆盖谁；

到这里就不难理解了，对浏览器来说，内联样式与其他的加载样式方式唯一的区别就是权重不同。

深入了解，请阅读Webkit CSS 引擎分析

六、何谓 computedStyle ？

到这里，你以为完了？Too young too simple, sometimes naive!