css 选择器分类总结

css 选择器分为以下几种:

1,html元素选择器

以html元素标签名字显示

1
2
3
4
5
6
7
body{
bgcolor:green;
}
 
p{
color: red;
}

2,id 选择器


id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。在html主题中,id属性值始终是唯一的

1
2
3
4
5
6
7
8
9
10
< p  id = "red" >这个段落是红色。</ p >
< p  id = "green" >这个段落是绿色。</ p >
 
#red{
color:red;
}
 
#green {
color:green;
}

3 ,class类选择器

class选择器,以点(.)显示

1
2
3
4
5
6
7
< p  class = "center" >
This paragraph will also be center-aligned.
</ p >
 
.center {
text-align: center;
}

4,派生选择器,(html,id,class属性,都有派生选择器)

1
2
3
4
5
6
7
8
9
10
li strong {
     font-style: italic;
     font-weight: normal;
   }
  
.center strong
{
     font-style: italic;
     font-weight: normal;
   }


5,组合选择器(同时控制多个元素)

1
2
3
4
5
6
7
8
9
10
< h1 >第一天</ h1 >
< h1 >第二天</ h1 >
< h1 >第三天</ h1 >
< h1 >第四天</ h1 >
 
 
  h1,h2,h3,h4{
  font-size: 20px;
  color: red;
  }


6,伪元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< a  href = "http://www.baidu.com" >百度连接</ a
 
正常连接的样式
a:link{
color: red;
}
鼠标放上去的样式
a:hover{
color: blue;
}
选择连接时的样式
a:active{
color: yellow;
}
已经访问过的样式
a:visited{
color: green;
}


7,元素选择器的优先级


id>class>html





      本文转自crazy_charles 51CTO博客,原文链接:http://blog.51cto.com/douya/1840833,如需转载请自行联系原作者






  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值