2024年9月css选择器世界张鑫旭pdf（2css选择器的优先级-css选择器世界）

　　⑴css选择器世界张鑫旭pdf（css选择器的优先级-css选择器世界

　　⑵css选择器的优先级-css选择器世界

　　⑶css优先级有级。级：通配选择器、选择符和逻辑组合伪类。通配选择器是*。选择符有+、-、~、空格和||。逻辑组合伪类有:not()、:is()和:where。这些伪类影响优先级的是括号里的选择器。eg::not()级：标签选择器。级：类选择器、属性选择器和伪类。级：ID选择器级：内联选择器级：!important

　　⑷数值计算法级--优先级为；级--优先级为；级--优先级为；级--优先级为。（后来居上优先级数值相同情况下，越后面优先级越高。.增加css选择器优先级的方法（重复选择选择器自身.foo.foo{}（借助必然会存在的属性选择器.foo{}#foo{}除了这两种方法，常用的是增加父级嵌套和增加标签选择器，但这种方法增加了耦合，降低了可维护性，不建议使用。.数值计算法的点评不同级别的选择器优先级差距并不是比，差距比这大得多，而是因为实际开发中不会连续写个而已。

　　⑸在ie浏览器下，个类选择器的优先级大于id选择器的优先级，原因是类名是以字节存储的，字节所能容纳的最大值就是.除了ie外，其他都使用进制，不会出现这种情况。

　　⑹了解css选择器的优先级后，日常工作就知道是怎么回事了。是因为默认的优先级高于设置的优先级，所以显示不正确。

　　⑺CSS-属性&&选择器

　　⑻CSS选择器、CSS属性

　　⑼style写在head中间，type=“text/css“可以不用写，默认就是这个。

　　⑽规定文字样式、粗细、大小、字体的属性

　　⑾字体不存在用户电脑上时：不处理时，使用用户电脑系统默认字体处理：font-family:“不存在的字体”,“备选字体“；--设置备选字体，可设置多个备选字体

　　⑿串字符串既有中文，又有英文时，如何设置两种字体英文字体是中文字体的子集。【意思是：英文字体不能处理中文，中文字体可以处理英文】

　　⒀文本装饰、文本对齐，文本缩进的属性

　　⒁文本装饰-文字的下划线，中划线等

　　⒂格式：p{font:px,“楷体“}标签选择器选中的是页面中所有的该标签

　　⒃作用：根据指定的id名称找到对应的标签，然后设置属性。（标签选择器选中的是全部的同类标签第一步：给需要设置的标签设置id，第二步：

　　⒄注意：、id在同一页面是唯一的、id名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用HTML的标签名、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

　　⒅根据指定的类名称找到对应的标签，然后设置属性第一步：给需要设置的标签设置className，第二步：

　　⒆注意：、className是可以重复的、className名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用标签名、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。、同一个HTML变迁可以有多个classname

　　⒇id使用“,”class使用#、class相当于人名，所以同一个页面上的HTML标签可以有一样的className；id相当于身份证，所以同一个页面上的HTML标签不可以有一样的id；、class相当于人名，所以，一个HTML标签可以有多个Classid相当于身份证，所以，一个HTML标签只能有一个id、一般情况下设置样式，使用class；如果需要js配合，使用id

　　⒈先祖位置可以是HTML标签，可以是class名，可以是id后代位置可以是HTML标签，可以是class名，可以是id可以随意组合

　　⒉只会查找直接子元素格式：

　　⒊都可以使用HTML标签、id名、class名

　　⒋后代使用空格，子使用》、后代可以选取指定标签的所有特定标签，包括子、孙；而子只能选取指定标签的特定子标签

　　⒌定义：两个选择器相交的部分格式：选择器选择器{

　　⒍}选择器和选择器之间没有任何符号，没有空格，没有》

　　⒎选择器和选择器之间有逗号。

　　⒏相邻：选择器+选择器，给紧跟着选择器后面的选择器设置样式通用：选择器~选择器，给选择器后面的所有选择器设置样式

