1.标签选择器
1.标签选择器也成元素选择器,类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有的该种标签
span{color:red;}
p{color:red;}
2.标签选择器的常见作用
标签选择器“覆盖面”非常大,所以通常用于标签的初始化
ul{
/*去掉无序列表的小圆点*/
list-style:none;
}
a{
/*去掉超链接的下划线*/
text-decoration:none;
}
2.id属性
1.标签可以有id属性,是这个标签的唯一标识
<p id="para1">我是一个段落</p>
2.id的名称只能由字母,数字,下划线,短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母
3.同一页面上不能有相同id的标签
3.id选择器
css选择器可以使用井号#前缀,选择指定id的标签
#para1{color:red;}
class选择器
1.class属性表示类名
<p class="warning">段落</p>
2.类名的命名规范和id的命名规范相同
3.使用点**.**前缀选择指定class的标签
.warning{color:red;}
4.多个标签可以使用相同类名
4.复合选择器
后代选择器,如 .box .spec | 选择类名为box的标签内部类名为spec的标签 |
---|---|
交集选择器 如 li.spec | 选择即是li标签,也属于spec类的标签 |
并集选择器 如 ul, ol | 选择所有ul和ol标签 |
1.后代选择器可以有很多空格,隔开好几代
.box ul li .spec em{color:red;}
- 伪类选择器
1.伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,超级链接拥有四个特殊状态
伪类 | 意义 |
---|---|
a:link | 没有被访问的超级链接 |
a:visited | 已经被访问过的超级链接 |
– | – |
a:hover | 正被鼠标悬停的超级链接 |
a:active | 正被激活的超级链接(按下按键但是还没有松开按键) |
冒号:就是伪类
元素关系选择器
名称 | 意义 |
---|---|
子选择器 div>p | div的子标签p |
相邻兄弟选择器 img+p | 图片后面紧跟着的段落将被选中 |
通用兄弟选择器 p~span | p元素之后的所有同层级span元素 |
1.子选择器
a.当时用 > 符号分隔两个元素时,它只会匹配作为第一个元素的直接后代元素,即两个标签为父子关系.box>p{}
b.后代选择器不一定限制是子元素.box p{}
2.相邻兄弟选择器
a.相邻兄弟选择器(+)介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中
b.说白了,a+b就是选择“紧跟在a后面的一个b"
<style>
img+span{
color:red;
}
</style>
<body>
<p>
<img src="">
将被选择<span>这是北京故宫</span>
<span>这是北京故宫</span>
</p>
<p>
<img src="">
将被选择<span>这是北京鸟巢</span>
</p>
<span>你好</span>
<span>你好</span>
</body>
3.通用兄弟选择器
a.通用兄弟选择器(~),a ~ b选择a元素之后的所有同层级b元素
属性选择器
img[alt] | 选择有alt属性的img标签 |
---|---|
img[alt=“故宫”] | 选择alt属性是故宫的img标签 |
img[alt^=“北京”] | 选择alt属性以北京开头的img标签 |
– | – |
img[alt$=“夜景” ] | 选择alt属性以夜景结尾的img标签 |
img[alt*=“北” ] | 选择有alt属性中含有北字的img标签 |
– | – |
img[alt~=“北”] | 选择alt属性中有空格隔开的北字样的img标签 |
img[alt、=“北” ] | 选择alt属性以北开头-的img标签 |
– | – |
css3新增伪类
伪类 | 意义 |
---|---|
:empty | 选择空标签 |
:focus | 选择当前正被选中的表单元素 |
– | – |
:enabled | 选择当前有效的表单元素 |
:disabled | 选择当前无效的表单元素 |
– | – |
:checked | 选择当前已经勾选的单选按钮或复选按钮 |
:root | 选择根元素,相当与选择的是html标签 |
伪元素
1.css3新增了“伪元素”特性,表示虚拟动态创建的元素
2.伪元素用双冒号表示,IE8可以兼容单冒号
a.::before和::after
b1 ::before 创建一个伪元素,其将成为匹配选中的元素的,第一个子元素,必须设置 content 属性表示其中内容
a::before {
content:">"
}
展示结果是:>我是超链接>我是超链接
展示结果是>我是超链接>我是超链接
b2 ::after 创建一个伪元素,其将成为匹配选中的元素的,最后一个子元素,必须设置 content 属性表示其中内容
a::after {
content:"《"
}
展示结果是:我是超链接《我是超链接《
c. ::selection css伪元素应用于用户使用鼠标选中的部分(随着用户对文字或其他部分的选中,颜色会发生改变)
d. ::first-letter和::first-line
d1 ::first-letter会选中某元素中(必须是块级元素)第一行的第一个字母
d2 ::first-line会选中某元素中(必须是块级元素)第一行全部文字