1. CSS选择器
a. 标签选择器:标签选择器就是选择当前页面中相同名字的标签。
b. 通配符选择器:通配符*代表所有的标签。通过通配符选择器可以选择页面中的所有的标签。 穿透力很强。*{ }
c. ID选择器:
A. HTML标签中ID的属性值在一个页面中必须是唯一的。
B. ID选择器是可以帮助我们选择当前页面中唯一id值的标签,也就是根据标签的id属性值进 行选取设置样式。
C. ID选择器的的符号是#号。
d. 类选择器:
A. 类选择器就是选取页面中所有标签的class属性值相同的一类标签。
B. 类选择器的符号是:. (点)
e. 层级选择器,分组选择器,属性选择器,子元素选择器,相邻兄弟选择器,伪类选择器,伪 元素选择器;
注意:ID选择器和class(类)选择器的区别
1、相同的Class属性值,可以在HTML中出现多次。ID属性值在页面中只能出现一次。
2、一个class的属性可以有多个值,也就是说一个标签可以有多个类。
2. 复合选择器
a. 标签指定选择器:标签指定式复合选择器,要求必须是标签开头然后其他选择器。eg: p.left{ }
b. 后代选择器:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面, 内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外 层标记的后代。后代不仅仅包括儿子,还包括子子孙孙。
c. 子代选择器:子代选择器,是让CSS选择器智能选择儿子辈的元素。
eg:p> em {color:red;}
解读为:选择器p > em可以解释为“选择作为p元素子元素的所有em元素”。
尖括号和选择器之间可以有空格也可以没有,没有限制。
建议:选择器和尖括号间有空格。
e. 属性选择器:属性选择器就是根据html标签的属性进行过滤选择。
f. 伪类选择器:
:link 伪类将应用于未被访问过的链接。IE6不兼容,解决此问题,直接使用a标签。
:hover 伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接,IE7+所有元素都兼 容。
:active 伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。
:visited 伪类将应用于已经被访问过的链接
:focus 伪类将应用于拥有键盘输入焦点的元素。
顺序问题:LoVe HAte原则。
g.伪元素选择器:伪元素是控制内容
:first-line伪元素
:first-letter伪元素
注释:以上两个伪元素只能用于块级元素
:first-child伪元素,选择属于第一个子元素的元素。
例如:span:first-child{} /*选择属于第一个子元素的所有span标签。*/
:before与:after伪元素,可以设置元素之前后之后的 内容,并且配合content设置相关内容。
���
�
网友评论