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: ...
随机推荐
- zabbix发送邮件脚本
#!/usr/bin/env python #-*- coding: UTF- -*- import os,sys reload(sys) sys.setdefaultencoding('utf8') ...
- Spring注解实现定时功能以及Quartz定时器
一:Spring注解实现--------->Spring3.0以后自带的task,可以将它看成一个轻量级的Quartz 1:maven配置: <!-- quartz--> <d ...
- Redis 工具类 java 实现的redis 工具类
最近了解了一下非关系型数据库 redis 会使用简单的命令 在自己本地电脑 使用时必须先启动服务器端 在启动客户端 redis 简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内 ...
- Python判断字符串编码以及编码的转换
转自:http://www.cnblogs.com/zhanhg/p/4392089.html Python判断字符串编码以及编码的转换 判断字符串编码: 使用 chardet 可以很方便的实现字符串 ...
- C/C++中qsort()以及sort()的用法
最近学弟们问快速排序的比较多,今天自己就做一下总结,快速排序在库函数里面有现成的,不用自己实现,调用一下就可以达到自己想要的结果,掌握以后就可以完全摒弃冒泡和选择了,并且时间复杂度也从O(n*n)提升 ...
- P1111 修复公路（并查集）
题目背景 AA地区在地震过后,连接所有村庄的公路都造成了损坏而无法通车.政府派人修复这些公路. 题目描述 给出A地区的村庄数NN,和公路数MM,公路是双向的.并告诉你每条公路的连着哪两个村庄,并告诉你 ...
- css雪碧图制作
使用css背景合并工具cssSprite 工具下载链接: http://download.csdn.net/download/wx247919365/8741243 1.选择文件 2.生成雪碧图 3. ...
- hdu 1556 涂气球 线段树（区间更新~对区间[x,y]更新，求任意节点被更新的次数）
Color the ball Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 利用RELK进行日志收集
利用RELK进行日志收集 发布时间:April 3, 2018 // 分类:运维工作,开发笔记,python // No Comments 前不久在做应急的总是遇到要求对日志进行分析溯源,当时就想到如 ...
- c++从txt中读取数据，数据并不是一行路径(实用)
#include <iostream>#include <fstream>#include <string> using namespace std; //输出空行 ...