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



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

CSS:CSS选择器之【组合选择器】

前言组合使用不同的选择器可以匹配更特定的元素。有的复合选择器能将目标样式应用到更多元素,有的复合选择器则会锁定更少元素,总之会让你的选择非常具体。复合选择器主要包括:群组选择器、后代选择器、子选择器和...
  • Hierarch_Lee
  • Hierarch_Lee
  • 2016年09月21日 11:54
  • 6059

你必须记住的30个CSS选择器[译]

开篇 有30个CSS选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.** { margin: 0; padding: 0; }*选择器选择的是每一个单一元素。很多程序员用上面的C...
  • kkkkkxiaofei
  • kkkkkxiaofei
  • 2016年05月19日 13:24
  • 2073

30-CSS-04-CSS(关联选择器&组合选择器)

【关联选择器】 标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就 可以用此选择器。 【代码】 span b{ /*关联选择器——选择器中的选择器*/...
  • wy_0928
  • wy_0928
  • 2015年08月13日 18:02
  • 756

CSS 常用的几种选择器

1、基本选择器## 元素选择器 ## 元素选择器 span{color:red;font-size: 20px} hello...
  • StriverLi
  • StriverLi
  • 2017年03月09日 22:57
  • 2005

css交集选择器、并集选择器、兄弟选择器

一,交集选择器 15-css交集选择器.html
  • haha_hello
  • haha_hello
  • 2017年02月10日 12:31
  • 12757

CSS-01 五大选择器

1.css 作用修饰标签 2.css调用方式(就近原则) html> head> title>01title> link REL=stylesheet hr...
  • since_1904
  • since_1904
  • 2017年04月15日 17:15
  • 817

css属性选择器和通配符选择器

一,属性选择器1 20-css属性选择器上.html
  • haha_hello
  • haha_hello
  • 2017年02月10日 15:38
  • 4519

css选择器的练习

制作效果: html代码: css代码: 制作思路: 文章中标题下的文字字体颜色不一,可以使用:nth-child()选择器,()中可以填写数字...
  • szhgege
  • szhgege
  • 2017年01月19日 14:50
  • 151

CSS中如何选择ul下li的奇数、偶数行

#Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行 #Ulist li:nth-of-type(even){margin-left: 10px;}偶...
  • facecrazy
  • facecrazy
  • 2016年04月26日 18:24
  • 23689

CSS入门系列(三)关联选择器&组合选择器

CSS入门系列(三)关联选择器&组合选择器目录CSS入门系列三关联选择器组合选择器 目录 关联选择器 组合选择器 伪元素选择器1. 关联选择器定义是:选择器中的选择器。假设如下:这个一个div 这个一...
  • leichaoaizhaojie
  • leichaoaizhaojie
  • 2016年11月09日 14:02
  • 1481
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css选择器小结
举报原因:
原因补充:

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