CSS的基本选择器以及css3新增选择器

本文深入讲解CSS中的选择器,包括基本选择器如ID、类、标签及通配符选择器,详细介绍了CSS3新增的选择器如结构伪类、属性选择器等,并探讨了它们在网页布局中的实际应用。

前提:E–表示element元素
date表示属性
首先,css中的基本选择器有:

  • ID选择器:针对某一个特定的ID使用。写法:#id{}
  • 类选择器: 针对所有的class类进行选择,写法:.class{}
  • 标签选择器:对一类标签的选择,写法:标签{}
  • 通配符选择器 写法: *{}
    还有一种就是群组选择器,将不同的标签组合起来就是一个劝阻选择器,例如: div ul li,div ol li, p{} (表示div下的ul下的li、div下的ol下的li和p元素一起选中)

以下则是对常用的css3的新选择器进行介绍:

1.结构伪类选择器

  • E:nth-child(n) —— 同一个父元素下第n个E元素 (n=1,2,3…)
  • E:nth-of-type(n) —— 同一个父元素下第n个孩子且元素类型必须是E元素加粗样式
    ( 注意上面两者的区别)
  • E:empty:选择器匹配没有子元素(包括文本节点)的每个元素。
  • E:first-child:同一个父元素下第一个子元素的所有E元素
  • E:last-child —— 最后一个孩子
  • E:nth-child(2n+1)或nth-child(odd) —— 奇数孩子
  • E:nth-child(2n)或nth-child(even) —— 偶数孩子
  • E:first-of-type —— 同一个父元素下第一个孩子且元素类型必须是E元素
  • E:last-of-type —— 同一个父元素最后一个孩子且元素类型必须是E元素
  • E:nth-last-of-type(n) —— 同一个父元素倒数第n个孩子且元素类型必须是E元素
    技巧:当 n<=0时,选择器选取无效,得到如下应用:
    选取前5个元素与E相同的子元素 E:nth-of-type(-n+5)
    选取后5个元素与E相同的子元素 E:nth-last-of-type(-n+5)

伪类选择器

a元素伪类

  • a:link;连接点击之前
  • a:hover;鼠标悬停(不仅限于a元素)
  • a:visited;鼠标点击之后 访问之后
  • a:focus; 获取焦点
    以上伪类需要同时使用时,位置不可以变

表单元素伪类选择器

  • input:disabled;禁用
  • input:enabled;启用
  • input:focus;聚焦
  • input:checked;选择

关系型选择器

  • 后代选择器;div p{}; 只要出现在父元素的后代元素中 就会被覆盖
  • 子选择器;div>p{}; 只能覆盖直接子元素(与div连接的第一个p标签)
  • 相邻选择器;A+B{}; A紧挨着的后面与A同级的元素选择器
  • 通用选择器;A~B{}; A后面的与B元素同级的元素选择器

属性选择器(多用于表单)

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
大致大用法为[标签属性=属性]
例子: input[type=text]:该选择器则是选择input标签type=text的标签;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

code_mo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值