用户投稿複合选择器
複合选择器是指由两个或多个基础选择器组合而成的选择器，複合选择器的种类很多，常见的有子选择器、併集选择器、伪类等等，那接下来就让我们一一介绍这些选择器吧。
交集选择器
故名思义，交集选择是是由两个以上的基础选择器连接在一起，并取其交集。简单来说，交集选择器可以理解为“且”的意思，例如 p.myClass 表示 取得类别为 myClass 的 p 标籤。
交集选择器通常由两个选择器构成，可以是类别+类别、标籤+类别、id+类别(不过 id 原本就是唯一值所以较少用)，选则器之间不加空格。
p.myClass，而非 .myClassp交集选择器中不可能出现两个标籤选择器 (因为一个元素一定只有一个标籤)，所以最常见的用法为 标籤+类别名称语法：
选择器1选择器2选择器3....选择器n { 属性名: 属性值;}範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> .btn { background-color: yellow; /* 样式套用到所有含有 btn 的元素 */ color: purple; } .btn.active { /* 只选取同时拥有 btn 和 active 这两个 Class 的元素 */ background-color: skyblue; /* 因为这个声明写在 .btn 后面，所以样式会将前面的覆盖掉，显示天蓝色背景 */ } </style> </head> <body> <button class="btn">按钮一</button> <button class="btn active">按钮二</button> <button class="btn">按钮三</button> <button class="btn">按钮四</button> </body></html>併集选择器
併集选择器可以一次选择多个元素并赋予他们样式，通常用于集体声明。用法为将选择器以逗号连接，并为其统一进行样式设定，特别的是併集选择器可以加入任何形式、无限多个选择器。
语法：
选择器1, 选择器2, 选择器3, 选择器4,..... 选择器n { 属性名: 属性值;}範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> input, .btn, .active { /* 併集选择器使符合任一选择器的元素都变为红色 */ color: red; } </style> </head> <body> <input type="text" value="123"> <button class="btn">按钮一</button> <a class="active">按钮二</a> <button class="btn">按钮三</button> <button class="btn">按钮四</button> </body></html>上一篇：[快速入门前端 10] CSS 选择器 (1) 基本选择器 — 通配符、元素、类别 Class、id、属性
下一篇：[快速入门前端 12] CSS 选择器 (2) 複合选择器 — 后代选择器及兄弟选择器
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
