8.CSS-序选择器

最新推荐文章于 2022-09-30 22:04:50 发布
最新推荐文章于 2022-09-30 22:04:50 发布
阅读量242 收藏
点赞数
分类专栏： 笔记 css 文章标签： html5 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Veronnit/article/details/118693076
版权
本文介绍了CSS3中的序选择器，包括同级别的第几个和同类型的第几个的选择器用法，如:first-child, :last-child, nth-child(n)等，并详细解释了它们的工作原理和注意事项。" 8893008,1399166,解决vs调试器msdbg2.dll缺失问题,"['asp.net', 'vs', 'web开发', '系统调试']
摘要由CSDN通过智能技术生成

文章目录

序选择器

CSS3中新增的选择器中最具代表性的就是序选择器。

同级别的第几个

:first-child

选中同级别中的第一个标签。
注意点：不区分类型

:last-child

选中同级别中的最后一个标签。
注意点：不区分类型

nth-child(n)

选中同级别中的第n个标签。
注意点：不区分类型
:nth-child(odd)
选中同级别中的所有奇数标签；
:nth-child(even)
选中同级别中的所有偶数标签；
:nth-child(xn+y)
x和y是用户自定义，而n是一个计数器，从零开始递增。

p:nth-child(2n+0){
   
      color: red;
    }

:nth-last-child(n)

选中同级别中的倒数第n个标签。
注意点：

最低0.47元/天 解锁文章
山楂不甜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS书写顺序+选择器
weixin_45990841的博客
09-18 409
CSS书写顺序+选择器
css序选择器
haha_hello的博客
02-10 2128
一，序选择器1<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>18-css序选择器.html</title> <!-- 序选择器: css3中新增的选择器最具代表性的就是序选择器 1,同级别的第几个 :first-child 选中同级别中的第一个
CSS-4.序选择器的使用
别忘了缩进的博客
01-28 377
css序选择器分为两大阵营，一个是选择同级别的，一个是选择同类型的 同级别的第几个： :first-child{}：选中同级别中的第一个标签 注意点：不区分类型 :last-child{}：选中同级别中的最后一个标签 注意点：不区分类型 :nth-child(n){}：选中同级别中的第n个标签 注意点：不区分类型 :nth-last-chil
CSS序列选择器专题
mianmami的博客
06-14 418
first-child/last-child 选中同级别中的第一个匹配元素。 <!-- h1,p,p,div这四个元素是同一级别的，这里的第一个元素是h1，与p不匹配，不添加CSS样式 红框中的p,p这两个元素是同一级别的，这里的第一个元素是h1，与p匹配，添加CSS样式 --> <html > <head> <meta charset="utf-8"> <title></title> <style type
css学习（八）：选择器
prdslf001001的博客
09-30 319
一、选择器的分类： 1、通用选择器：有 * （通配符）表示，代表作用于/适用所有的元素； 2、元素/标签/简单选择器：有元素的标签名称直接表示，如 p 、h1、ul......； 3、类选择器；有属性class的值来进行表示；.className；使用class标识页面类型； 4、id元素器：有属性id的值来进行表示：#id；使用id标识特定页面； 5、关系选择器： E F（包含选择...
CSS选择器分类（儿子选择器、 序选择器、下一个兄弟选择器+）
m0_71814235的博客
06-27 1921
CSS选择器分类（儿子选择器、 序选择器、下一个兄弟选择器+）
CSS超详细入门【二】-- CSS的各类选择器
qq_48802092的博客
07-20 209
作用根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性​格式​标签名称{​属性值;​}​1.标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签​2.标签选择器无论标签藏得多深都能选中​3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)......
CSS3 儿子序选择器
Leaf_xiaoMing的博客
08-09 524
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 儿子序选择器 通过儿子在父级元素排名进行选中，只关心儿子在父盒子中是老几，不关心儿子的标签类型。 语法： 元素:first-child (选中父级元素中的.
CSS介绍和通用选择器
weixin_53027472的博客
07-19 599
主要介绍了什么是CSS，以及CSS的引入方式及常用选择器
选择器的优先级
weixin_34361881的博客
06-30 102
我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？ 是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。 注意： 还有一种不讲道理的!import方式来强...
序选择器
jwz934738949的博客
03-30 1114
在网页中，如果我们需要修改同一标签中的某个标签时，需要用到序选择器。 序选择器的类型： 同级别： first-child:对同级别中的第一个标签进行修改； nth-child(n):对同级别中第n个标签进行修改； last-child:对同级别中最后一个标签进行修改; only-child:对同级别中的唯一标签进行修改。 <!DOCTYPE html> <html...
CSS3选择器
qq_35381464的博客
04-28 150
选择器 标签选择器 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 格式: 标签名称{ 属性:值; } 注意点: 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 2.标签选择器无论标签藏得多深都能选中 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....) id选择器 作用...
css常用选择器
一杯清泉
06-01 838
CSS常用选择介绍 三、类选择器-可以重复 1、单个class 2、多个class（1）情况一 只有class同时匹配到.aa.bb才显示红色，中间不能有空格（2）情况二 aa下面的bb会匹配到，中间要有空格。 表示class为.aa的后代p变成红色，即喔喔1变成红色，中间使用空格，如果有多个应使用多个额空格隔开：.aa .xx h3 { } 后代选择器不需要选择每一个节点，只需要选择关键的几个节点就可以达到效果。 这样上面的两个全是红色的了....
css 标签选择器的序选择器
weixin_45807622的博客
10-09 87
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*序选择器*/ p:first-child{ background-color: red; } b:last-child{ background-color: blue; }
序选择器(详解)
努力努力再努力
04-07 1601
同级别的第几个： 第一种： :first-child 意思为：选中同级别标签中的第一个标签。 注意点：不区分类型。（任何标签类型都可以使用） 例子： 给同级别标签中的第一个标签的内容设置为红色。 一、 内容： 代码： html> charset="utf-8"> 序选择器 target="_
CSS选择器（二）
最新发布
全粘小谭的博客
09-30 724
该篇为CSS系列第二篇文章，着重讲解了选择器的作用，分类以及各类选择器的使用，还有CSS3新增的伪类/伪元素等等…干货满满，不容错过👻。
css选择器解析顺序
qq_41801117的博客
04-27 680
阿里经典面试题：下面2种情形谁的性能更好？ a{ text-decoration:none } .div1 a{ text-decoration:none } 以一道阿里面试题开头，就是希望大家可以重视这个问题，毕竟大厂都很关注细节。 答案是第一种情况性能更好。 因为css选择器的执行原则是由右到左，所以在第二种情况下，会比第一种情形多找一次class=‘div1’的操作，那么css选择器为啥要利用这种’反人类’的思想呢？(之所以叫’反人类’，是因为跟咱们一惯的想法有点出入) 举个例子吧，可能比较形象
CSS3入门教程：选择器与引入方式解析
"本资源主要介绍了CSS3的基本概念、语法结构以及选择器的使用，包括了行内样式、内联样式、链接样式和导入式的引入方式，详细阐述了各种选择器的功能，如标签选择器、ID选择器、类选择器、后代选择器、子元素选择器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值