/*先设置背景再设置前景*/
pre{
background-color: #f8f8f8;
border: solid 1px #ccc;
border-radius: 3px;
overflow: auto;
font-size: 15px;
font-family: Consolas, Courier, monospace;
padding: 6px 10px;
line-height: 20px;
tab-size: 4;
}
code{
background-color: #f8f8f8;
border: solid 1px #ccc;
border-radius: 3px;
font-size: 15px;
font-family: Consolas, Courier, monospace;
padding: 6px 10px;
}
h3{
color: #4abcde;
}
h4{
font-weight: bold;
}
a{
text-decoration: none;
}
a:hover{
color: red;
text-decoration: underline;
}
.div1{
color: red;
}

阅读目录

一、CSS 的基本语法格式

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			p{

				color: red;

			}

		</style>

	</head>

	<body>

		<p>段落是红色的。</p>

	</body>

</html>

运行结果为：

段落是红色的。

注意：

  1. 上面是一个简单的演示示例
  2. 重点看 <style> 元素
  3. CSS 语法的一般形式是 selector{ property: value };
  4. 这篇文章主要讲解的是 selector(选择器)，下面会为每种选择器举一个例子

返回顶部

二、基础选择器

基础选择器分为：

1、类型选择器

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			p{

				color: red;

			}

		</style>

	</head>

	<body>

		<p>这个段落是红色的。</p>

		<p>这个段落也是红色的。</p>

		<p>这个段落还是红色的。</p>

	</body>

</html>

运行结果为：

这个段落是红色的。

这个段落也是红色的。

这个段落还是红色的。

注意：

  1. 上面的重点代码是 p{ color: red; }
  2. 是 <p> 元素作为选择器
  3. 效果是当指定 <p> 元素的字体颜色为红色时，所有段落的字体都会变成红色
  4. 绝大多数的元素都可以作为选择器，例如： <h1> 、<h2> 、<a> 、<div> 等等

返回 基础选择器目录

2、类选择器

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			.example{

				background-color: yellow;

			}

		</style>

	</head>

	<body>

		<p class="example">这个段落的背景颜色是黄色的。</p>

		<p>这个段落没有设置背景颜色。</p>

	</body>

</html>

运行结果为：

这个段落的背景颜色是黄色的。

这个段落没有设置背景颜色。

注意：

  1. 上面的重点代码是 .example{ background-color: yellow; } 和包含了 class 属性那一行的代码，注意这里的 example 只是一个名称，可以用其他词来代替
  2. 设置了 class 属性的段落，显示的效果为背景颜色变成黄色

返回 基础选择器目录

3、id 选择器

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			#example{

				font-size: 50px;

			}

		</style>

	</head>

	<body>

		<!--最好在同一个 HTML 文档中所有的 id 名称都不相同-->

		<p id="example">这个段落的字体变大了。</p>

		<p>这个段落没有设置字体的大小。</p>

	</body>

</html>

运行结果为：

这个段落的字体变大了。

这个段落没有设置字体的大小。

注意：

  1. 上面的重点代码是 #example{ font-size: 50px; } 和包含了 id 属性那一行的代码，注意这里的 example 也只是一个名称，可以用其他词来代替
  2. 设置了 id 属性的段落，显示效果为字体变大了
  3. id 选择器和类选择器很相似，但是应用场景不太一样
  4. id 选择器匹配的 id 名称最好是唯一的，即在同一个 HTML 文档中最好每个 id 的名称都不相同，例如上面的代码中有一个段落的 id 名称已经是 example 了，那么其他段落就不要再用同一个 id 名称来设置字体大小了
  5. class 名称在同一个 HTML 文档中可以相同，所以说通常设置段落的格式时，用类选择器比用 id 选择器更加合适一点

返回 基础选择器目录

4、通用选择器

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			*{

				color: red;

			}

		</style>

	</head>

	<body>

		<h1>我是红色的。</h1>

		<h3>我是红色的。</h3>

		<p>我也是红色的。</p>

		<a href="http://www.baidu.com">我还是红色的</a>

	</body>

</html>

运行结果为：

我是红色的。

我是红色的。

我也是红色的。

我还是红色的

注意：

  1. 上面的重点代码是 *{ color: red; }
  2. * 是通用选择器，显示的效果为所有元素的字体都变成了红色

