css选择器种类介绍

1.标签选择器
用标签名作为选择器,就是指给同名的标签统一加上外观样式,这种选择器影响范围大,一般用来做一些通用设置,或者层级选择器中

例:
				
	div{
		color:red
	} 
	......
	<div>这是第一个div</div> <!-- 对应以上样式 -->
	<div>这是第二个div</div> <!-- 对应以上样式 -->

2.类选择器
1.可使用class的属性,把html网页中的标签进行分类,然后根据类名称来进行设置
2.注意:
1.使用类名作为选择器时,类名左边必须有一个英文的圆点.
2.类名的设置是不区分标签,也就是说,p与h1之类的标签都可以设置为一个同一个类
3.同一个标签,可以在class属性中设置多个类,类名之间使用空格隔开
4.如果同一个标签中,存在同样的样式属性,但是值不一样,则采用最后声明的那一个

	例:
					
			.blue{color:blue}
			.big{font-size:20px}
			.box{width:100px;height:100px;background:gold} 
			......
			<div class="blue">....</div>
			<h3 class="blue big box">....</h3>
			<p class="blue box">....</p>

3.层级选择器
1.主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围。

例:
	.con{width:300px;height:80px;background:green}
	.con span{color:red}
	.con .pink{color:pink}
	.con .gold{color:gold}
	......
	<div class="con">
	    <span>....</span>
	    <a href="#" class="pink">....</a>
	    <a href="#" class="gold">...</a>
	</div>
	<span>....</span>
	<a href="#" class="pink">....</a>

4.id选择器
给标签声明一个id属性值,根据id的属性值对标签进行修饰,id值唯一,在引用时用 #id名 即可引用

5.群组选择器/组选择器
当某些标签都可用一个样式修饰的时候,可选择用群组选择器来修饰,中间用逗号隔开

6.伪类选择器
专门在某些标签的特定状态下,统一声明样式,常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态。

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值