CSS 笔记之 CSS 选择器
/*先设置背景再设置前景*/
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 的基本语法格式
- 介绍 基础选择器
- 介绍 组合选择器
- 介绍 伪选择器
- 介绍 其他
一、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 id="example">这个段落的字体变大了。</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 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 的第二个子元素
注意：
- 上面最重要的代码是 p:first-child{ background-color: yellow; }
- 表示某个父元素的第一个子元素如果是 <p> ，那么该 <p> 元素的背景颜色将被设置为黄色
- 例如上面的例子，<body> 的第一个子元素是 <p> ，所以该 <p> 元素的背景颜色被设置为黄色
- 同样，id="1" 的 <div> 元素的第一个子元素是 <p> ，所以该 <p> 元素的背景颜色也被设置成黄色
- 但是，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 的第二个子元素
注意：
- 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 id="test">这是一个段落。</p>
<p>这也是一个段落。</p>
</body>
</html>
运行结果为：
这是一个段落。
这也是一个段落。
注意：
- 上面是类型选择器和 id 选择器的组合
- 只有当同时满足两种选择器才能够匹配
CSS 参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
CSS 笔记之 CSS 选择器的更多相关文章
- css笔记09：选择器优先级
1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- css笔记11：选择器练习
1. (1)exam1.css文件: .s1 { font-size: 50px; color: blue; } .s2 { backgoround:gray; font-style: italic; ...
- css笔记02：选择器（标签式和类）
body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...
- css笔记——关于css中写上charset “utf-8”
当css文件中写上 charset "utf-8" 时需要将body和html的样式分开写 例如: html,body{margin:0;padding:0;font-family ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- css笔记08：id选择器之父子选择器
1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- css笔记06：层叠样式选择器
1. (1)HTML文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
随机推荐
- DP【洛谷P3135】[USACO16JAN]堡哞Fort Moo
[洛谷P3135][USACO16JAN]堡哞Fort Moo Bessie和她的朋友Elsie正在建筑一个堡垒,与任何一个好的堡垒一样,这个需要一个强固的框架.Bessie想造一个轮廓是1m宽的空心 ...
- CF708A Letters Cyclic Shift 模拟
You are given a non-empty string s consisting of lowercase English letters. You have to pick exactly ...
- 过河卒 NOIp 2002 dp
题目描述 棋盘上AAA点有一个过河卒,需要走到目标BBB点.卒行走的规则:可以向下.或者向右.同时在棋盘上CCC点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦 ...
- 洛谷 P1003 铺地毯
嗯.... 一道比较水的模拟题.. 刚拿到题的时候被它的数据范围吓到了,二维数组不可能开那么大啊,可是一边做发现测试数据太水 ... 先看一下题吧... 题目描述 为了准备一个独特的颁奖典礼,组织者在 ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_高级管理控制（配置）
一个应用程序的XML配置文件示例: <?xml version="1.0"?> <configuration> <runtime> <as ...
- POJ2828 Buy Tickets（线段树之插队问题）
飞翔 问题是这样的:现在有n个人要买票,但是天黑可以随便插队.依次给出将要买票的n个人的数据信息.包含两项:pos,当前第i号人来了之后他肯定要插入到pos这个位置,如果当前pos无人,那最好了,直接 ...
- Git for Linux and Windows
1.在liunx中安装 1.1yum安装 [root@node1 ~]# yum install git –y [root@node1 ~]# git version git version 1.8. ...
- C++二维数组的动态声明
int **a = new int* [m] //分配一个指针数组,将其首地址保存在a中 . for(int i = 0; i < m; i++) //为指针数组的每个元素分配一 ...
- thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息
form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...
- java——巨简陋文本编辑器
String :equals()方法是进行内容比较,而不是引用比较. “==”比较两个变量本身的值,即两个对象在内存中的首地址. Scanner :用Scanner实现字符串的输入有两种方法,一种是n ...