CSS 样式规则选择器

CSS 样式规则选择器

 

主要有三种:HTML选择器、class选择器、ID选择器

1.HTML选择器

复制代码
 1 <html>
2 <head>
3 <style type="text/css">
4 p{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p>这里应用样式表</p>
13 </body>
14 </html>
复制代码

也就是说选择器是HTML标签

2.class选择器

复制代码
 1 <html>
2 <head>
3 <style type="text/css">
4 .pclass{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p class="pclass">这里使用了.pclass 样式</p>
13 </body>
14 </html>
复制代码

3.ID选择器

复制代码
 1 <html>
2 <head>
3 <style type="text/css" media="screen,projection">
4 #pid{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p id="pid">这里使用了#pid 样式</p>
13 </body>
14 </html>
复制代码

4.关联选择器(也称包含选择器)

复制代码
 1 <html>
2 <head>
3 <style type="text/css" media="screen,projection">
4 p h2{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p><h2>这里使用了"p h2"样式</h2></p>
13 </body>
14 </html>
复制代码

这里,"p h2"之间用空格分开,可以有更多标签,表示p段落中h2标题的样式

5.组合选择器

复制代码
 1 <html>
2 <head>
3 <style type="text/css" media="screen,projection">
4 p,h2{
5 color:red;
6 font-family:System
7 }
8 </style>
9 </head>
10
11 <body>
12 <p>这里也使用了"p,h2"样式<h2>这里使用了"p,h2"样式</h2></p>
13 </body>
14 </html>
复制代码

6.相邻选择器

 

复制代码
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>aa.html</title>
 5     <style type="text/css">
 6         div+p{
 7             font-size:20px;
 8             color:red;
 9             font-weight:bold;
10         }
11     </style>
12   </head>
13   <body>
14     <div>星期三</div>
15     <p>这里应用div+p样式</p>
16     <p>这里不再应用样式</p>
17   </body>
18 </html>
复制代码

在本例中,只在紧挨着 div 后的 p 标签中使用所定义的样式。  、

7.子选择器

 

复制代码
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>aa.html</title>
 5     <style type="text/css">
 6         .test > strong{
 7             font-size:20px;
 8             color:red;
 9         }
10     </style>
11   </head>
12   <body>
13     <div class="test">
14         <strong>提示</strong>
15         <p>今天是<strong>儿童节</strong>哦~~</p>
16         <strong>系统提示</strong>
17     </div>
18   </body>
19 </html>
复制代码

 

本例中,除 p 对象中的 strong 元素外,其他均为红色。

 

 

8.伪标签选择器

指对同一个HTML标签的各种状态进行规则定义,基本格式如下:

HTML标签 : 伪标签

{

  样式规则……

}

目前较常用的伪标签有: A:active  A:hover  A:link  A:visited  P:first-line  P:first-letter。如下:

 

按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值