CSS3选择器学习笔记_html/css_WEB-ITnose
一.基本选择器
1.通配选择器:[ * ] 选择文档中所以HTML元素。
*{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/ .mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/
2.元素选择器:[ E ] 选择指定类型的HTML元素。
p{color:red;} /*选择p元素*/
3.ID选择器: [ #id ] 选择指定ID属性值为“id”的任意类型元素。
1
4.类选择器: [ .class ] 选择指定class属性值为“class”的任意类型的任意多个元素.
1
5.群组选择器: [ selector1,selectorN ] 将每一个选择器匹配的元素集合并.
123
二.层次选择器
1.后代选择器:[ E F ] 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内。
23
2.子选择器:[ E>F ] 选择匹配的F元素,且匹配的F元素是所匹配的E元素的直系子元素
24
3.相邻兄弟元素选择器:[ E+F ] 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面
2p1
p2
4.通用选择器: [ E~F ] 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素(E和F是同辈元素,具有相同的父元素)
21
2
三.属性选择器
1. E[attr] 只使用属性名,但没有确定任何属性值
1
2
2.E[attr=value] 指定属性名,并指定了该属性的属性值
1
2
3.E[attr~=value] 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中只要包含了一个value词就会被选中
1
2
4.E[attr^=value]指定了属性名,并且有属性值,属性值是以value开头的
1
2
3
5.E[attr$=value]指定了属性名,并且有属性值,而且属性值是以value结束的
1
2
3
6.E[attr*=value]指定了属性名,并且有属性值,而且属值中包含了value
1
2
3
7.E[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说b-cn)
1
2
3
4
四.伪类选择器
1.动态伪类选择器
2.目标伪类选择器
[ E:target ] 功能:选择匹配E的所有元素,且匹配元素被相关URL指向
Document div1 div2 div3div1div2div3
3. 否定伪类选择器
[ E:not(s) ] 表示匹配所有除元素F外的E元素
Document h1
h1
h1
4.状态伪类选择器
5.结构伪类选择器
E:nth-child(n) 表示E父元素中的第n个字节点(从前往后数),注意:CSS3中计数是从1开始,n可运算
Document p1
h1
p2
h2
p3
h3
p4
p5
E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E,从前往后计算
E:nth-last-of-type(n) 表示E父元素中的第n个字节点,且类型为E,从后向前计算
Document p1
h1
p2
h2
p3
h3
p4
p5
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点
//ith1
p2
h2
p3
E:only-child 表示E元素中只有一个子节点。注意:子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
五.伪元素
E:first-line 匹配E元素中的第一行文本
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
Document 两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的
推荐阅读
-
HTML DOM(学习笔记二)_html/css_WEB-ITnose
-
[CSS3]会动的盒子机器人_html/css_WEB-ITnose
-
CSS3自定义下拉框_html/css_WEB-ITnose
-
CSS3 垂直树状图--运用 :before 和 :after_html/css_WEB-ITnose
-
HTML学习笔记05_html/css_WEB-ITnose
-
CSS3:元素的边框、背景和大小_html/css_WEB-ITnose
-
纯CSS3打造七巧板_html/css_WEB-ITnose
-
如何使用CSS3画出一个叮当猫_html/css_WEB-ITnose
-
现在就能投入使用的12个高端大气上档次的CSS3特性_html/css_WEB-ITnose
-
css3实现的气泡效果代码实例_html/css_WEB-ITnose