css3复杂选择器
2021-01-15 10:11
标签：http 伪元素 注意 some 启用 line bip check 选择器 今天antd表格设置样式 ，被教育了一番，上来第一感觉这样式咋搞啊，一脸懵逼，还是css 掌握不牢固，今天记下css3复杂选择器。 1.相邻兄弟选择器 P+b : 同一个父元素下p标签后面的第一个兄弟元素b； 2.通用兄弟选择器 p~b : 同一个父元素下p标签后面的所有兄弟元素b； 3.属性选择器 将元素属性用于选择器中，从而获取指定元素属性或者值得元素； 语法： [属性] ： 匹配 "指定属性" 的 "所有" 元素； 元素[属性] ： 匹配 "指定属性" 的 "指定" 元素； input[type] : 获取具备type属性的input； input[id] : 获取具备id属性的input； 元素[属性][属性] ：匹配 "多个指定属性" 的 "指定" 元素； 元素[属性="值"] ：匹配 "指定属性等于值" 的 "指定" 元素； 元素[属性~="值"] ： 匹配 "指定属性中包含这个值(独立的单词)" 的 "指定" 元素； 元素[属性^="值"] ： 匹配 "指定属性以指定值开始" 的 "指定" 元素； 元素[属性*="值"] ： 匹配 "指定属性包含值(可以是非独立的单词)" 的 "指定" 元素； 元素[属性$="值"] ： 匹配 "指定属性以指定值结束" 的 "指定" 元素； 元素[属性!="值"] ： 匹配 "指定属性不等于值" 的 "指定" 元素； 4.目标伪类 活动的HTML锚点，用于选取当前活动的目标元素； 语法： :target 匹配所有活动锚点 元素:target 匹配指定元素活动锚点 5.元素状态伪类 主要匹配元素的禁用，启用，选中状态 多数用在表单元素上； :disabled 匹配所有被禁用的元素 :enabled 匹配所有被启用的元素 :checked 匹配所有被选中的元素 用于单选和复选； 6.结构伪类 从元素结构(层级结构)上进行划分； 用于：找 第一个子元素，最后一个子元素，没有子元素，仅仅包含一个子元素 :first-child 匹配父元素的第一个子元素 :last-child 匹配父元素的最后一个子元素 :empty 匹配没有子元素的元素 :only-child 匹配只有一个子元素的元素 ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个li元素 E:nth-of-type()只计算父元素中指定的某种类型的子元素，当某个元素的子元素类型不只是一种时，使用nth-of-type来选择会比较有用。 E:nth-last-of-type()的用法同E:nth-of-type()相同，不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。 li:nth-of-type(3)的话就会标识它只会选择第三个li元素，别的元素会忽略掉 7.否定伪类 input:not([type="text"]){color:red;} input:not(:last-child){background:blue;} 8.伪元素选择器 :first-letter 选取指定选择器的首字符； p:first-letter{ font-size:40px; } 一帮用于排版，首字符突出等； :first-line 选取指定选择器的首行字符； ::selection 匹配用户的选取部分； 如 选中的文本等 ::selection{background:#ccc;color:red} //这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了,但是需要注意的是，::selection仅接受两个属性，一个是background，一个是color。 转载自：https://www.baidu.com/link?url=kB4JcLHvN_xS3XmpYcH9m_cfNyJ3aZVckGBqtizNartEbDP455uEPvd_nN6z3flixcgwfULBiPO485xxAopQ0K&wd=&eqid=8c48f9540001634e000000035f20e5d6 css3复杂选择器 标签：http 伪元素 注意 some 启用 line bip check 选择器 原文地址：https://www.cnblogs.com/xiaoyaoweb/p/13395959.html