css3新增加的选择器

本文详细介绍了CSS中的属性选择器、结构性伪类选择器以及其他选择器的使用方法,包括如何通过属性名、属性值进行选择,如何针对特定位置的元素进行样式设定等。

一、属性选择器:

E[attr] 只要有属性名
E[attr=value] 属性名=属性值
E[attr~=blue] 包含这个blue整个单词就可以
E[attr^=c] 以这个字母c开头的
E[attr$=b] 以这个字母b结尾的
E[attr*=a] 只要包含a这个字母就行
E[attr|=z] 只要以字母z-开头的或者就是字母z的

二、结构性伪类选择器:

E:nth-child(n) 第n个子节点
div:nth-child(odd) 奇数行
div:nth-child(even) 偶数行
div:nth-child(2n) 2的倍数
E:nth-last-child(n) 倒数第n个

三、其他:

E:empty 空元素
E:first-child 第一个子节点、和 E:nth-child(1)等价
E:last-child 倒数第一个、和 E:nth-last-child(1)等价
* 注意不能有其他兄弟节点

E:target 锚点元素的样式
div:target{width:100px;}
<div id=”div1″></div>
只要锚点有#div1那上面的target样式就会生效
E:disabled 表单元素设置disabled
E:enabled 可点击的表单元素
E:checked 表示已经选中的checkbox或者radio

文本新增伪类:
E:first-line 第一行
E:first-letter 第一个字
E::selection 选中文本的时候
E::before E标签前面添加东西,需要配合content来用

E::after E标签后面添加东西
E:before E:after单引号也能用
E:not(s) 不包括s
h1:not(.red) 排除有class为red的h1元素
E~F E后面的F兄弟节点

转载于:https://www.cnblogs.com/itkss/p/5082322.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值