Css选择器

前言何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。 作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 目录既然写文章有这么多的写作技巧，那么我也需要对CSS开发技巧整理一下，起个易记的名字。 Layout Skill：布局技巧Behavior Skill：行为技巧Color Skill：色彩技巧Figure Skill：图形技巧Component Skill：组件技巧备注 代码只作演示用途，不会详细说明语法部分技巧示例代码过长，使用CodePen进行保存，点击在线演示即可查看兼容项点击链接即可查看当前属性的浏览器兼容数据，自行根据项目兼容需求考虑是否使用以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是CSS类型一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的工程，大家一起进步Layout Skill使用vw定制rem自适应布局要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制场景：rem页面布局(不兼容低版本移动端系统)兼容：vw、calc())/* 基于UI width=750px DPR=2的页面 */html { font-size: calc(100vw / 7.5);}使用:nth-child()选择指定元素要点：通过:nth-child()筛选指定的元素设置样式场景：表格着色、边界元素排版(首元素、尾元素、左右两边元素)兼容：:nth-child())代码：在线演示 使用writing-mode排版竖文要点：通过writing-mode调整文本排版方向场景：竖行文字、文言文、诗词兼容：writing-mode代码：在线演示 使用text-align-last对齐两端文本要点：通过text-align-last:justify设置文本两端对齐场景：未知字数中文对齐兼容：text-align-last代码：在线演示 使用:not()去除无用属性要点：通过:not()排除指定元素不使用设置样式场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)兼容：:not())代码：在线演示 使用object-fit规定图像尺寸要点：通过object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸场景：图片尺寸自适应兼容：object-fit代码：在线演示 使用overflow-x排版横向列表要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看场景：横向滚动列表、元素过多但位置有限的导航栏兼容：overflow-x代码：在线演示 使用text-overflow控制文本溢出要点：通过text-overflow:ellipsis对溢出的文本在末端添加...场景：单行文字溢出、多行文字溢出兼容：text-overflow、line-clamp、box-orient代码：在线演示 使用transform描绘1px边框要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框场景：容器1px边框兼容：transform代码：在线演示 使用transform翻转内容要点：通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)场景：内容翻转兼容：transform代码：在线演示 使用letter-spacing排版倒序文本要点：通过letter-spacing设置负值字体间距将文本倒序场景：文言文、诗词兼容：letter-spacing代码：在线演示 使用margin-left排版左重右轻列表要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐场景：右侧带图标的导航栏兼容：margin代码：在线演示 Behavior Skill使用overflow-scrolling支持弹性滚动要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度场景：iOS页面滚动兼容：iOS自带-webkit-overflow-scrollingbody { -webkit-overflow-scrolling: touch;}.elem { overflow: auto;}使用transform启动GPU硬件加速要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题场景：动画元素(绝对定位、同级中超过6个以上使用动画)兼容：transform.elem { transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */}使用attr()抓取data-*要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上场景：提示框兼容：data-*、attr())代码：在线演示 使用:valid和:invalid校验表单要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容场景：表单校验兼容：pattern、:valid、:invalid代码：在线演示 使用pointer-events禁用事件触发要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)兼容：pointer-events代码：在线演示 使用+或~美化选项框要点：<label>使用+或~配合for绑定radio或checkbox的选择行为场景：选项框美化、选中项增加选中样式兼容：+、~代码：在线演示 使用:focus-within分发冒泡响应要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式场景：登录注册弹框、表单校验、离屏导航、导航切换兼容：:focus-within、:placeholder-shown代码：在线演示 使用:hover描绘鼠标跟随要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹场景：鼠标跟随轨迹、水波纹、怪圈兼容：:hover代码：在线演示 使用max-height切换自动高度要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换场景：隐藏式子导航栏、悬浮式折叠面板兼容：max-height代码：在线演示 使用transform模拟视差滚动要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影兼容：background-attachment、transform代码：在线演示 使用animation-delay保留动画起始帧要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行场景：开场动画兼容：transform、animation代码：在线演示 使用resize拉伸分栏要点：通过resize设置横向自由拉伸来调整目标元素的宽度场景：富文本编辑器、分栏阅读兼容：resize代码：在线演示 Color Skill使用color改变边框颜色要点：border没有定义border-color时，设置color后，border-color会被定义成color场景：边框颜色与文字颜色相同兼容：color.elem { border: 1px solid; color: #f66;} 使用filter开启悼念模式要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们场景：网站悼念兼容：filter代码：在线演示 使用::selection改变文本选择颜色要点：通过::selection根据主题颜色自定义文本选择颜色场景：主题化兼容：::selection代码：在线演示 ...

不多废话，先上预览https://codepen.io/Ritr/pen/W...这一次还是使用<input type="checkbox">的选中与否来实现展开、收起二级菜单的。 第一步：初始化默认二级菜单的li高度为0 选择一级菜单时，将二级菜单高度设置为20px 这样设置是为了方便我们以后添加动画效果 html <ul class="menu"> <li class="main-menu"> <label for="ck1"> <span>水果</span> </label> <input id="ck1" type="checkbox"> <ul class="sub-menu-container"> <li class="sub-menu">橘子</li> <li class="sub-menu">香蕉</li> <li class="sub-menu">苹果</li> </ul> </li> <li class="main-menu"> <label for="ck2"> <span>水果</span> </label> <input id="ck2" type="checkbox" checked> <ul class="sub-menu-container"> <li class="sub-menu checked">橘子</li> <li class="sub-menu checked">香蕉</li> <li class="sub-menu checked">苹果</li> </ul> </li> </ul>css /* 初始化 */*{ margin:0; padding:0}.container{ width:500px; margin:0 auto; text-align:center;}.menu{ width:200px; display:inline-block;}li{ list-style:none; cursor:pointer; text-align:left; text-indent:5px;}.main-menu{ background:#0099CC; margin:1px 0;}.sub-menu{ background:#00CCFF; margin:1px 0; overflow:hidden; height:0;}.sub-menu.checked{ height:20px;}效果图 第二步：选中checkbox时展开二级菜单，取消选择时收起二级菜单划重点--注意label和input之间的位置html <ul class="menu"> <li class="main-menu"> <label for="ck3"> <span>水果</span> </label> <input id="ck3" class="ck" type="checkbox"> <ul class="sub-menu-container"> <li class="sub-menu">橘子</li> <li class="sub-menu">香蕉</li> <li class="sub-menu">苹果</li> </ul> </li> <li class="main-menu"> <label for="ck4"> <span>水果</span> </label> <input id="ck4" class="ck" type="checkbox" checked> <ul class="sub-menu-container"> <li class="sub-menu">橘子</li> <li class="sub-menu">香蕉</li> <li class="sub-menu">苹果</li> </ul> </li> </ul>css ...

CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。 简单的语法介绍[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。子串值（Substring value）属性选择器，下面几个属于 CSS3 新增语法，也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式。 [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串CSS 属性选择器的最基本用法属性选择器最基本的用法，就是通过元素的属性值去选择 DOM 元素。像这样，将选中所有带 href 属性的DOM 元素： [href] { color: red;}CodePen Demo -- 属性选择器基本用法 ...

《PHP 面试问答》结合实际 PHP 面试，系统的汇总面试中的各种各样的问题，尝试提供简洁准确的答案。如果你在 PHP 面试中遇到问题，欢迎提 Issues 交流。包含网络协议、数据结构与算法、PHP、Web、MySQL、Redis、Linux、安全、设计模式、架构、自我介绍、离职原因、职业规划、准备问题等部分基本规则通过 CSS 可以向文档中的一组元素类型应用某些规则利用 CSS，可以创建易于修改和编辑的规则，且能很容易地将其应用到定义的所有文本元素规则结构每个规则都有两个基本部分：选择器和声明块；声明块由一个或多个声明组成；每个声明则是一个属性-值对每个样式表由一系列规则组成如规则左边所示，选择器定义了将影响文档中的哪些部分规则右边包含声明块，它由一个或多个声明组成。每个声明是一个 CSS 属性和该属性的值的组合元素选择器最常见的选择器往往是 HTML 元素。文档的元素就是最基本的选择器声明和关键字声明块包含一个或多个声明。声明总有如下格式：一个属性后面跟一个冒号，再后面是一个值，然后是一个分号。冒号和分号后面可以有0个或多个空格如果一个属性的值可以取多个关键字，在这种情况下，关键字通常由空格分隔。并不是所偶属性都能接受多个关键字，不过确实有许多属性是这样p {font: medium Helvetica;}选择器通配选择器CSS2引入了一种新的简单选择器，称为通配选择器（universal selector），显示为一个星号（）。这个选择器可以与任何元素匹配，就像是一个通配符 {color: red;}类选择器要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。在使用类选择器之前，需要修改具体的文档标记，以便选择器正常工作为了将一个类选择器的样式与元素关联，必须将 class 属性指定为一个适当的值*.warning {font-weight: bold;}p.warning {font-weight: bold;}.warning {font-weight: bold;}多类选择器.warning {font-weight: bold;}.urgent {font-style: italic;}.warning.urgent {background: silver;}ID 选择器ID 选择器前面有一个 # 号ID 选择器不引用 class 属性的值在一个 HTML 文档中，ID 选择器会使用一次，且仅一次*#first-para {font-weight: bold;}#first-para {font-weight: bold;}属性选择器在某些标记语言中，不能使用类和 ID 选择器。为了解决这个问题，CSS2引入了属性选择器（attribute selector），它可以根据元素的属性及属性值来选择元素简单属性选择如果希望选择某个属性的元素，而不讨论该属性的值是什么，可以使用一个简单属性选择器<h1 class=“hoopla”>Hello</h1><h1 class=“severe”>Serenity</h1><h1 class=“fancy”>Fooling</h1>h1[class] {color: silver;}img[alt] {border: 3px solid red;} /对所有带有 alt 属性的图像应用样式/[title] {font-weight: bold;} /包含标题(title)信息的所有元素变为粗体显示/根据具体属性值选择除了选择有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素/将指向 Web 服务器上某个特定超链接变成粗体/a[href=“https://blog.maplemark.cn”] {font-weight: bold;}<planet>Venus</planet><planet moons=“1”>Earth</planet><planet moons=“2”>Mars</planet>/将第二个元素文本变成粗体/planet[moons=“1”] { font-weight: bold;}根据部分属性值选择如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择img[title~=“Figure”] {border: 1px solid gray;}子串匹配属性选择器类型描述[foo^=“bar”]选择 foo 属性值以"bar"开头的所有元素[foo$=“bar”]选择 foo 属性值以"bar"结尾的所有元素[foo=“bar”]选择 foo 属性值中包含子串"bar"的所有元素特定属性选择类型<h1 lang=“en”>Hello!</h1><p lang=“en-us”>Greetings!</p><div lang=“en-au”>G’day!</div><p lang=“fr”>Bonjour!</p><h4 lang=“cy-en”>Jrooana!</h4>*[lang|=“en”] {color: white;}这种属性选择器最常见的用途是匹配语言值后代选择器通过文档树结构，可以很形象的理解什么是后代选择器（descendant selector），也称为包含选择器/上下文选择器。定义后代选择器就是来创建一些规则，它们仅在某些结构中起作用，而在另外一些结构中不起作用<div class=“row”><p>文字一</p></div><div class=“row”><div><p>文字一后代</p></div></div><div class=“row”>文字二</div><p>文字三</p>.row p{color: red;}选择子元素在某些情况下，可能并不想选择一个任意的后代元素；而是希望缩小范围，只选择另一个元素的子元素.row > p{color: red;}选择相邻兄弟元素<ol> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li></ol><ul> <li>A list item</li> <li>Another list item</li> <li>Yet Another list item</li> <li>Lat list item</li></ul>ol + ul {font-weight: bold;} /将命中 ul/ul 必须紧跟在 ol 后面伪类选择器锚类型称为伪类链接伪类CSS2.1定义了两个只应用于超链接的伪类伪类名描述:link指示作为超链接并指向一个未访问地址的所有锚:visited指示作为已访问超链接的所有锚a {color: black;}a:link {color: bule;}a:visited {color: red;}动态伪类CSS2.1定义了3个动态伪类，它们可以根据用户行为改变文档的外观伪类名描述:focus指示当前拥有输入焦点的元素:hover指示鼠标指针停留在哪个元素上:active指示被用户输入激活的元素伪类顺序：link-visited-focus-hover-active选择第一个子元素可以使用静态伪类:first-child 来选择元素的第一个子元素p:first-child {font-weight: bold;}伪元素选择器就像伪类为锚指定幻像类一样，伪元素能够在文档中插入假象的元素，从而得到某种效果。CSS2.1中定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和之后元素的样式设置首字母样式p:first-letter {color: red;}设置第一行样式p:first-line {color: purple;}:first-letter 和 :first-line 的限制在 CSS2 中，:first-letter 和:first-line 伪元素只能应用于标记或段落之类的块级元素，而不能应用于超链接等的行内元素设置之前和之后元素的样式p:before {color: black;}p:after {color: red;}本文转载自枫叶林博客，《CSS选择器的分类》 ...

1、什么是css权重？css6大基础选择器css权重指的是css6大基础选择符的优先级，优先级高的css样式会覆盖优先级底的css样式，优先级越高说明权重越高，反之亦然。css6大基础选择器：a）、id选择器(#box{})b）、类选择器(.box{})c）、属性选择器(a[href=“http://www.xxx.com”])d）、伪类和伪对象选择器(:hoevr{}和::after{})e）、标签类型选择器(div{})f）、通配符选择器(*{})2、css权重计算规则计算css权重是有一定规则的，根据w3c制定的css规范，css权重计算规则如下：a）、计算选择符中的id选择器的数量 一个id选择器为一个a，一个a为100 b）、计算选择符中的类选择器、属性选择器以及伪类选择器的数量 一个类选择器、属性选择器以及伪类选择器为一个b，一个b为10 c）、计算标签类型选择器和伪对象选择器的数量 一个标签类型选择器、伪对象选择器为一个c，一个c为1 d）、忽略通配符选择器 通配符选择器忽略不计如下面这张图就是一个css选择器权重的例子：如果两个选择符的权重相同，则可依照”就进原则”来判断，最后定义的选择符会被采用。但尽量避免出现这种依靠定义的顺序决定选择符优先级的情况，因为在后续的维护中很难保证定义的顺序不会被打乱。

本次测试主要参考文档为w3school CSS 选择器参考手册(主要是安卓/ios/微信小程序的css选择器兼容)入坑uniapp/小程序过程中看到dcloud/微信对支持的css选择器的描述只有六个,分别是.class,#id,element,element,element,:before,:after但是看到dcloud给uniapp写的花里胡哨的uni的ui库,还有各种花里胡哨的小程序,并且uniapp还表明支持之前各种无dom的ui库,所以我觉得事情并没有这么简单,趁着元旦放假,抽出一下午时间,本单身肥宅猿测试了下w3c提供的选择器,也当是踩一回uni/小程序的坑吧具体支持情况见下表(Y表示支持,N表示不支持)选择器css版本h5安卓ios微信小程序备注.classcss1YYYY-#idcss1YYYY-css2YNNN-elementcss1YYYY注意类似于html,body这样的选择器,非h5端会被转成pageelement,elementcss1YYYY-element>elementcss2YYYY-element+elementcss2YYYY-[attribute]css2YYYY1.h5端使用uniapp标签属性时,编译后该属性可能会消失,导致该选择器"失效",如,view的hover-class属性2.微信小程序/app端使用非规范的属性,如,<view qwe-rt=“asd”></view>在编译到微信小程序/app时会消失同样导致该选择器"失效"[attribute=value]css2YYYY同[attribute][attribute~=value]css2YYYY同[attribute][attribute|=value]css2YYYY同[attribute]:linkcss1Y—没有找到办法在非h5上生成a标签:visitedcss1Y—没有找到办法在非h5上生成a标签:activecss1YYYY在非h5的其他三端上表现与<view hover-class=“xxx”>属性一致(只测试了view标签与text标签):hovercss1YYYY表现基本同:active但是要取消该状态是要点击其他标签(让hover转移到其他标签上):focuscss2NNNN1.h5中会把<input />编译成一个uni-input>div>input+div.input-placeholder的结构,在css代码中写的类似于input:focus{background: #F00;}的样式,基本上是设置在uni-input这个标签上的,所以期望input的focus样式并不会出现(所以h5是因为uni-app对css代码的编译逻辑导致不支持input的:focus选择器)2.类似于button这些本来在正常html标签中是能在点击时获得focus状态的但在uniapp中,h5会编译成uni-button标签,这些标签没发现它能在点击后获得focus状态3.其他三端虽然没像如上描述那样转,(直接转成一个input._input,button._button)但是却不支持focus状态不知道是不是官方(dcloud/微信)故意的:first-lettercss1YYYY注意别踩坑:first-linecss1YYYY注意别踩坑:first-childcss2YYYY-:beforecss2YYYY-:aftercss2YYYY-:lang(language)css2YNNN-element1~element2css3YYYY-[attribute^=value]css3YYYY同[attribute][attribute$=value]css3YYYY同[attribute][attribute=value]css3YYYY同[attribute]:first-of-typecss3YYYY-:last-of-typecss3YYYY-:only-childcss3YYYY-:nth-child(n)css3YYYY-:nth-last-child(n)css3YYYY-:nth-of-type(n)css3YYYY-:nth-last-of-type(n)css3YYYY-:last-childcss3YYYY-:rootcss3YNNNh5端的支持只能是在app.vue的style标签里写的或者@import的样式里才能用:root:emptycss3YYYY-:targetcss3Y—没有找到办法在非h5上实现锚点:enabledcss3NNNN类似于:focus,可使用类似于button:not([disabled])的方案代替:disabledcss3NNNN类似于:focus,但是可以使用类似于button[disabled]的方案代替但是只写button[disabled]权重可能不够h5端写input[disabled]无效,原因见:focus备注但是非h5端可以写input[disabled]:checkedcss3NNNN同:disabled:not(selector)css3YYYY-::selectioncss3YYNios:N安卓:Y-至于其他厂商的小程序我也没有踩坑经验但是可参考微信小程序的兼容毕竟是微信把小程序推起来之后其他厂商才开始出小程序(最开始的时候支付宝小程序抄微信小程序源码事件还有人记得不)(好像不弄套自己家的小程序出来,自己就不是大厂了似得)求求你别更新了,我学不过来了.jpg手动狗头.jpg