CSS学习笔记之选择器
在这篇文章中你能看到有关于 CSS 选择器的相关内容
1、基本选择器
（1）元素选择器
这里所说的元素，其实就是我们常说的 HTML 元素，我们可以通过元素选择器为指定类型的 HTML 元素设置样式
<!DOCTYPE HTML>
<html>
<head>
<!-- 为了展示方便，这里使用内部样式表指定元素样式 -->
<style>
/* 指定 <body> 标签内的文字颜色为灰色 */
body { color: gray; }
/* 指定 <h1> 标签内的文字颜色为菊蓝色 */
h1 { color: cornflowerblue; }
</style>
</head>
<body>
<h1>Title Here</h1> <!-- 字体颜色为菊蓝色 -->
<p>Paragraph Here</p> <!-- 字体颜色为灰色 -->
</body>
</html>
- 覆盖与继承
根据 CSS 规则，子元素将会 继承 父元素所拥有的样式【重要】
也就是说，当我们给 <body> 元素定义 color 为 gray 时，子元素 <h1> 和 <p> 的 color 也为 gray
然而，重新定义的子元素样式将会 覆盖 继承的样式【重要】
也就是说，当我们给 <h1> 元素定义 color 为 cornflowerblue 时，它会覆盖 color 为 gray 的样式设置
- 选择器分组
现在考虑这样一个问题，假如我们需要将所有的标题都变成菊蓝色，那么我们可以像下面这样定义样式表：
h1 { color: cornflowerblue; }
h2 { color: cornflowerblue; }
h3 { color: cornflowerblue; }
h4 { color: cornflowerblue; }
h5 { color: cornflowerblue; }
h6 { color: cornflowerblue; }
这样的定义虽然清晰易懂，但是未免也太过于繁琐，所以我们可以将其合并写成下面的形式：
h1,h2,h3,h4,h5,h6 { color: cornflowerblue; }
这样的写法我们称为 选择器分组，把所有具有相同声明的元素放在一起，从而使得定义更加简洁
- 声明分组
既然我们可以对选择器进行分组，那么我们也可以对样式声明进行分组吗？答案是肯定的！
还是考虑这样一个问题，假如我们要让段落的背景颜色变成黑色且字体颜色变成白色，那么一个简单的声明如下：
p { background: black; }
p { color: white; }
这样可以吗？当然可以，但是当声明增多时，也同样太过于繁琐
所以我们可以将同一个元素的声明合并在一起，这样的写法我们称为 声明分组
p {
background: black;
color: white;
}
（2）类选择器
类选择器根据 class 属性的值选择特定元素，只需要在类名前加上一个点号（ . ）即可
<!DOCTYPE HTML>
<html>
<head>
<!-- 在 CSS 中使用类选择器 -->
<style>
.important { color: cornflowerblue; }
</style>
</head>
<body>
<!-- 在 HTML 中指定类名 -->
<h1 class="important">这是一个重要的标题</h1> <!-- 字体颜色为菊蓝色 -->
<h1>这是一个标题</h1> <!-- 字体颜色为黑色 -->
<p class="important">这是一个重要的段落</p> <!-- 字体颜色为菊蓝色 -->
<p>这是一个段落</p> <!-- 字体颜色为黑色 -->
</body>
</html>
（3）id 选择器
id 选择器根据 id 属性的值选择特定元素，只需要在 id 前加上一个井号（ # ）即可
<!DOCTYPE HTML>
<html>
<head>
<!-- 在 CSS 中使用 id 选择器 -->
<style>
#important { color: cornflowerblue; }
</style>
</head>
<body>
<!-- 在 HTML 中指定 id -->
<h1>这是一个标题</h1> <!-- 字体颜色为黑色 -->
<p id="important">这是一个重要的段落</p> <!-- 字体颜色为菊蓝色 -->
</body>
</html>
2、层次选择器
（1）后代选择器
后代选择器可以帮助我们选择某个元素的 所有后代元素，一般的语法规则如下：
selector1 selector2 {
property: value;
...
}
上面的语法表示只选择 selector1 中的后代元素 selector2，而对一般的 selector2 不起作用
<!DOCTYPE HTML>
<html>
<head>
<!-- 在 CSS 中使用后代选择器 -->
<style>
p span {
color: blue;
}
</style>
</head>
<body>
<h1>我是标题，<span>没有变成蓝色</span></h1>
<p>我是段落，<span>变成蓝色</span></p>
</body>
</html>
（2）子代选择器
与后代选择器相比，子代选择器只对某个元素的 所有子代元素 起作用，一般的语法规则如下：
selector1 > selector2 {
property: value;
...
}
上面的语法表示只选择 selector1 中的子代元素 selector2，而对一般的 selector2 不起作用
<!DOCTYPE HTML>
<html>
<head>
<!-- 在 CSS 中使用子代选择器 -->
<style>
p > strong {
color: red;
}
</style>
</head>
<body>
<p>这是段落，<strong>变成红色</strong></p>
<p>这是段落，<span>这是强调，<strong>没有变成红色</strong></span></p>
</body>
</html>
（3）通用兄弟选择器
通用兄弟选择器可以帮助我们选择 在某个元素之后的所有兄弟元素，一般的语法规则如下：
selector1 ~ selector2 {
property: value;
...
}
上面的语法表示只选择在 selector1 之后的所有兄弟元素 selector2，而对一般的 selector2 不起作用
<!DOCTYPE HTML>
<html>
<head>
<!-- 在 CSS 中使用通用兄弟选择器 -->
<style>
h1 ~ p {
color: green;
}
</style>
</head>
<body>
<h1>这是一个标题，不会变成绿色</h1>
<p>这是一个段落，将会变成绿色</p>
<h3>这是一个副标题，不会变成绿色</h3>
<p>这是另一个段落，将会变成绿色</p>
</body>
</html>
（4）相邻兄弟选择器
与通用兄弟选择器相比，相邻兄弟选择器只对 在某个元素之后的下一个兄弟元素 起作用，一般的语法规则如下：
selector1 + selector2 {
property: value;
...
}
上面的语法表示只选择在 selector1 之后的下一个兄弟元素 selector2，而对一般的 selector2 不起作用
<!DOCTYPE HTML>
<html>
<head>
<!-- 在 CSS 中使用相邻兄弟选择器 -->
<style>
h1 + p {
color: yellow;
}
</style>
</head>
<body>
<h1>这是一个标题，不会变成黄色</h1>
<p>这是一个段落，将会变成黄色</p>
<h3>这是一个副标题，不会变成黄色</h3>
<p>这是另一个段落，不会变成黄色</p>
</body>
</html>
3、属性选择器
属性选择器允许根据 元素的属性和属性值 来选择元素，它的基本语法如下：
selector[属性选择器][...] {
property: value;
...
}
属性选择器的取值如下：
| 属性选择器 | 描述 |
|---|---|
| attribute | 选择具有指定属性的元素 |
| attribute=value | 选择具有指定属性且属性值为 value 的元素 |
| attribute*=value | 选择具有指定属性且属性值中包含 value 的元素 |
| attribute^=value | 选择具有指定属性且属性值以 value 开头的元素 |
| attribute$=value | 选择具有指定属性且属性值以 value 结尾的元素 |
| attribute~=value | 选择具有指定属性且属性值中包含指定词汇 value 的元素 |
| attribute|=value | 选择具有指定属性且属性值中以指定词汇 value 开头的元素 |
其中，*= 与 ~=、^= 与 |= 之间的区别仅仅在于 “词汇” 二字，它表示什么意思呢？
“词汇” 是指 独立的 字符串，意思就是这段字符串的前后不能出现除 - 之外的其它符号，否则不能匹配
<!DOCTYPE HTML>
<html>
<head>
<style>
a[href^="http"] { font-size: 32px; } /* 可以匹配 */
a[href|="http"] { font-size: 10px; } /* 不能匹配 */
a[href*="exam"] { font-weight: 800; } /* 可以匹配 */
a[href~="exam"] { font-weight: 200; } /* 不能匹配 */
a[href$=".com"] { text-decoration: none; } /* 可以匹配 */
</style>
</head>
<body>
<a href="https://www.example.com">空的链接</p>
</body>
</html>
4、伪元素
伪元素（pseudo-element）可以向某些选择器设置特殊的效果，基本语法如下：
selector::pseudo-element {
property: value;
...
}
常见的伪元素如下：
| 伪元素 | 描述 |
|---|---|
| first-letter | 向文本的第一个字添加特殊样式，只能用于块级元素 |
| first-line | 向文本的第一个行添加特殊样式，只能用于块级元素 |
| before | 在元素之前添加特殊样式 |
| after | 在元素之后添加特殊样式 |
| selection | 对选中文本添加特殊样式 |
一个简单的例子如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
p::first-letter { font-size: xx-large; }
</style>
</head>
<body>
<p>这是一个段落，很长很长的段落</p>
<p>然后这是另外一个段落，也是很长很长的段落</p>
</body>
</html>
利用伪元素，我们还可以用一个元素画出五角星，例子如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
.star {
width: 0px;
height: 0px;
border-bottom: 9.51px solid yellow;
border-left: 3.09px solid transparent;
border-right: 3.09px solid transparent;
position: relative;
}
.star::before, .star::after {
content: "";
width: 0px;
height: 0px;
border-bottom: 9.51px solid yellow;
border-left: 13.09px solid transparent;
border-right: 13.09px solid transparent;
}
.star::before {
transform: rotate(-36deg);
position: absolute;
top: 8.6px;
left: -13.3852px;
}
.star::after {
transform: rotate(36deg);
position: absolute;
top: 8.6px;
left: -12.7948px;
}
</style>
</head>
<body>
<div class="star"></div>
</body>
</html>
5、伪类
伪类（pseudo-class）可以向某些选择器添加特殊的效果，其基本语法如下：
selector:pseudo-class {
property: value;
...
}
（1）动态伪类选择器
| 语法 | 描述 |
|---|---|
| link | 选择未被访问的锚点元素 |
| visited | 选择已被访问的锚点元素 |
| hover | 选择鼠标悬浮的元素 |
| active | 选择已被激活的元素 |
| focus | 选择获得焦点的元素 |
一个例子如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
/* a:hover 必须置于 a:link 和 a:visited 之后 */
/* a:active 必须置于 a:hover 之后 */
a:link { color: red } /* 未访问的链接显示红色 */
a:visited { color: green } /* 已访问的链接显示绿色 */
a:hover { color: blue } /* 鼠标移动到链接上显示蓝色 */
a:active { color: yellow } /* 选定的链接显示黄色 */
</style>
</head>
<body>
<a href="https://www.baidu.com/">百度链接</a>
</body>
</html>
（2）元素状态伪类选择器
| 语法 | 描述 |
|---|---|
| checked | 选择已被选中的按钮元素 |
| enabled | 选择启用的表单元素 |
| disabled | 选择禁用的表单元素 |
一个例子如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
input:checked + span { color: cornflowerblue; }
</style>
</head>
<body>
<form action="#">
<label><input type="checkbox" value="apple" /><span>Apple</span></label>
<label><input type="checkbox" value="orange" /><span>Orange</span></label>
<label><input type="checkbox" value="pear" /><span>Peer</span></label>
</form>
</body>
</html>
（3）结构伪类选择器
| 语法 | 描述 |
|---|---|
| first-child | 选择作为父元素的第 1 个子元素的元素 |
| nth-child(n) | 选择作为父元素的第 n 个子元素的元素 |
| last-child | 选择作为父元素的最后一个子元素的元素 |
| only-child | 选择作为父元素的唯一一个子元素的元素 |
| first-of-type | 选择作为父元素内具有指定类型的第 1 个子元素 |
| nth-of-type(n) | 选择作为父元素内具有指定类型的第 n 个子元素 |
| last-of-type | 选择作为父元素内具有指定类型的最后一个子元素 |
| only-of-type | 选择作为父元素内具有指定类型的唯一一个子元素 |
| root | 选择作为根元素的元素，例如 html:root |
| empty | 选择没有子元素的元素 |
一个例子如下：
<!DOCTYPE html>
<html>
<head>
<style>
h1:only-child {
color: deepskyblue;
}
h3:first-child {
color: skyblue;
}
p:last-child {
color: lightskyblue;
}
span:last-child {
color: lightblue;
}
</style>
</head>
<body>
<div class="header">
<h1>Hello</h1>
</div><hr/>
<div class="section">
<h3>Eternity in an hour</h3>
<p>To see a world in a grain of sand,</p>
<p>And a heaven in a wild flower,</p>
<p>Hold infinity in the palm of your hand,</p>
<p>And eternity in an hour.</p>
</div><hr/>
<div class="footer">
<h3>Hello World</h3>
<p>Say Hello To Tomorrow</p>
<p>Say Goodbye To Yesterday</p>
<span>Thank you for listening</span>
</div>
</body>
</html>
（4）目标伪类选择器
| 语法 | 描述 |
|---|---|
| target | 被指定 URL 指向的元素 |
一个例子如下：
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
a { color: rgba(245, 245, 245, 0.8); text-decoration: none; }
a:link, a:visited, a:hover, a:active { text-decoration: none; }
.menu {
list-style-type: none;
overflow: hidden;
}
.menu > li {
float: left;
width: 100px;
height: 25px;
border: 0.1px solid lightskyblue;
background-color: cornflowerblue;
}
.menu > li:hover {
background-color: lightskyblue;
}
.content {
list-style-type: none;
position: relative;
}
.content > li {
position: absolute;
}
.poem {
width: 400px;
height: 80px;
color: rgba(255, 255, 255, 0.8);
border: 0.5px solid lightskyblue;
background-color: cornflowerblue;
}
#spring { z-index: 4; }
#summer { z-index: 3; }
#autumn { z-index: 2; }
#winter { z-index: 1; }
#spring:target { z-index: 5; }
#summer:target { z-index: 5; }
#autumn:target { z-index: 5; }
#winter:target { z-index: 5; }
.flex {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<ul class="menu">
<li class="flex"><a href="#spring">春</a></li>
<li class="flex"><a href="#summer">夏</a></li>
<li class="flex"><a href="#autumn">秋</a></li>
<li class="flex"><a href="#winter">冬</a></li>
</ul>
<ul class="content">
<li id="spring"><div class="flex poem">春游芳草地</div></li>
<li id="summer"><div class="flex poem">夏赏绿荷池</div></li>
<li id="autumn"><div class="flex poem">秋饮黄花酒</div></li>
<li id="winter"><div class="flex poem">冬吟白雪诗</div></li>
</ul>
</body>
</html>
（5）否定伪类选择器
| 语法 | 描述 |
|---|---|
| not(selector) | 排除符合要求的元素 |
一个例子如下：
<!DOCTYPE html>
<html>
<head>
<style>
p:not(.important) { color: gray; }
</style>
</head>
<body>
<p>我是一个段落</p>
<p class="important">我是一个重要的段落</p>
</body>
</html>
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】
CSS学习笔记之选择器的更多相关文章
- CSS学习笔记(1):选择器
一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
完整错误信息: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS"AS IS" AND ANY ...
- JS推断是否为JSON对象及是否存在某字段
$.ajax({ type: 'POST', url: url, success(function(data){ //推断是否为JSON对象 if(typeof(data) == "obje ...
- 使用oracle数据库和MySQL数据库时hibernate的映射文件.hbm.xml的不同
假设是使用oracle数据库.那么hibernate的映射文件.hbm.xml例如以下: <id name="xuehao" column="xuehao" ...
- Python字符串转为字典方法大全
方法一: 通过内置函数eval str_info = '{"name": "test", "age": 18}' dict_info = e ...
- CF555B Case of Fugitive
题目大意 有一些不相交线段和一些桥,桥可以架在两个相邻的线段上.求现有的桥是否可以使所有线段连通. 题解 在两个线段上架桥,桥的长度在一个范围内,相当于一个长度的区间,一个桥只有一个长度,相当于一个长 ...
- poi读取docx中的文字和图片（自己应用）
poi读取docx中的文字和图片(自己应用) package com.fry.poiDemo.dao; import java.io.File; import java.io.FileInputStr ...
- Alignment(dp)
http://poj.org/problem?id=1836 求两遍最长上升子序列,顺序求一遍,逆序求一遍. #include <stdio.h> #include <string. ...
- Python 37 进程池与线程池 、 协程
一:进程池与线程池 提交任务的两种方式: 1.同步调用:提交完一个任务之后,就在原地等待,等任务完完整整地运行完毕拿到结果后,再执行下一行代码,会导致任务是串行执行 2.异步调用:提交完一个任务之后, ...
- Element-UI 笔记
1.表单验证 官官方地址 : https://element.eleme.cn/#/zh-CN/component/form 使用rules进行表单字段验证 https://blog.csd ...
- 关于如何将_variant_t型转化为int型和string类型
1)将_variant_t型转化为int型 关于将_variant_t型转化为int型,网上有好多好多参考,但好多都很复杂并且还不对,其实整个转化过程就只一行代码可以搞定: _variant_t a; ...