CSS之选择器

一、元素选择符
1、通配符*:选中所有元素
2、类型选择符:选中所有该标签的元素
3、类选择符calss,选中class所在标签的元素
4、ID选择符:选中ID所在标签的元素

二、关系选择符
1、E F:F元素所对应的父元素下的所有元素,必须是不同级。
2、E>F:E的所有子类元素F,必须是不同级。
3、E+F:E元素后面的第一个F元素,必须是同级。
4、E~F:E元素后的所有F元素,必须是同级。

三、属性选择符
1、E[att]:选择具有att属性的所有E元素。
2、E[att=“value”]:选择属性值等于“value”的E元素。
3、E[att^=“value”]:选择具有att属性,并是以value值打头的所有E元素。
4、E[att$=“value”]:选择具有att属性,并是以value值结尾的所有E元素。
5、E[att*=“value”]:选择具有att属性,并包value值得所有E元素。
6、E[att~=“value”]:选择具有att属性,并且value值中有空格的所有E元素,空格在value值前后都可以,不限制空格数量。
7、E[att|=“value”]:选择具有att属性,并且是以value值开头的后面用-号分隔的所有E元素。

四、伪类选择符(一)
1、a:link:选择未被访问过的超链接
2、a:visited:选择已访问过的超链接
3、E:hover:选择鼠标放上去的部分
4、E:active:选择鼠标点击后不松手的部分
5、E:focus:选择表单中的部分
6、E:not(s):选择不含有s选择符的E元素。
顺序:link>visited>hover>active
伪类选择符(二)
1.E:first-child:找到E元素的父类,且该父类下第一个子元素是E元素,并为其设置样式。若第一个不是E元素,则选择失败。
2.E:last-child:找到E元素的父类,且该父类下最后一个子元素是E元素,并为其设置样式。若最后一个不是E元素,则选择失败。
3.E:only-child:找到E元素的父类,且该父类下仅有一个是E元素,并为其设置样式。若仅有一个不是E元素或还有其他元素,则选择失败。

4.E:first-of-type:找到E元素的父类,选中该父类下所有E元素的第一个,并为其设置样式。
5.E:last-of-type:找到E元素的父类,选中该父类下所有E元素的最后一个,并为其设置样式。
6.E:only-of-type:找到E元素的父类,选中该父类下仅有的E元素,并为其设置样式。若该父类下有多个E元素,则选择失败。

7.E:nth-child(n):找到E元素的父类,选中该父类下的第n行元素,并为其设置样式。若该n行没有E元素,则选择失败。n可用even代表偶数行,odd代表奇数行。
8.E:nth-last-child(n):找到E元素的父类,选中该父类下的倒数第n行元素,并为其设置样式。若该倒数n行没有E元素,则选择失败。n可用even代表偶数行,odd代表奇数行。

9.E:nth-of-type(n):找到E元素的父类,选中该父类下的第n行的E元素,并为其设置样式。n可用even代表偶数行,odd代表奇数行。
10.E:nth-last-of-type(n):找到E元素的父类,选中该父类下的倒数第n行的E元素,并为其设置样式。n可用even代表偶数行,odd代表奇数行。

11.E:empty:选中没有任何内容的E元素,空格和回车不能算。
12.E:checked:主要用于input type=“radio”或“checkbox”,为其设置样式。13.E:enabled:主要用于input type=“text“或”password“,为其设置样式。14.E:disabled:主要用于input type=”radio“或”checkbox“或”text“或“password”,为禁用的部分设置样式。15.E:target:主要用于锚点,找到跳转后的元素E,为其设置样式。

五、伪对象选择符
1、E:first-letter:找到E元素并为其第一个字符设置样式;
2、E:first-line:找到E元素并为其第一行字符串设置样式。
3、E:before:找到E元素并为其开始端增加内容,必须与content属性一起使用。
4、E:after:找到E元素并为其结束端增加内容,必须与content属性一起使用。
5、E::selectiong:找到E元素并为其所选中的部分设置样式,主要用于文本内容。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值