css选择器小结

原创 2016年08月28日 16:59:37

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} ------ 被选择的链接的样式。



版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery学习--Chapter02小结(jQuery选择器)

jQuery学习--Chapter02小结(jQuery选择器) 1.什么是jQuery选择器? 选择器就是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作有依赖于选择器...

HTML CSS选择器

  • 2012年06月07日 17:20
  • 166KB
  • 下载

css常用选择器

  • 2013年03月30日 22:46
  • 294KB
  • 下载

css中的层叠顺序和选择器

层叠上下文层叠上下文是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上就‘高人一等’。z轴表示的是用户与屏幕的这条看不见的垂直线。层叠顺序是元素发生层叠时候有着特...

css的选择器

  • 2016年07月17日 23:17
  • 9KB
  • 下载

js css3 仿iso 选择器

  • 2016年11月11日 11:20
  • 12KB
  • 下载

CSS3伪类选择器nth-child和nth-of-type浅析

1. nth-child定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,不论元素的类型。n 可以是数字、关键词或公式。① n为数字时,n为大于0的整数.box :n...

前端必须掌握的css选择器方法

  • 2016年08月29日 08:48
  • 37KB
  • 下载

CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先?

CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先? 选择符类型 例子 例子描述 通用选择器 * 类别选择器(....
  • sjinsa
  • sjinsa
  • 2017年04月25日 23:26
  • 754
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css选择器小结
举报原因:
原因补充:

(最多只允许输入30个字)