　　⒐CSS中新增的选择器最具代表性的就是序选择器.同级别的第几个:first-child选中同级别中的第一个标签:last-child选中同级别中的最后一个标签

　　⒑:nth-child(n)选中同级别中的第n个标签【n的值可以是数值，可以是“odd”、“even”,也可以是表达式，比如xn+y】:nth-last-child(n)选中同级别中的倒数第n个标签

　　⒒:only-child选中父元素中唯一的标签注意点:不区分类型

　　⒓同类型的第几个:first-of-type选中同级别中同类型的第一个标签:last-of-type选中同级别中同类型的最后一个标签:nth-of-type(n)选中同级别中同类型的第n个标签:nth-last-of-type(n)选中同级别中同类型的倒数第n个标签:only-of-type选中父元素中唯一类型的某个标签

　　⒔||选择带有target属性所有元素。||||选择target=“_blank“的所有元素。||||选择title属性包含单词“flower“的所有元素。||||选择lang属性值以“en“开头的所有元素。||

　　⒕||a[src^=“

　　⒖属性的取值是以什么结尾的

　　⒗属性的取值是否包含某个特性的值的

　　⒘使用*可为所有元素设置样式。

　　⒙根据标签为元素设置样式

　　⒚同时设置多个元素组合

　　⒛类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。

　　将类选择器指定为具体标签。这样样式的权重就提高了注意span.help-block不能写成span.help-block。标签选择器和类选择器中间加了空格的话，就变成了span下面所有class是help-block的选择器了

　　HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素内的元素（不只是子元素，是后代元素，子集，孙子级，所有的。。。。

　　子元素选择器中选择子元素，不包括孙级及以下元素。

　　用于选择紧挨着的同级兄弟元素。

　　用于选择后面的所有指定的兄弟元素或者所有元素。

　　为具有class属性的h标签设置样式

　　^以指定值开头的元素

　　$以指定值结尾的元素

　　属性内部任何位置出现值的元素，包含关系

　　~属性值中包含指定词汇的元素

　　|以指定值开头或以属性连接破折号的元素

　　关于CSS选择器有什么文章或在线教程推荐的吗

　　我也是新人，看了很多网站，推荐你去绿叶学习网，讲得非常通俗易懂，而且教程也是免费的，很难得。CSS选择器也讲得非常透彻。希望采纳！(^_^)

　　如何对网站css进行架构张鑫旭

　　文件的组织构建css系统的第一步是大纲的拟定。(我认为)css组织规划的重要性堪比网站目录结构。(htmlor注:用词夸张一点，让你加深记忆)没有哪种方案放之四海而皆准，因此我们会讨论一些基本的组织方案，以及它们各自的利弊。主css文件通常可以使用一个主css文件，来放置所有页面共享的规则。这个文件会包含默认的字体、链接、页眉和其他等样式。有了主css文件之后，我们开始探讨高级组织策略。方法一:基于原型最基本的策略是基于原型页面(archetypepage)分离css文件。假如一个网站的首页、子页面和组合页设计不同，就可以采用基于原型的策略。(这种策略下)每个页面都会有专属的css文件。在原型数量不多的情况下，这个方法简单明了、行之有效。然而，当页面元素并不按部就班的位于各个原型页时，问题就出现了。如果子页面和组合页共享某些元素，而首页却没有，我们应该怎么做呢?把共享元素放入主css文件。这虽不是最纯正的解决办法，却适用于某些具体情况。可是如果网站庞大，(这样做的话)主css文件会迅速膨胀——这就违背了分离文件的初衷:避免导入不必要的大文件。在组合页和子页面的css文件里各放一份样式代码。(这么做)就意味着要维护冗余代码，很显然我们不想这样。创建一个新的文件，由这两种页面共享。这听起来不错。不过假如只有行代码，我们创建这个文件仅仅是为了共享这行代码?(htmlor注:杀鸡用牛刀?)这方法很纯粹，但如果网站庞大有很多对页面共享很少量元素时(htmlor注:比如对页面分别共享行代码)，就显得很笨重了。创建一个单独的css文件，包含所有共享元素的样式。这方法可能比较简单，却要取决于网站的大小和共享元素的多少。有种情况会很烦:导入了一个很大的css文件，但页面只用到一小部分样式——还是那句话，这违背了分离文件的初衷。这就是我所说的重叠的两难(overlapdilemma)。零碎css规则的重叠不一而足，并没有一个完全清晰无误的方案来组织它们。方法二:基于页面元素/块如果网站使用服务器端include，这个方法会很不错。举例说明，如果使用页眉include，它会有自己相应的css文件。页脚或者其他部分的include可以如法炮制，只须导入自己的css文件。这个方法简单干净，不过可能会产生很多小css文件。举例来说，假如页脚的样式只需要行css代码，单独创建一个文件就划不来了。而且这个方法会导致每个页面都包含一堆css文件——因为有多少include，就得有多少css文件。方法三:基于标记这个方案直观实际，与前一个类似。如果网站共有个页面，其中个含有form，那么可以创建一个css文件专门处理form的样式，只在这个页面导入它。如果另外个页面含有table，就创建一个文件专门处理table样式……诸如此类。另外的组织技巧除了用主观的方法组织文件，我们还要考虑如打印、手持设备和屏幕等多种媒体类型。这虽然已经很清楚的定义过，可依旧是建立文件结构时应该考虑的一个因素。一旦必须支持多种媒体类型，主css文件里的某些规则可能就得重新考虑。另外，品牌联合也可能是一个重要因素。(htmlor注:如google和nike联手推出的joga)如果涉及品牌联合，你就得考虑哪些元素应该调整以适应另一品牌。比如分别使用不同的css文件等。还有一个常被忽略的技巧:使用嵌套的import语句。只包含一连串import语句，或者再加几句css规则，就能创建一个css文件。用这个方法完全可以创建网站的主css文件(用import导入各部分的样式文件)。假如网站的每个页面都导入了到个不同的css文件，无疑你应该考虑使用这个技巧。规则和选择器的组织谈完了文件组织，接着讨论一下怎么组织文件里的东西吧。很自然，我们希望在文件里畅通无阻的浏览，迅速找到要的选择器(selector)或规则。冗余vs.附属正如DaveShea在其文章《冗余vs.附属》(Redundancyvs.Dependency)里所说的，你必须不断了解级联(cascade)。你要决定是对选择器编组(意味着附属)，还是把它们分离(意味着冗余)。编组可以保持代码简洁扼要，可是会建立附属关系，导致维护开销增加。如果不编组，就会增加文件大小，让相似的选择器保持一致变得困难。只有做好这种权衡、取舍，才能每次都作出正确的决定。按相互关系/上下文编组既然文件组织可以是主观的，那么显然，按照规则和选择器与其他部分的相互关系来进行编组是最好的方法。举例说明，假设你用容器、页眉和页脚来完成布局，就应该把它们编成一组。这似乎很简单，其实不然。比如，把页眉中的导航加入css时，是将它跟父元素编组还是独立编组?这种情况下，要视乎规则的上下文。通常，页眉与页面布局相关，应该与其他布局元素一起编组。而导航是页眉的一块，应该和页眉的其他块编组，而不是页眉本身。使用注释跟大多数代码类似，注释是组织良好与否的关键。应该根据css的控制范围，清楚的标注每节(section)。最好确保注释视觉突出，以便在内容滚动、一目十行时快速定位。DougBowman在其文章《css组织技巧之一:标记》(CSSanizationTip#:Flags)里把css注释玩得高明之极。他详细说明了在节名之前加上等号，以便使用文本器的查找功能迅速跳到某节。别忘了你应该细致认真的了解了特异性、级联和继承，并善用它们。它们之中的每一项都可以是你最可怕的敌人，也可以是你最友善的朋友。当建立庞大的网站时，是否理解这些细微精妙之处，决定了你所构建的是坚如磐石的系统，还是经不起风雨的豆腐渣工程。(htmlor注:这句完全意译，比较爽)属性的组织现在我们了解了文件的组织，也知道了文件内规则的组织，但还有一个重要的组织环节(没有提到)，那就是属性(attribute)。虽然属性比前两个概念更简单，可是还有一些非常好的、能够保持规则整洁的方法很值得一提。按字母排序提到属性，如果说需要遵循什么原则的话，那就是:按-字-母-排-序。其实这招对于属性浏览帮助不大，不过可以防止属性值覆盖这种偶然事件的发生。举个例子吧，已经数不清有多少次，我为某个选择器定义过了margin值，之后的某天无意间又加了一个(或前或后)。(这种情况下)后一个属性自然会起作用。假设不知道第二个属性存在，不管我怎么调整第一个属性值、刷新浏览器，也看不到页面变化。(htmlor注:这个问题我深有体会)如果按照字母顺序排列，你就会发现margin被定义了两次(因为它们挨在一起)，这个问题自然可以避免。优先项当网站复杂、牵涉太多css文件时，会建立大量的附属关系。一旦需要定制某个元素特有的样式，!important选项似乎是最佳选择。没错，!important是能解一时之需，但最好搞清楚导致问题的根源，然后根据级联关系决定是否真的需要用它。如果你对上文提到的特异性、级联和继承很熟悉，大可不必抱着!important一颗树不放。(htmlor注:整片森林等着你~)当然它还是会派上用场，不过使用之前要对具体情况了然于胸。千万不要因为不知问题的症结所在而把!important当作捷径或是补救方案。小结当我们变得依赖css而使样式表日渐复杂时，就需要正确的计划来避免犯错，并使代码易于维护。既然完美无缺的方案并不存在，那么了解css的工作方式以及文件、选择器和属性的多种组织方案，无疑有助于我们写出优质的代码，经受住时间考验。网站运营

　　【css】选择器介绍（一标签选择器、id选择器、类选择器

　　如何给某一个元素添加样式呢，我们可以通过标签选择器、类选择器或者id选择器。

　　首先我们先放置两个div和一个无序列表来举例，注意无序列表的第二项内还有一个div

　　标签选择器就是按标签添加样式，直接输入标签，后加大括号即可。如下我们给div都加一个px的宽高，px的上外边距，背景颜色为粉色的样式。

　　可以看到所有的div都被添加了这个样式，不管是在哪一层，只要是div，全部都会被添加这个样式。

　　类选择器则是根据class名来添加样式，接下来给刚刚的元素添加上类名。同一个标签可以有多个类名，用空格分离；同一个类名也可以被添加给不同的标签。

　　使用类选择器时候要在类名前加一个点“.“，再接大括号。当我们给test_设置样式时，发现所有写了class=“test_“的标签都被添加了样式，不管它是什么标签。

　　我们把test_改成test_，发现所有写了class=“test_“的标签都被添加了样式。

　　id选择器也很好理解，就是根据id来添加样式，id名前使用井号“#“。但是要注意id和class不同，id就像身份证号一样是唯一的，一个id在一个页面里只能使用一次。所以一个标签只能有一个id，一个id只能给一个标签添加。

　　我们给刚刚的标签加上id，给id为d的标签添加样式：

　　选择器部分文章：选择器介绍（一标签选择器、id选择器、类选择器选择器介绍（二后代选择器，子代选择器，交集选择器，并集（群组选择器通配符选择器&清除浏览器默认样式

　　我在做移动端时遇见的css问题

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

　　有没有人学过CSS的选择器帮我写一下下面的吧谢谢样式和HTML写在一个里面就行谢谢大家

　　《divclass=“box“》《pclass=“p“》《/p》《divclass=“div“》《p》《/p》《/div》《/div》《p》《/p》或者《divclass=“box“》《pclass=“p“》《/p》《/div》《divclass=“box“》《divclass=“div“》《p》《/p》《/div》《/div》《p》《/p》