css3之选择器
2018-02-10 07:09
274 查看
一 属性选择器
1、E[attr] 表示存在attr属性即可; div[class]2、E[attr=val] 表示属性值完全等于val; div[class=mydemo]
3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置; div[class*=mydemo]
4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置; div[class^=mydemo]
5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置; div[class$=demos]
二 伪类选择器
除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
重点理解通过E来确定元素的父元素。
E:first-child第一个子元素
E:last-child最后一个子元素
E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素; div>ul>li:nth-child(3){
color: deeppink;} 第三个元素
E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算;div>ul>li:last-child(2){
color: deeppink;
}
n遵循线性变化,其取值0、1、2、3、4、... 但是当n<=0时,选取无效。 选中所有的奇数的li
li:nth-child(2n-1){
color: red;
}
选中所有的7 的倍数的li li:nth-child(7n){
color: red;
}
选中前面五个
li:nth-child(-1n+5){
color: red;
}
选中后面五个
li:nth-last-child(-1n+5){ color: red;
}
所有的偶数
li:nth-child(even){
color:red
}
所有的奇数
li:nth-child(odd){
color:blue;
}
n可是多种形式:nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等;
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
没有任何的子元素,包括空格.
案例:日历图.
2、目标伪类
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
<li><a href="#title1">CSS (层叠样式表)</a></li>
<h2 id="title1">CSS (层叠样式表)</h2>
h2:target{
color:red;
}
三 伪元素选择器
重点:E::before、E::after是一个行内元素,需要转换成块元素
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到,目前只需要有个大致了解
E::first-letter文本的第一个字母或字(如中文、日文、韩文等);
案例:首字下沉
E::first-line 文本第一行; 文本第一行高亮..
E::selection 可改变选中文本的样式;
":" 与 "::" 区别在于区分伪类和伪元素 关于before和after
CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念
CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者 E:after伪类;
相关文章推荐
- CSS3---结构性伪类选择器—last-child
- CSS3选择器
- css3中伪类选择器:target的使用
- CSS3选择器总结
- CSS3基础选择器
- CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
- CSS3实战之新增的选择器
- CSS3 ::selection 选择器
- 图解CSS3核心技术与案例实战(第二章 CSS3选择器)
- CSS3知识点整理(二)----CSS3选择器
- CSS3选择器一
- css3兄弟选择器
- CSS3 选择器
- CSS3选择器学习笔记
- CSS3学习笔记(1)-CSS3选择器
- CSS3 选择器—伪类选择器
- CSS3选择器
- CSS3实战之新增的选择器
- css3选择器笔记
- 前端必须掌握30个CSS3选择器