CSS 笔记之 CSS 选择器 我是红色的。
阅读目录
- 介绍 CSS 的基本语法格式
- 介绍 基础选择器
- 介绍 组合选择器
- 介绍 伪选择器
- 介绍 其他
一、CSS 的基本语法格式
代码：
<!DOCTYPE html>
<html>
<head>
<title>这是网页标题</title>
<style type="text/css">
/*<style> 元素里面的是 CSS 代码*/
p{
color: red;
}
</style>
</head>
<body>
<p>段落是红色的。</p>
</body>
</html>
运行结果为：
段落是红色的。
注意：
- 上面是一个简单的演示示例
- 重点看 <style> 元素
- CSS 语法的一般形式是 selector{ property: value };
- 这篇文章主要讲解的是 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>
运行结果为：
这个段落是红色的。
这个段落也是红色的。
这个段落还是红色的。
注意：
- 上面的重点代码是 p{ color: red; }
- 是 <p> 元素作为选择器
- 效果是当指定 <p> 元素的字体颜色为红色时，所有段落的字体都会变成红色
- 绝大多数的元素都可以作为选择器，例如： <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>
运行结果为：
这个段落的背景颜色是黄色的。
这个段落没有设置背景颜色。
注意：
- 上面的重点代码是 .example{ background-color: yellow; } 和包含了 class 属性那一行的代码，注意这里的 example 只是一个名称，可以用其他词来代替
- 设置了 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 >这个段落的字体变大了。</p>
<p>这个段落没有设置字体的大小。</p>
</body>
</html>
运行结果为：
这个段落的字体变大了。
这个段落没有设置字体的大小。
注意：
- 上面的重点代码是 #example{ font-size: 50px; } 和包含了 id 属性那一行的代码，注意这里的 example 也只是一个名称，可以用其他词来代替
- 设置了 id 属性的段落，显示效果为字体变大了
- id 选择器和类选择器很相似，但是应用场景不太一样
- id 选择器匹配的 id 名称最好是唯一的，即在同一个 HTML 文档中最好每个 id 的名称都不相同，例如上面的代码中有一个段落的 id 名称已经是 example 了，那么其他段落就不要再用同一个 id 名称来设置字体大小了
- 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>
运行结果为：
我是红色的。
我也是红色的。
我还是红色的注意：
- 上面的重点代码是 *{ color: red; }
- * 是通用选择器，显示的效果为所有元素的字体都变成了红色
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 的元素：
百度注意：
- 上面的重点代码是 [href]{ color: red; } 和含有 href 属性的那一行代码
- <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>
运行结果为：
完全匹配，只匹配属性和值都相同的元素：
返回顶部返回 基础选择器目录
注意：
- 上面代码是完全匹配的示例
- [href="#top"]{ color: red; } 匹配属性和属性值为 href="#top" 的 <a> 元素，显示效果为红色字体
- [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>
运行结果为：
通过属性和属性值中的字符串进行匹配：
百度百度贴吧
注意：
- 上面的代码通过字符串进行匹配，属性为 href 以及属性值中有 baidu 这个字符串的元素都能匹配上
- 上面例子中，两个链接里面都含有 baidu 这个字符串，所以显示效果为字体是橘色的
- 当然，你将代码改成 [href*=w]{ color: orange; } 时，它们也能匹配上，因为它们的链接里面都含有 w 字符
属性选择器还有很多，这里只列举了其中的三种
其他的属性选择器可以参考 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
返回 基础选择器目录
返回顶部
三、组合选择器
组合选择器：
- A + B{ property: value; }
- A ~ B{ property: value; }
- A > B{ property: value; }
- A B{ property: value; }
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>
运行结果为：
这是一个段落。
这是一段测试文字这是另外一个段落。
这是另外一段测试文字
注意：
- 上面最重要的代码是 p + span{ background-color: orange; } ，表示 <p> 元素后面的 <span> 元素的背景颜色设置成橘色
- 这里要注意一个很重要的前提条件：<span> 元素必须直接跟在 <p> 元素的后面
- 上面的例子中，我在它们两个之间插入了一个换行元素 <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>
运行结果为：
这是一个段落。
这是一段测试文字这是另外一个段落。
这是另外一段测试文字
注意：
- 这个选择器与上面的那个选择器很相似
- 这个选择器也是可以匹配 <p> 元素后面的 <span> 元素，只是这两个元素之间就算插入了其他元素，它也能够匹配
- 所以显示的结果才会是两段文字的背景颜色都是橘色
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注意：
- 上面最重要的代码是 div > span{ background-color: yellow; } ，表示将 <div> 元素的直接子元素 <span> 的背景颜色设置为黄色
- 要注意的一个很重要的点是：直接子元素
- 上面例子中 <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注意：
- 这个选择器与上一个选择器很相似
- 这个选择器是匹配 <div> 元素下的所有 <span> 元素
- 注意是所有，而不是子元素
返回顶部
四、伪选择器
伪选择器：
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>
运行结果为：
鼠标悬浮在下面这个链接上的时候，链接会变成红色：
百度注意：
- 上面最重要的代码是 a:hover{ color: red; }
- 显示的效果为：当你将鼠标放置在上面的连接上时，链接变成红色
代码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 >
<p>这是 的 div 的第一个子元素</p>
<p>这是 的 div 的第二个子元素</p>
</div >
<div>
<span>这是 的 div 的第一个子元素</span>
<p>这是 的 div 的第二个子元素</p>
</div>
</body>
</html>
运行结果为：
这是 body 的第一个子元素
这是 的 div 的第一个子元素
这是 的 div 的第二个子元素
这是 的 div 的第一个子元素这是 的 div 的第二个子元素
注意：
- 上面最重要的代码是 p:first-child{ background-color: yellow; }
- 表示某个父元素的第一个子元素如果是 <p> ，那么该 <p> 元素的背景颜色将被设置为黄色
- 例如上面的例子，<body> 的第一个子元素是 <p> ，所以该 <p> 元素的背景颜色被设置为黄色
- 同样， 的 <div> 元素的第一个子元素是 <p> ，所以该 <p> 元素的背景颜色也被设置成黄色
- 但是， 的 <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 >
<p>这是 的 div 的第一个子元素</p>
<p>这是 的 div 的第二个子元素</p>
</div >
<div>
<span>这是 的 div 的第一个子元素</span>
<p>这是 的 div 的第二个子元素</p>
</div>
</body>
</html>
运行结果为：
这是 body 的第一个子元素
这是 的 div 的第一个子元素
这是 的 div 的第二个子元素
这是 的 div 的第一个子元素这是 的 div 的第二个子元素
注意：
- p:nth-child(1){ background-color: yellow; } 与 p:first-child{ background-color: yellow; } 的效果一模一样
- 上面还有一段这样的代码 p:nth-child(2){ background-color: gray; } ，表示如果某个父元素的第二个子元素为 <p> ，那么将该 <p> 元素的背景设置为灰色
- 当然，该选择器的用法不止这些，具体参考 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 >这是一个段落。</p>
<p>这也是一个段落。</p>
</body>
</html>
运行结果为：
这是一个段落。
这也是一个段落。
注意：
- 上面是类型选择器和 id 选择器的组合
- 只有当同时满足两种选择器才能够匹配
CSS 参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
返回顶部