返回 基础选择器目录

5、属性选择器

代码1：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			[href]{

				color: red;

			}

		</style>

	</head>

	<body>

		<p>匹配属性为 href 的元素：</p>

		<a href="http://www.baidu.com">百度</a>

	</body>

</html>

运行结果为：

匹配属性为 href 的元素：

百度

注意：

  1. 上面的重点代码是 [href]{ color: red; } 和含有 href 属性的那一行代码
  2. <a> 元素里面设置了 href 属性，所以显示的效果为红色

代码2：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			[href="#top"]{

				color: red;

			}

			[href="#top1"]{

				color: gray;

			}

		</style>

	</head>

	<body>

		<p>完全匹配，只匹配属性和值都相同的元素：</p>

		<a href="#top">返回顶部</a>

		<br />

		<a href="#top1">返回 基础选择器目录</a>

	</body>

</html>

运行结果为：

完全匹配，只匹配属性和值都相同的元素：

返回顶部

返回 基础选择器目录

注意：

  1. 上面代码是完全匹配的示例
  2. [href="#top"]{ color: red; } 匹配属性和属性值为 href="#top" 的 <a> 元素，显示效果为红色字体
  3. [href="#top1"]{ color: gray; } 匹配属性和属性值为 href="#top1" 的 <a> 元素，显示效果为灰色字体

代码3：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			[href*=baidu]{

				color: orange;

			}

		</style>

	</head>

	<body>

		<p>通过属性和属性值中的字符串进行匹配：</p>

		<a href="http://www.baidu.com">百度</a>

		<br />

		<a href="https://www.tieba.baidu.com/">百度贴吧</a>

	</body>

</html>

运行结果为：

通过属性和属性值中的字符串进行匹配：

百度

百度贴吧

注意：

  1. 上面的代码通过字符串进行匹配，属性为 href 以及属性值中有 baidu 这个字符串的元素都能匹配上
  2. 上面例子中，两个链接里面都含有 baidu 这个字符串，所以显示效果为字体是橘色的
  3. 当然，你将代码改成 [href*=w]{ color: orange; } 时，它们也能匹配上，因为它们的链接里面都含有 w 字符

属性选择器还有很多，这里只列举了其中的三种

其他的属性选择器可以参考 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

返回 基础选择器目录

返回顶部

三、组合选择器

组合选择器：

1、A + B{ property: value; }

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			p + span{

				background-color: orange;

			}

		</style>

	</head>

	<body>

		<p>这是一个段落。</p>

		<span>这是一段测试文字</span>

		<p>这是另外一个段落。</p>

		<br />

		<span>这是另外一段测试文字</span>

	</body>

</html>

运行结果为：

这是一个段落。

这是一段测试文字

这是另外一个段落。

这是另外一段测试文字

注意：

  1. 上面最重要的代码是 p + span{ background-color: orange; } ，表示 <p> 元素后面的 <span> 元素的背景颜色设置成橘色
  2. 这里要注意一个很重要的前提条件：<span> 元素必须直接跟在 <p> 元素的后面
  3. 上面的例子中，我在它们两个之间插入了一个换行元素 <br /> 之后，<p> 元素后面的 <span> 元素就不能被匹配到了

返回 组合选择器目录

2、A ~ B{ property: value; }

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			p ~ span{

				background-color: orange;

			}

		</style>

	</head>

	<body>

		<p>这是一个段落。</p>

		<span>这是一段测试文字</span>

		<p>这是另外一个段落。</p>

		<br />

		<span>这是另外一段测试文字</span>

	</body>

</html>

运行结果为：

这是一个段落。

这是一段测试文字

这是另外一个段落。

这是另外一段测试文字

注意：

  1. 这个选择器与上面的那个选择器很相似
  2. 这个选择器也是可以匹配 <p> 元素后面的 <span> 元素，只是这两个元素之间就算插入了其他元素，它也能够匹配
  3. 所以显示的结果才会是两段文字的背景颜色都是橘色

返回 组合选择器目录

3、A > B{ property: value; }

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			div > span{

				background-color: yellow;

			}

		</style>

	</head>

	<body>

		<div>

			<span>测试文字1</span>

			<p>

				<span>测试文字2</span>

			</p>

			<span>测试文字3</span>

		</div>

	</body>

</html>

运行结果为：

测试文字1

