第三章:CSS中的样式选择器

本文详细介绍了CSS中的样式选择器,包括通用选择器、HTML选择器、ID选择器、类选择器、后继选择器(关联选择器)、组合选择器和伪元素选择器,为前端开发者提供了全面的理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.通用选择器

通用选择器是一个星号,它类似于通配符,匹配文档中所有的标签:

*{
       font-size:1cm;
       color:red;
  }

2.HTML选择器

HTML选择器是一个HTML标签,用来改变指定标签的样式,任何HTML元素都可以是一个CSS的选择器:
h1{color:red}
p{text-indent:3em}

3.ID选择器

ID选择器匹配文档中元素E的id属性的属性值为idname的元素,ID选择器名称的定义方式是“#”号后加ID名称idname,文档内id属性的值应该是唯一的,所以ID选择器将仅应用于一个元素的内容:
#main{text-indent:3cm;}
<p id="main">文本缩进3em</p>

4.类选择器

类选择器匹配文档中元素E的class属性的属性值为classname的元素:
<p class="backgroundnote">这是一个段落</p>
可以有两种方式使用类选择器:
第一种:这种方式匹配文档中所有class属性值为backgroundnote的元素
.backgroundnote{ }
第二种:只匹配文档中class属性值为backgroundnote的p标签
p.backgroundnote{ } 

5.后继选择器(关联选择器)

关联选择器也成为包含选择器,假设元素1里包含元素2,这种方式只对元素1里的元素2定义,对单独的元素1或元素2无定义:
table a{font-size:12px}

6.组合选择器

各种选择器用逗号隔开,就构成了组合选择器:
h1,p,#one,.ctwo,div{font-size:3cm;color:red;}

7.伪元素选择器

伪元素选择器是指对同一个HTML元素不同状态的一种定义方式,在CSS2中只有a元素和p元素有这种定义方式:

a元素:

a:link{color:#FF0000;text-decoration:none}    /*未访问的连接*/
a:visited{color:#00FF00;text-decoration:none}    /*已访问的连接*/
a:hover{color:#FF00FF;text-decoration:underline}    /*鼠标在连接上*/
a:active{color:#0000FF;text-decoration:underline}    /*激活连接*/
注意:a:hover必须被置于a:link和a:visited之后才是有效的;a:active必须被置于a:hover之后才是有效的。

p元素:

p:first-letter{font-size:4cm;}


p:first-line{font-size:2cm;}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值