css第一篇：元素选择器

1：多个选择器

　　h1, h2 {}　　　  　     ——h1或h2标签的所有元素

 

2：通配选择器

　　* {}　　　　　　　     ——所有元素

 

3：元素选择器

　　div {}　　　　　　　  ——所有div元素

 

4：类选择器

　　.test {} 　　　　　　　——class属性为test的所有元素

 　　p.test {}　　　　　　 ——class属性为test的所有p元素

　　 .test.test1 {}　　　　  ——class属性有test、test1两个值的所有元素，包含有test、test1的三个值以上的也匹配

 

5：ID选择器

　　 #test {}　　　　　　　——id属性为test的元素

 

6：属性选择器

　　*[title] {}　　　　　　    ——有title属性的所有元素

　　 p[class] {}　　　　　    ——有class属性的所有p元素

　　 a[href][title] {}　　　　  ——同时有href与title属性的所有a元素

　　 a[href="ddd"] 　　　　  ——所有href属性值为"ddd/"的a元素

　　 a[href="dd"][title="dd"]   ——所有href属性值为"dd"且title为"dd"的a元素

　　 p[class~="test4"] {}　　 ——class属性值包含test4的所有p元素，对应的如class=“test test4”这样类型的会被包含

　　 p[class^="test4"] {}　     ——class属性值以test4开头的所有p元素 

　　 p[class$="test4"] {}　　 ——class属性值以test4结尾的所有p元素 

　　 p[class*="test444"] {}　 ——class属性值包含字串test4的所有p元素 ，对应的若有class="test44"]这样类型的会被包含

　　

7：后代选择器

　     div span{}　　　　　　——div元素下的所有span元素，即div可以是span的父辈，祖父辈等

　　 div > span {}　　　　　——div元素下的所有span子元素，即span只能是div的子辈　　

　　 div + span{}　　　　　 ——为div相邻兄弟的所有span元素，即div与span有同一父辈，且div在前

 

8：伪类选择器

　　a:link{}　　　　　　　  ——未访问过的a元素

　　a:visited{}　　　　　　 ——已访问过的a元素

 

9：动态伪类

　  元素:focus{}　　　　　 ——指当前拥有输入焦点的元素，即接收键盘输入等方式激活的元素

　  元素:hover{}　　　　　 ——指鼠标停留的元素

　  元素:active{}　　　  　  ——指鼠标激活的元素，如点击链接或按钮的那一刻的元素样式

 

　  p:first-child{}　　　　　 ——指第一个p元素，不是p的第一个子元素

　  lang(){}　　　　　　　  ——括号内为语言，指的是某种语言下样式

 

10：伪元素选择器

　  p:first-letter{}　　　　　——指p元素段内的第一个字母

　  p:first-line{}　　　　　  ——指p元素段内的第一行

　  p:before{}　　　　　　 ——指在p元素前面设置的样式，此处可添加内容以及对应样式

　  p:after{}　　　　　　　——指在p元素后面设置的样式，此处可添加内容以及对应样式

　  伪元素只能用于标记或段落类的块级元素，不能用于行内元素； 伪元素必须放在选择题主体后

 

转载于:https://www.cnblogs.com/tianshu/p/9162896.html