测试文字2

测试文字3

注意：

  1. 上面最重要的代码是 div > span{ background-color: yellow; } ，表示将 <div> 元素的直接子元素 <span> 的背景颜色设置为黄色
  2. 要注意的一个很重要的点是：直接子元素
  3. 上面例子中 <span>测试文字2</span> 是 <p> 的直接子元素，不是 <div> 的直接子元素，所以它无法被匹配

返回 组合选择器目录

4、A B{ property: value; }

代码：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			div span{

				background-color: yellow;

			}

		</style>

	</head>

	<body>

		<div>

			<span>测试文字1</span>

			<p>

				<span>测试文字2</span>

			</p>

			<span>测试文字3</span>

		</div>

	</body>

</html>

运行结果为：

测试文字1

测试文字2

测试文字3

注意：

  1. 这个选择器与上一个选择器很相似
  2. 这个选择器是匹配 <div> 元素下的所有 <span> 元素
  3. 注意是所有，而不是子元素

返回 组合选择器目录

返回顶部

四、伪选择器

伪选择器：

1、伪类选择器

代码1：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			a:hover{

				color: red;

			}

		</style>

	</head>

	<body>

		<p>鼠标悬浮在下面这个链接上的时候，链接会变成红色：</p>

		<a href="http://www.baidu.com">百度</a>

	</body>

</html>

运行结果为：

鼠标悬浮在下面这个链接上的时候，链接会变成红色：

百度

注意：

  1. 上面最重要的代码是 a:hover{ color: red; }
  2. 显示的效果为：当你将鼠标放置在上面的连接上时，链接变成红色

代码2：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			p:first-child{

				background-color: yellow;

			}

		</style>

	</head>

	<body>

		<p>这是 body 的第一个子元素</p>

		<div id="1">

			<p>这是 id="1" 的 div 的第一个子元素</p>

			<p>这是  id="1" 的 div 的第二个子元素</p>

		</div id="2">

		<div>

			<span>这是 id="2" 的 div 的第一个子元素</span>

			<p>这是 id="2" 的 div 的第二个子元素</p>

		</div>

	</body>

</html>

运行结果为：

这是 body 的第一个子元素

这是 id="1" 的 div 的第一个子元素

这是 id="1" 的 div 的第二个子元素

这是 id="2" 的 div 的第一个子元素

这是 id="2" 的 div 的第二个子元素

注意：

  1. 上面最重要的代码是 p:first-child{ background-color: yellow; }
  2. 表示某个父元素的第一个子元素如果是 <p> ，那么该 <p> 元素的背景颜色将被设置为黄色
  3. 例如上面的例子，<body> 的第一个子元素是 <p> ，所以该 <p> 元素的背景颜色被设置为黄色
  4. 同样，id="1" 的 <div> 元素的第一个子元素是 <p> ，所以该 <p> 元素的背景颜色也被设置成黄色
  5. 但是，id="2" 的 <div> 元素的第一个元素是 <span> ，<p> 元素是第二个子元素，所以它不能被匹配

代码3：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			p:nth-child(1){

				background-color: yellow;

			}

			p:nth-child(2){

				background-color: gray;

			}

		</style>

	</head>

	<body>

		<p>这是 body 的第一个子元素</p>

		<div id="1">

			<p>这是 id="1" 的 div 的第一个子元素</p>

			<p>这是  id="1" 的 div 的第二个子元素</p>

		</div id="2">

		<div>

			<span>这是 id="2" 的 div 的第一个子元素</span>

			<p>这是 id="2" 的 div 的第二个子元素</p>

		</div>

	</body>

</html>

运行结果为：

这是 body 的第一个子元素

这是 id="1" 的 div 的第一个子元素

这是 id="1" 的 div 的第二个子元素

这是 id="2" 的 div 的第一个子元素

这是 id="2" 的 div 的第二个子元素

注意：

  1. p:nth-child(1){ background-color: yellow; } 与 p:first-child{ background-color: yellow; } 的效果一模一样
  2. 上面还有一段这样的代码 p:nth-child(2){ background-color: gray; } ，表示如果某个父元素的第二个子元素为 <p> ，那么将该 <p> 元素的背景设置为灰色
  3. 当然，该选择器的用法不止这些，具体参考 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

返回 伪选择器目录

2、伪元素选择器

