H5选择器

来源:互联网 发布:aⅴ淘宝新址 编辑:程序博客网 时间:2024/05/22 15:46
<!DOCTYPE HTML>
选择器:基本选择器、层次选择器、属性选择器、结构伪类选择器、文本新增伪类选择器;


1.层次选择器:
1).后代选择器:A   B-------------找到A里面的所有B元素(子孙后代);
2).子代选择器:A>B-------------找到A的子代里面的所有B元素(下一代、子代);
3).相邻兄弟选择器:A+B--------找到紧邻A后面的兄弟B元素(找到下一个兄弟,如果下一个不是B而是C,则这个选择器无法起作用,既找不到B,也不找C);
4).通用(兄弟)选择器:A~B-----找到A后面的所有兄弟B元素;


2.属性选择器:(attr不只是标签默认的属性,可以自己添加新属性XXX)
1).E[attr]---------------选择有属性attr的E元素;
2).E[attr=val]--------选择属性attr为val的E元素;
3).E[attr|=val]-------选择属性attr以val-开头的或者属性attr值就是val的E元素;
4).E[attr~=val]------选择属性attr中包含val的E元素,val必须是独立的一个属性值,如attr="val1 val2 val3 val4";
5).E[attr*=val]-------选择属性attr中包含val的E元素,val就像是字符串;
6).E[attr^=val]------选择属性attr中以val开头的E元素;
7).E[attr$=val]-------选择属性attr中以val结束的E元素;


3.伪类选择器:
1).目标伪类:target(要对应链接启用)可作选项卡:div{display:none;}
div:target{display:block;}
2).可用情况:disabled
3).选中状态:checked
4).之前:before
5).之后:after(多用于清除浮动)
6).child类型的伪类
(1).E:nth-child(n)找到E的父元素里面的第n个元素E(n从0开始的),且该元素是要E,n为odd是奇数(即2n±1),n为even是偶数(即2n);
(2).E:nth-last-child(n)恰恰与nth-child反过来,从后面找起(通常用于清除最后第n个的某个样式)。
7).type类型的伪类
(1).E:nth-of-type(n)找到E的父元素里面的第n个E元素,与child有所不同。
8).拓展:first-child=nth-child(1)first-of-type=nth-of-type(1)
last-child=nth-last-child(1)last-of-type=nth-of-type(1)
E:only-child:找到里面只有一个子元素的元素E(如p:only-child,就算是p>a>span>font>i,也还能找到p)
9).空E:empty 找到没有子元素的元素E;


4.文本伪类:
1).第一个字符::first-letter
2).第一行::first-lline
3).选中的文本::selection

0 0
原创粉丝点击