标签选择器
指用HTML标签名称作为选择器,按标签名进行分类,为页面中的某一类标签指定为同一样式。
类选择器
类选择器用’.’符号进行表示,后面紧跟类名,标签调用时使用 class=’类名’
1.不建议使用”_”来对类名进行命名,会有兼容性问题,可以使用中横线
2.不要用纯数字、中文等命名,尽量使用英文字母来表示
ID选择器
用’#’符号进行表示,后面紧跟id名,标签调用时使用 id=’id名’。
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class;
类选择器好比人的名字,是可以多次重复使用的;
id选择器好比人的身份证号码,是唯一的,不能重复使用。
通配符选择器
*代表所有选择器
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,给第一个、第N个元素添加效果。
为了和类选择器想区别,类选择器是一个点,伪类选择器是两个点:
链接伪类选择器
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
注意写的时候尽量不要把他们的顺序颠倒,lvha,lv包包非常ha
结构伪类选择器(CSS3)
:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其复原度的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第N个子元素,不论元素的类型 even偶数 odd奇数 n从0开始
可以写3n,表示第0 3 6 9 12…个元素
:nth-last-child(n) 选择器匹配属于其父元素的第N个子元素, 不论元素的类型 even偶数 odd奇数 n从0开始,和上一个属性的区别在于,这个子元素是从最后一个子元素开始数的,而上面的属性是从第一个子元素开始数的。
目标伪类选择器
:target目标伪类选择器,选择器可用于选取当前活动的目标元素
复合选择器
交集选择器
由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格。
并集选择器
各个选择器通过逗号连接而成,任何形式的选择器(包括标签选择器、class选择器、id选择器)都可以作为并集选择器的一部分。
后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
1.不仅仅是可以写标签名,还可以写类名,记得中间有空格.
2.后代选择器可以选择儿子、孙子、重孙子
子元素选择器
只能选择作为某元素的子元素的元素,写法是把父级标签写在前面,子级标签写在后面,中间用一个>连接,符号左右两侧各保留一个空格。它和后代选择器的区别是,只选择儿子。
属性选择器
选取某些带有特殊属性的标签,属性选择器用中括号来表示。
几种属性选择器:
E[attr] 存在attr属性即可
E[attr=val] 属性值等于val才行
E[attr*=val] 属性值里包含val字符并且在任意位置
E[attr^=val] 属性值里包含val字符并且在开始位置
E[attr$=val] 属性值里包含val字符并且在结束位置
<a href=’’ title=’我是一个百度’>百度</a>
<a href=’’>新浪</a>
<a href=’’>网易</a>
a[title] {
color:red;
}
伪元素选择器(CSS3)
1.E::first-letter 文本的第一个单词或字
2.E::first-line 文本的第一行
3.E::selection 可改变选中文本的样式
4.E::before,E::after
在E元素内部的开始位置和结束位置创建一个元素,该元素为为行内元素,且必须要结合content属性使用。
网友评论