伪元素选择器是 CSS3 中的用法

例如：

/* CSS3 syntax */

::after

/* CSS2 syntax */

:after

具体用法参考 https://developer.mozilla.org/en-US/docs/Web/CSS/::after

返回 伪选择器目录

返回顶部

五、其他

CSS 的选择器大概可以分为三大类：基础选择器、组合选择器、伪选择器

这三大类可以单独使用，也可以混合使用

例如：

<!DOCTYPE html>

<html>

	<head>

		<title>这是网页标题</title>

		<style type="text/css">

			/*<style> 元素里面的是 CSS 代码*/

			p#test{

				color: red;

			}

		</style>

	</head>

	<body>

		<p id="test">这是一个段落。</p>

		<p>这也是一个段落。</p>

	</body>

</html>

运行结果为：

这是一个段落。

这也是一个段落。

注意：

  1. 上面是类型选择器和 id 选择器的组合
  2. 只有当同时满足两种选择器才能够匹配

CSS 参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

返回顶部

CSS 笔记之 CSS 选择器的更多相关文章

  1. css笔记09：选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. css笔记11：选择器练习

    1. (1)exam1.css文件: .s1 { font-size: 50px; color: blue; } .s2 { backgoround:gray; font-style: italic; ...

  3. css笔记02：选择器（标签式和类）

    body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...

  4. css笔记——关于css中写上charset “utf-8”

    当css文件中写上 charset "utf-8" 时需要将body和html的样式分开写 例如: html,body{margin:0;padding:0;font-family ...

  5. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  6. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  7. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  8. css笔记08：id选择器之父子选择器

    1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  9. css笔记06：层叠样式选择器

    1. (1)HTML文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

随机推荐

  1. python 矩阵（mat）操作

    1.矩阵的创建 由一维或二维数据创建矩阵 a1=array([1,2,3]); a1=mat(a1); data1=mat(zeros((3,3))); #创建一个3*3的零矩阵,矩阵这里zeros函 ...

  2. opencv-图片合成视频

    无论视频的合成还是分解我们都需要进行解码器或者是编码器(因为视频不是一帧一帧进行存储的,而是进行过压缩编码.) import cv2 img = cv2.imread('image1.jpg') im ...

  3. Windows Server上用命令来起停IIS站点

    平时,在Server上管理IIS,都是在界面上进行一些配置,然后再做一些start和stop操作... 对于配置的人来说,会做一些重复步骤,所以适当的使用命令,能大大提高效率. 下面命令是自己之前使用 ...

  4. FPGA实战操作(1) -- SDRAM（Verilog实现）

    对SDRAM基本概念的介绍以及芯片手册说明,请参考上一篇文章SDRAM操作说明. 1. 说明 如图所示为状态机的简化图示,过程大概可以描述为:SDRAM(IS42S16320D)上电初始化完成后,进入 ...

  5. Android模拟器手动设置经纬度坐标

    第一种方式可以在eclipse的DDMS中的Emulator control中设置,如下图 另一种是在cmd中输入telnet localhost 5554(注:5554是模拟器在本机的端口,有可能不 ...

  6. Josephus环的四种解法(约瑟夫环)

    约瑟夫环 约瑟夫环(约瑟夫问题)是一个数学的应用问题:已知n个人(以编号1,2,3…n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个 ...

  7. 阿里Java开发规约（2）

    本文是对阿里插件中规约的详细解释二,关于插件使用,请参考这里 及时清理不再使用的代码段或配置信息. 说明:对于垃圾代码或过时配置,坚决清理干净,避免程序过度臃肿,代码冗余 Positive examp ...

  8. python3 发送QQ邮件

    from email.header import Headerfrom email.mime.text import MIMETextfrom smtplib import SMTP_SSL emai ...

  9. 7.Hibernate 检索

    1.Hibernate检索方式 检索方式简介: 导航对象图检索方式:根据已经加载的对象,导航到其他对象.OID检索方式:按照对象的OID来检索对象.Session 的 get() 和 load() 方 ...

  10. linux 文件 s 权限

    s权限的作用:表示对文件具用可执行权限的用户将使用文件拥有者的权限或文件拥有者所在组的权限在对文件进行执行. s权限的设置:4,用户拥有者的执行权限位, 6,用户组的执行权限位, 2, 两者都设置, ...