一、CSS中的选择器
- 元素选择器 div span
- ID选择器
- 类选择器
- 层级选择器:包括子代选择器(div>li ----- div下的li元素)和后代选择器(div li)
- 并集和交集
- 属性选择器:(css3新增)
- 伪类选择器
(1) 锚伪类:a:link-------超链接正常状态时的样式
a:active-----超链接点击时候的样式
a:visited----访问后的样式
a:hover-----鼠标放到链接上的时候的样式
(2) :hover--------鼠标移动到元素上时显示的样式
:focus-------鼠标聚焦时候的样式,用于表单标签
:enabled-----选择每个启用的input元素
:disabled----选择每个被禁用的input元素
:checked----选择每个被选中的input元素
:first-child-----选择属于父元素的第一个子元素
:nth-child(n)
:last-child
:nth-last-child(n)
:first-of-type //选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
:last-of-type //选择器匹配属于其父元素的特定类型的最后子元素的每个元素。
:nth-of-type(n)
:nth-last-of-type(n)
(3) 兄弟伪类
+表示选择相邻的兄弟标签标签 p+li ------与p相邻的li元素
~表示符合条件的兄弟标签 p~li------p的所有兄弟标签
-
伪元素选择器
:before //在指定的元素之前插入内容,第一需要设置content的内容,第二默认是行级元素,如果要设置宽和高,需要改为块级元素
:after
:first-line
:first-letter
:selection //设置当前选中内容的样式 -
jQuery选择器
二、CSS选择器的优先级:
1.!important权值为无穷;
2. 内联样式(如:style=””,)权值为1000;
3. ID选择器,如#concent,权值为100;
4. 类,伪类(锚伪类 link, hover, active, visited,兄弟伪类:+ 和~两种)选择器和属性选择器,如.content,权值为10;
5. 元素选择器和伪元素选择器,如div p, 权值为1.
6. 通配符选择器权值为0;