前面说过样式规则。也知道了样式规则语法形式为：选择器+声明块

如：div{ color：black；padding：10px; }   div即表示选择器(此处是元素选择器)，花括号里的内容就是声明块。

选择器用于指定样式规则可作用于HTML文档中的哪个或者哪些元素。

常见的选择器类型有下面几种：

1、元素选择器(类型选择器)：匹配选择器的网页上的不论什么HTML元素，不考虑这些元素在文档树中的位置。

如：p{ background:aqua; color:pink; }   匹配网页上的不论什么p元素，不考虑p元素在文档树中的位置

2、类选择器：被用于选择有某个class属性的不论什么HTML元素，语法形式：.类名{属性：值;}

<head>

<style type="text/css">

	.hello{

		width:100px;

		height: 100px;

		background: #eee;

		color: blue;

		font-weight: bold;

	}

	</style>

</head>

<body>

<span style="white-space:pre">	</span><div class="hello">类选择器</div>

</body>

同一class属性值能够再同一页面出现多次

3、ID选择器：被用于选择有某个ID属性的不论什么HTML元素，语法形式： #id名{ 属性：值；}

<head>

<style type="text/css">

	#hello{

		width:100px;

		height: 100px;

		background: #eee;

		color: blue;

		font-weight: bold;

	}

</style>

</head>

<body>

<span style="white-space:pre">	</span><div id="hello">ID选择器</div>

</body>

同一ID属性值在同一页面上仅仅能出现一次

4、通配符选择器：用于选择全部元素，语法：*{ 属性：值}

5、包括选择器：用于选择文档的一个元素的后代元素

第一种方法：

<head>

<style type="text/css">

	p span{

		font-weight: bold;

		color:red;

	}

	</style>

</head>

<body>

<p>how <span> are</span> you?</p>

</body>

另外一种方法 

<head>

<style type="text/css">

	p>.sp{

		font-weight: bold;

		color:red;

	}

	</style>

</head>

<body>

<span style="white-space:pre">	</span><p>how <span class="sp"> are</span> you?</p>

</body>

6、伪类选择器：以不同方式格式化超链接<a>元素的四种不同状态

a:link{} 用在未訪问的链接的选择器

a:visited{} 用在已訪问的链接的选择器

a:hover{} 用在鼠标光标放在其上的链接的选择器。当中hover还能够用在别的元素中用于制作在鼠标光标放在目标上的样式的编辑

a:active{} 用在获得焦点(比方：被点击)的链接上的选择器

<head>

<style type="text/css">

	.a:link{color: #000;}

	.a:visited{color: #ff0;}

	.a:hover{color:red;}

	.a:active{color:black;}

</style>

</head>

<body>

	<a href="#" class="a">点点点</a>

</body>

7、伪元素选择器:

(1) :first-line  用于一个元素的第一行的选择器

如段落的第一行 

<head>

<style type="text/css">

	p:first-line{

		color:red;

	}

</style>

</head>

<body>

<p>hello<br/>world</p>

</body>

仅仅有hello是红色的

(2) :first-letter  用于一个元素的第一个字符的选择器

如段落的第一个字符 

<head>

<style type="text/css">

	p:first-letter{

		color:red;

	}

</style>

</head>

<body>

<p>蓦然回首</p>

</body>

仅仅有蓦字是红色的。

(3) :first-child  用于<body>中第一个是( :first-child)前面的元素的全部内容的选择器

<head>

<style type="text/css">

	p:first-child{

		color:red;

	}

</style>

</head>

<body>

<p>蓦然回首</p>

<p>然后呢？</p>

</body>

蓦然回首是红色的

<head>

<style type="text/css">

	p:first-child{

		color:red;

	}

	</style>

</head>

<body>

<div>歌声里</div>

<p>蓦然回首</p>

<p>然后呢？</p>

</body>

没有字体内容的颜色是红色的。由于<body>中第一个元素是div，而不是p



选择器的优先级：ID选择器 > 类选择器 > 伪类选择器 > 元素/伪元素选择器 > 通配符选择器

CSS基础2——选择器的更多相关文章

  1. HTML&CSS基础-属性选择器

    HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  2. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. CSS基础和选择器

    什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...

  4. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  5. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. CSS基础及选择器

    CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...

  7. Css基础-id选择器

    id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...

  8. CSS 基础 优先级 选择器 继承

    1.样式优先级 (内联样式)Inline style     >    (内部样式)Internal style sheet     >     (外部样式)External style ...

  9. CSS基础之选择器

    一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...

随机推荐

  1. itoa()函数和sprintf()函数

    itoa()函数 itoa 为c语言的一个函数.itoa 函数是一个广泛应用的,从非标准扩展到标准的C语言.它不能被移植,因为它不是标准定义下的C语言,但是,编译器通常在一个不遵循程式标准的模式下允许 ...

  2. CF978A Remove Duplicates【数组操作/STL】

    [链接]:CF978A [分析]:逆向思考+标记数组去重 [代码]: #include<bits/stdc++.h> using namespace std; const int INF ...

  3. Educational Codeforces Round 33 (Rated for Div. 2) D. Credit Card

    D. Credit Card time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  4. Python的程序结构[7] -> 生成器/Generator -> 生成器浅析

    生成器 / Generator 目录 关于生成器 生成器与迭代器 生成器的建立 通过迭代生成器获取值 生成器的 close 方法 生成器的 send 方法 生成器的 throw 方法 空生成器的检测方 ...

  5. Codeforces Round #503 (by SIS, Div. 2) C. Elections（枚举，暴力)

    原文地址 C. Elections time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  6. [POI2014]Beads

    题目大意: 有$n(n\leq10^6)$种颜色,第$i$种颜色有$c_i(\sum c_i\leq10^6)$个,指定第一个颜色为$a$,最后一个颜色为$b$,问对于一个长度为$m=\sum c_i ...

  7. Tomcat服务器多域名配置（转载）

    Tomcat服务器多域名配置 我们来讲解下如何在Tomcat服务器上进行多域名配置: 也就是一个Tomcat跑多网站,这里用真实案例举例,比如我这个云主机需要运行两个网站: pan.java1234. ...

  8. openfire源码修改后如何打包部署到linux服务器上

    原文:http://blog.csdn.net/jinzhencs/article/details/50457152 1.linux版本的3.10.3解压部署启动(过程略,参考我的另一篇博文http: ...

  9. ASIHTTPRequest学习(四)

    如果是IOS5的版本,可能集成过程中会遇到一些问题,我也找到了一些解决方案,比如,集成完后可能会遇到编译提示找不到"libxml/HTMLparser.h",解决这个问题可以参考这 ...

  10. 10大iOS开发者最喜爱的库

    该10大iOS开发者最喜爱的库由“iOS辅导团队”成员Marcelo Fabri组织投票选举而得,参与者包括开发者团队,iOS辅导团队以及行业嘉宾.每个团队都要根据以下规则选出五个最好的库:1)不能投 ...