要精确地选择特定的元素或元素组来应用样式，可以使用 CSS 选择器。以下是一些常用的 CSS 选择器： 元素选择器：通过元素名称选择元素。例如，使用 p 选择所有 元素。...p { color: blue; } 类选择器：通过类名选择元素。可以在 HTML 元素中使用 class 属性来指定类名，然后在 CSS 中使用 .类名 来选择元素。...可以在 HTML 元素中使用 id 属性来指定唯一的 ID，然后在 CSS 中使用 #ID 来选择元素。例如，使用 #header 选择具有 ID 为 “header” 的元素。...ul > li { list-style: circle; } 属性选择器：通过元素的属性选择元素。可以使用方括号 [] 并在内部指定属性和相应的值来选择元素。...a:hover { text-decoration: underline; } 这些是一些常用的 CSS 选择器，通过结合使用它们，可以精确地选择特定的元素或元素组来应用样式。
近期由于受到谷歌退出中国市场的影响，就连之前可以正常使用的翻译 API 也无法使用了。 无奈之下为不影响本站的加载速率，决定暂时关闭谷歌的在线翻译功能。...只是这样做代码就更挫啦，可清晰的看到此处代码冗余的有点多，另外考虑到后续如果还要再添加按钮的话，难道也是说按 CTRL+C 和 CTRL+V 再来重复写一遍代码！那是坚决不能接受的。...于是便想到了使用 CSS 的选择器语法来支持，首先定位到这些按钮的父元素上，然后再逐一对子元素（即按钮本身）进行事件注册，这样当某个按钮被删除后也就无须 if 条件判断，同样也不用调整 JS 代码。...顺着这个思路往下走的时候，发现并不是所有按钮的事件都是相同的，得排除掉其它非同类项的按钮。 结合之前编写 SCSS 代码时的经验，是否可以使用 :first-child 这样的选择器进行排除呢？...相比于 JS 中使用 ID 或名称来定位页面元素的方式，这种使用 CSS 选择器的模式，操作起来会更的加简便和灵活。
CSS3 E:nth-child(n) { sRules } 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素 匹配父元素的第 n 个子元素...span> 第4个p 第5个p 该选择符允许使用一个 乘法因子(n) 来作为换算方式，比如我们想选中所有的偶数子元素 E，那么选择符可以写成：E...CSS3 E:nth-last-child(n) { sRules } 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 该选择符允许使用一个乘法因子...(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效 ...，也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色，虽然该 p 元素为父元素的第三个元素
目录 属性选择符 伪类选择符 CSS3属性 CSS3自适应 属性选择符 如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。...结构性伪类选择器 css中已经定义好的选择器，不能随便起名字 选择符 含义 :root 将样式绑定到页面的根元素中 :not 排除某个选择器样式 :empty 使用该选择器来制定当元素内容为空白时使用的样式...（默认匹配他们得是相同的子元素） nth-of-type(odd)奇数和:nth-of-type(even)偶数：完美解决上面的问题 3.循环使用样式 :nth-child(n)：选取每一行...n:所有行 2:倒数第2行 -n+3:最后3行 :only-child：只有一个元素时使用 4.目标伪类选择器 :target： 使用该选择器来对页面中的某个target元素（锚记链接）指定样式...IE6及以下浏览器仅支持a:hover E:focus 选择匹配的E元素，而且匹配元素获取焦点 7.伪类和伪元素的区别 css伪类： 状态伪类基于元素当前状态进行选择的。
元素；对 于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素； :nth-child(n)：返回第n个子节点，n从1开始，如果n取0，...An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素； :even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素； :odd：页面范围内的处于奇数位置的元素...:lt(2)返回从第0个和第1个ul元素； 2....利用css选择器进行选择： 元素标签名：比如说(”a“)会选出所有链接元素； #id：通过元素id进行选择，比如说(“#form1”)会选择id为form1的元素； .class：通过元素的CSS类来选择...，比如说(“.boldstyle“)会选择CSS为boldstyle类的元素； 标签 名#id.class：通过某类元素的id属性和class属性来选择，如：(a#blog.boldStyle)会选择id
（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...:nth-of-type(n)和:nth-last-of-type(n)选择器，这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n 个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第 n 个子元素和倒数第n个子元素，与元素类型无关。...:nth-of-type的值还可以设为odd或2n-1（奇数），even或2n（偶数），即为选择所有排序为奇数或偶数的元素 :empty选择器 :empty选择器用来选择没有子元素或文本内容为空的所有元素
-- 结果属于第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-child(n) { ...查找第n个子selector，后同。 } 元素的属于第 n 个子节点(单数节点：odd，偶数节点：even) --> selector:nth-of-type(n) { ... } 元素的属于第 an+b 个子节点(n从0开始的递增值，a、b为数字。)...（例：） css中，为了后续的可扩展性和可维护性，应尽量少使用id选择器，尽量不使用行内样式，且css应建立单独文档引入...CSS3 新特性 新的伪类与伪元素 选择器(基本选择器 属性选择器 伪类选择器) 背景渐变 边框圆角阴影 转换和变形 过渡 动画 盒模型(以box-sizing区分，前面有介绍。)
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（。...属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助类选择器或者 id选择器。...1、同级别（不区分类型） 父元素 E:first-child 父元素中的第一个子元素 E 父元素 E:last-child 父元素中的最后一个子元素 E 父元素 E:nth-child( n ) 父元素中的第...{ color: pink; } // 选择 ul 下的第一个元素名是 li 的子元素 nth-child( n ) 注意点：（n 可以是数字，关键字和公式） 数字：选择第 n 个子元素，里面数字从 1...，但是第 0 个元素 或者超出了元素的个数会被忽略） ul li:nth-child( n ) // 从 0 开始 每次加1 往后计算，相当于选择了所有的孩子 这里面必须是 n 不能是其他字母 偶数：2n
div~p: 选中的div后面所有的p CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。...CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。 1、格式：（第一部分） E:first-child 匹配父元素的第一个子元素E。...E:last-child 匹配父元素的最后一个子元素E。 E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。...E:nth-child(odd) 匹配奇数 E:nth-child(even) 匹配偶数 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。...（当n小于1时无效，因为n = 0 也是不会选中的） 如果选择器写成li:nth-child(2n)，则表示所有的第偶数个 li。
CSS3 浏览器支持情况 网址查询：caniuse.com CSS3的伪类选择器（一） 动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器... html部分： // disable 是状态 CSS部分：（根据状态确定样式） input :enable{} input:disable{} CSS3的伪类选择器（二） 结构伪类选择器...(****){} 选中顺序从左往右 li:nth-child(2n){} 元素的第偶数个子元素选中 li:nth-child(2n+1){} 元素的第奇数个子元素选中...li:nth-child(n+5){} 元素从第5个子元素开始选中 li:nth-child(4n+1){} 元素每4个元素选中...li:only-child{} 选择的元素是它父元素只有一个子元素 li:only-of-type{} 选择的元素是它父元素只有一个子元素，但是限制子元素的标签类型为li
css选择器选择奇数行或偶数行 实现方式有两种 方式一:nth-child /* 奇数行*/ div:nth-child(odd){ } /* 偶数行 */ div:nth-child(even)...{ } :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。...方式二:nth-of-type /* 奇数行*/ div:nth-of-type(odd){ } /* 偶数行 */ div:nth-of-type(even){ } nth-of-type(...n) : 匹配同类型中的第n个同级兄弟元素。...区别：其实两者使用起来基本上是一样的，既然我们设置奇偶样式，大多数情况也都是给同类型标签进行设置的。 参考
CSS3新增选择器 属性选择器 E[attr]只使用属性名，但没有确定任何属性值 E[type="text"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值...nth-child(n) 表示E父元素中的第n个字节点 p:nth-child(odd){background:red}/匹配奇数行/ p:nth-child(even){background:red...}/匹配偶数行*/ p:nth-child(2n){background:red} E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算 E:nth-of-type(...n) 表示E父元素中的第n个字节点，且类型为E E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算 E:empty 表示E元素中没有子节点。...表示E父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。
CSS3新特性-结构伪类选择器 在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。...定义：结构伪类选择器主要根据的是文档的结构来选择元素，常常用在根据父级选择器选出某些想要的子元素。...n 所有子元素 2n 偶数子元素 2n+1 奇数子元素 5n 第5、10、15...个子元素 n+3 从第3个子元素开始（包括第3个）到最后 -n+6 前6个子元素(注意不能写成 6-n 不生效) 其中...1. n如果是数字，就是选择第n个子元素，里面数字从1开始... 2. n如果是关键字: even代表偶数，odd代表奇数 3. n可以是公式︰常见的公式如下： 4....用法：nth-of-type(n)的用法和nth-child(n)的用法类似，只不过nth-of-type(n)会在指定类型的条件下选择子元素，其中n的取值和nth-child(n)中n的取值用法一模一样
可见性过滤选择器 ——3.1 :hidden（取不可见的元素） jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 ...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。
2.结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 3.结构伪类选择器 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） n 可以是数字...，关键字和公式 n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始… n 可以是关键字：even 偶数，odd 奇数 n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第...0 个元素或者超出了元素的个数会被忽略 ) 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 区别： nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第...先去匹配E ，然后再根据E 找第n个孩子 4.伪元素选择器（重点） 伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。...7.CSS3 过渡（重点） 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
七、CSS3 属性选择器(上) 八、CSS3 属性选择器(下) 九、结构伪类选择器 十、nth-child 参数详解 nth-child 详解 注意：本质上就是选中第几个子元素 n 可以是数字...、关键字、公式 n 如果是数字，就是选中第几个 常见的关键字有 even 偶数、odd 奇数 常见的公式如下(如果 n 是公式，则从 0 开始计算) 但是第 0 个元素或者超出了元素的个数会被忽略.../* 选择第 0 5 10 15, 应该怎么选 */ ul li:nth-child(5n) { background-color: orangered; } /* n + 5 就是从第...，不管是第几个类型 nt-of-type 选择指定类型的元素 十二、伪元素选择器 十三、伪元素的案例 十四、2D 转换之 translate 2D 转换 2D 转换是改变标签在二维平面上的位置和形状...单位，是相对于本身的宽度和高度来进行计算的 行内标签没有效果 代码演示 div { background-color: lightseagreen; width: 200px; height
会使用CSS3高级选择器美化网页 掌握HTML5新增的表单元素及属性 2、HTML5应用场景 酷炫网站制作 游戏开发 移动开发 应用开发 3、什么是HTML5 HTML5是用于取代HTML...即：样式和结构分离 8、CSS3高级选择器 选择器 描述 first-of-type p:first-of-type选择属于其父元素的首个元素 last-of-type p:last-of-type...p:last-child选择属于其父元素最后一个子元素，如果最后一个子元素不是p,则不生效 nth-child(n) p:nth-child(n)选择属于其父元素的第n个子元素，n从1开始 nth-of-type...(n) p:nth-of-type(n)选择属于其父元素的第n个p元素 :before p:before在每个元素的内容之前插入内容 :after p:after在每个元素的内容之后插入内容 last-child p:last-child选择属于其父元素最后一个子元素 nth-child(n) p:nth-child(n)选择属于其父元素的第n个子元素
下述内容主要讲述了《HTML5权威指南》第17、18章关于“使用CSS选择器（第I部分、第II部分）”。 一、前传 1....盒模型 CSS盒模型包括外边距、边框、内边距、内容四部分组成。 ? 元素盒子有两个部分是可见的：内容和边框。 元素还可以包含其他元素。...使用CSS计数器 示例：对指定内容使用计数器 选择元素指定类型的唯一子元素 :nth-child(n) 选择父元素的第n个子元素 :nth-last-child(n) 选择父元素的倒数第n个子元素 :nth-of-type...(n) 选择父元素定义类型的第n个子元素 :nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素 示例：子元素选择器 <!
元素（只用于单选按钮和复选框） 兼容性：IE9+、FireFox、Chrome、Safari、Opera 2、CSS3结构类 Element:first-child 概念：选择属于其父元素的首个子元素的每个...Element:nth-child(odd)、Element:nth-child(even) odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词（第一个的下标是 1）...Element:nth-last-child(N) 概念：匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数 兼容性：IE9+、FireFox4+、Chrome、...Safari、Opera Element:nth-of-type(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素 兼容性：IE9+、FireFox4+、Chrome、Safari...、Opera Element:nth-last-of-type(N) 概念：匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数 兼容性：IE9+、FireFox4
1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。 重点理解通过E来确定元素的父元素。...E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； div>ul>li:nth-child...E元素；（使用不是非常广泛） 没有任何的子元素，包括空格. 3、目标伪类 E:target 结合锚点进行使用，处于当前锚点的元素会被选中； CSS... 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素； :nth-last-child() ...E::selection 可改变选中文本的样式； ":" 与 "::" 区别在于区分伪类和伪元素 关于before和after CSS2中 E:before或者E:after，是属于伪类的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
