目录
一、前言
上一篇文章我整理以前的笔记是css样式表：内联样式、内部样式表、外部样式表，详细可参考博文 web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表 这篇文章我将整理笔记css选择器：元素选择器、类选择器、分类选择器、派生选择器等
二、知识点简介
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
选择器：谁选择使用{}中定义的样式
1、元素选择器（标签选择器）
---html中的标签名称
p{}
h1{}
h2{}
优点：使用简单，为某种标签定义样式
缺点：跨类别、同一种下的细分
2、类选择器
CSS中：
.s1 {
...
}
例如：
.s1{//点 名字
border：1px solid red; //边框： 尺寸 实线/虚线等 颜色
}
HTML中：
<标签 class="s1” >
3、分类选择器
定义更清晰，同一种下的细分
CSS 中：
input.txt {}
input.btn {}
html 中：
<p class="txt"></p>--error
<input class="" />
4、元素 ID 选择器
严格的定义---页面比较特别的组成，比如标题、布局
CSS 中：
#a1 {}
html中：
<标记 id="a1" >
5、派生选择器
以层次关系作为定义
CSS 中：
div a {...}
div.left a {...}
ul li ol li a {...}
HTML 中：
<div class="left">
txt
<a>ddd</a>
</div>
6、选择器分组
需要为一些元素定义它们样式中相同的部分时
CSS 中：
p,input.txt,#a1{....}
7、伪类选择器
在不同状态下的样式
XXX:link {}---未访问过
XXX:active {}---激活
XXX:hover {}---悬浮、悬停--鼠标移入
XXX:visited {}---已访问过的
XXX:focus {}---获得焦点( 如, 选中文本框 )
三、实例演示
1、元素选择器（标签选择器）
（1）实例代码
我们先来看看一个例子，如下代码：1. 元素选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>元素选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="1.元素选择器.css" />
</head>
<body>
<h1>一直在模仿</h1>
<h2>从来没超越</h2>
</body>
</html>
接下来我们来看看 css 代码：1.元素选择器.css
/* 元素选择器 */
html
{
color:red
}
/* 当 html 和 h1 标签元素，颜色起冲突，选 h1 的。 即选择包裹里面的标签 */
h1
{
color:blue;
font-size:20pt;
}
h2
{
font-size:20pt;
background-color:gray;
width: 30%;
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
当 html 和 h1 标签元素，颜色起冲突，选 h1 的。标签 h2 没有设置文字颜色，即用 html 标签所设置的红色
有关使用优先级上篇文章有提到：web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表
2、类选择器
（1）实例代码
我们先来看看一个例子，如下代码：2. 类选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>类选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="2.类选择器.css"/>
</head>
<body>
<h3 class="myClass" >一直在模仿,从来没超越</h3>
<h1 class="myClass2">哈哈哈！</h1>
</body>
</html>
接下来我们来看看 css 代码：2.类选择器.css
/* 类选择器 */
.myClass{
border:3px solid red;
color:blue;
width: 30%;
}
.myClass2{
border:3px solid red;
color: grey;
width: 30%;
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
3、分类选择器
（1）实例代码
我们先来看看一个例子，如下代码：3. 分类选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>类选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="3.分类选择器.css"/>
</head>
<body>
<!-- 这个没有定义，所以为默认 -->
<p class="txt">哈哈哈！</p>
<!-- 定义见css文件（ h5.txt{。。。} ），引入方式如下-->
<h5 class="txt">h5的text</h5>
<form>
<!-- 类选择器：定义更清晰，同一种下的细分。
如：下面都是input标签，定义见css文件，引入方式如下 -->
文本框：<input class="txt" type="text"/> <br/> <br/>
按钮：<input class="btn" type="button"/>
</form>
</body>
</html>
接下来我们来看看 css 代码：3.分类选择器.css
h5.txt {
background-color:red;
width: 30%;
}
/* 分类选择器 */
input.txt {
border:2px solid black;
background-color:white;
}
input.btn {
border:2px solid gray;
background-color:blueviolet;
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
4、元素ID选择器
（1）实例代码
我们先来看看一个例子，如下代码：4. 元素ID选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="4.元素ID选择器.css"/>
</head>
<body>
<h5 id="all">h5 text</h5>
</body>
</html>
接下来我们来看看 css 代码：4.元素ID选择器.css
/*元素ID选择器*/
#all {
font-size:30pt;
color:red;
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
5、派生选择器
（1）实例代码
我们先来看看一个例子，如下代码：5. 派生选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="5.派生选择器.css"/>
</head>
<body>
<h1>
This is a<span> important </span>head
</h1>
<div class="left">
This is a<a> important </a>head
</div>
</body>
</html>
接下来我们来看看 css 代码：5.派生选择器.css
/*派生选择器*/
h1 span{
color:red;
}
div.left a {
font-size:30pt;
color:blue;
} （2）效果演示
用谷歌浏览器打开运行，效果如下
6、选择器分组
（1）实例代码
我们先来看看一个例子，如下代码：6. 选择器分组.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="6.选择器分组.css"/>
</head>
<body>
<h1>
This is a<span> H1_important(没有设置) </span>head
</h1>
<h2>
This is a<span> H2_important </span>head
</h2>
<p>这个是段落！！！</p>
</body>
</html>
接下来我们来看看 css 代码：6.选择器分组.css
/*选择器分组*/
h2,p{
color:red;
}（2）效果演示
用谷歌浏览器打开运行，效果如下
如：h2、p标签中的文本颜色都为红色
7、伪类选择器
（1）实例代码
我们先来看看一个例子，如下代码：7. 伪类选择器.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="7.伪类选择器.css"/>
</head>
<body>
<a href="http://www.baidu.com">链接文本</a>
</body>
</html>接下来我们来看看 css 代码：7.伪类选择器.css
/*伪类选择器*/
a:link {color:red;}
a:hover {
font-size:10pt;
color:blue;
}（2）效果演示
用谷歌浏览器打开运行，效果如下
当把鼠标放上去，是这种效果
