1.类选择器
根据元素的类型选择元素
格式: 元素 <p>
2.ID选择器
选择具有ID属性的元素 可以将ID选择器与类型选择器相结合 指定某个类型下的特定ID设置属性
格式: #ID
3.后代选择器
在另一个元素中选择一个元素 选择父元素中所有子元素 组合后代和ID选择器可以指定具有特定ID的子元素
格式: 父元素> 子元素 #ID
4.类型选择器
具有相同类的元素 可以将类型选择器与其他选择器组合使用 指定既是某个类又是这个父类元素下具有特定ID属性的子元素
格式: .类名(class)
5.逗号
可以将多个选择器分离开表示选择选择器选中的多个元素
格式: A选择器,B选择器,C选择器
6.通用选择器(星号)
将选择所有元素中的每个元素(星号与选择器结合)
表示所有元素
格式: 类 <这儿有一个空格>*
兄弟选择器<7,8>
7.相邻选择器
选择直接跟随另一个元素的元素
格式: A元素+B元素(B元素的位置一定紧随A元素)
8.一般兄弟姐妹选择器
选择一个元素后面的所有元素
格式: A元素~B元素(包括B元素本身)
9.子元素选择器
选择元素的直接子元素 选择所有子元素 子元素可以是嵌套在另一个元素中的任何一个元素
格式: A>B
10.否定伪类
可以选择不是其他东西的某件东西
格式: :not(选择器)
11.带公式的n类型选择器
类型为n的公式选择每个第n个元素,从该元素的特定实例开始计数
格式: :nth-of-type(n+数字)<n是一个公式表示每隔几个选取元素,数字表示从第几个元素开始,包括开始元素>
12.唯一类型选择器
选择仅属于其类型的唯一元素
格式: :only-of-type
13.空的选择器
选择没有子元素的元素
格式: :empty
14.群组选择器
可以同时使用多个选择器, 多个选择器将被同时应用指定的样式
格式: 选择器1,选择器2,选择器3 { }
15.属性选择器
属性选择器可以挑选带有特殊属性的标签。这里匹配由正则表达式完成
语法:[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"] 开头
[属性名$="属性值"] 结尾
[属性名*="属性值"] 包含
16.其他元素选择器
格式: :first-child 选择第一个子标签
:last-child 选择最后一个子标签
:nth-child 选择指定位置的子元素
:first-of-type()
:last-of-type()
:nth-of-type()
选择指定类型的子元素
17.伪类选择器
伪类专门用来表示元素的一种特殊的状态
比如:访问过的超链接、普通的超链接、获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类
为没访问过的链接
:link 表示普通的链接(没访问过的链接)
为访问过的链接
:visited 表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过 由于涉及到用户的隐私问题,所以使用:visited伪类只能设置字体的颜色
:hover 表示鼠标移入的状态
:active 表示超链接被点击的状态
<:hover和:active也可以为其它元素设置 IE6中,不支持对超链接以外的元素设置:hover和:active>
文本框获取焦点以后,修改背景颜色为黄色
input:focus{
background-color: yellow;}
<为p标签中选中的内容使用样式可以使用::selection伪类
注意:这个伪类在火狐中需要采用另一种方式编写>
</*兼容大部分浏览器的*/
p::selection{
background-color: orange;}
/*兼容火狐的*/
p::-moz-selection{
background-color: orange;}>
选择器使用很灵活 可以互相叠加嵌套
任意门:
CSS3选择器 http://www.w3school.com.cn/cssref/css_selectors.asp
网友评论