css选择器小结

css选择器常使用的有标签选择器、类(class)选择器、id选择器、组合选择器、伪类选择器等。

下面贴上一个小的demo,便于体会各种选择器的使用方法。

<!DOCTYPE html>
<html>
<head>
	<title>定义CSS样式(CSS选择器)</title>
	<meta charset="utf-8">
	<style type="text/css">

	 p {color: red; font-size: 30px;} /*标签选择器*/

	 .p {color: green; font-size: 30px;}  
	 /*类选择器,可以重复使用*/

	 #pp {color: bule;font-size: 30px;}  /*id选择器*/

	 h1, h2, p {color: red;font-size: 40px;} /*组合选择器*/

	</style>
</head>

<body>

	<p>winson chen</p>
	<p class="p">你好,今天天气真好!</p>
	<div class="p">是的,今天天气是挺好的。</div>

	<div id="pp" class="p">是的,今天天气这么好,我们可以出去野餐了。</div>

	<div id="pp" class="p">
		<h1>winson</h1>
		<h2>winson</h2>
	</div>
	<p>winson chen</p>
</body>
</html>

tip:

优先级: id > class > html(标签)。

此外,伪类选择器例子中没有提到。

一般会用其来控制超链接的,

a:link {color: #FF0000}---- 正常链接的样式,未访问的。

a:visited {color : #00FF00} ------  已经访问过的链接的方式。

a:hover {color : #FF00FF} ------ 鼠标放上去的样式。

a:active {color : #0000FF} ------ 被选择的链接的样式。



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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值