用户投稿CSS 选择器
选则器的功能在于让浏览器知道样式要套用在哪个或哪些元素中，主要依据选择器的複杂程度分为基本选择器和複合选择器。本篇我们会介绍常用的基本选择器，主要分为四种：通配符选择器、元素 (标籤) 选择器、类别 (Class) 选择器、id 选择器。
通配符选择器
通配符选择器很单纯，用 * 来表示，会选取页面中所有的元素 (标籤)，通常会写在样式的最前面为网页做基本的设定，例如设定字体或内外边距。
语法：
* { 属性名 : 属性值;}範例：
* { margin: 0px; /* 将所有元素的外边距设为 0 */}补充：这边建议将通配符选择器写在样式档最前面的地方是因为在 CSS 样式中会依照优先度及先后顺序覆盖前面设定的样式，而通配符会对所有元素作用，写在最前面的话后面个别元素若有不同样式就可以很容易的覆盖上去。
元素 ( 标籤 ) 选择器
元素选择器会为档案中某种元素设定统一的样式，它抓取的是某个标籤的所有元素，例如 <h>、<p>、<div> 等。假设我们将 <p> 中的文字颜色设为红色，那在当前档案的所有 <p> 内的文字不管在哪、内容是什么，都会变成红色。元素选择器的缺点是无法设计差异化的样式，所以我们通常不会拿来设定样式的细节。
语法：
element {属性名 : 属性值;}範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS小练习</title> </head> <style> * { color: red; /* 不管是 <p> 或 <input> 中的文字都会套用样式变成红色 */ } </style> <body> <p>文字文字文字</p> <input type="button" value="按钮"> </body></html>Class ( 类别 ) 选择器
类别选择器的作用是根据元素的 Class 值选中某些的元素，它的概念有点像我们把元素进行分组分类，并赋予该类别一些特别的样式，这样可以有效的解决元素选择器无法差异化的问题。
在类别选择器中，一个标籤可以拥有多个 Class，以空格隔开，例如 <input class="red myInput">，同个类别也可以运用在多个元素中 (多对多)，不过类别取名不可以数字开头。
.，但选择器前面要加，否则会跟元素选择器搞混Class 是我们自定义的类别，不可使用中文，若为多单词组成可以以 - 符号连接，例如 my-class一个元素不可以拥有多个同名属性，例如 <input class="a" class="b"> 这样是错误的写法，应该将类别名称写在同个 Class 属性中并以空格分开语法：
/* CSS 部分 */.class名称{ /* 类别名称前面需要加一个 "." */属性名 : 属性值;}/* ----------------------------- *//* HTML 部分 */<p class="class名称">文字文字文字</p>範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS小练习</title> </head> <style> .red { color: red; /* 所有拥有 red 类别的元素文字都会变成红色。所以第二段文字还是维持黑色 */ } </style> <body> <a class="red myClass">这个字会变成红色喔</a> <!-- 第二个 Class，myClass 因为没有找到相关的 CSS 样式所以不会起作用，但也不会报错 --> <p class="red">一般来说，生活中，若情人节出现了，我们就不得不考虑它出现了的事实。</p><p>一般来说，生活中，若情人节出现了，我们就不得不考虑它出现了的事实。</p> </body></html>ID 选择器
ID 就像是元素的身分证号码，而 ID 选择器可以透过 ID 找到页面中的某个元素进行样式设置。
元素的 ID 值不用带#，但选择器前面要加，写法为 #ID名ID 在页面中是唯一的，不可重複，不可含空格一个元素只能有一个 ID ; 一个 ID 选择器只能选中一个元素元素可以同时有一个 ID 和多个 Class语法：
/* CSS 部分 */#id名称 { /* id名称前面需要加一个 "#" */属性名 : 属性值;}-----------------------------/* HTML 部分 */<p id="id名称">文字文字文字</p>範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS小练习</title> </head> <style> #text{ color: red; /* id 为 text 的元素文字会变成红色 */ } </style> <body> <p id="text">一般来说，生活中，若情人节出现了，我们就不得不考虑它出现了的事实。你真的了解情人节吗？叔本华有一句座右铭，意志是一个强壮的盲人，倚靠在明眼的跛子肩上。这让我思索了许久，现在，解决情人节的问题，是非常非常重要的。 所以，既然是这样，米歇潘在不经意间这样说过，生命是一条艰险的峡谷，只有勇敢的人才能通过。这让我深深地想到，本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。问题的关键究竟为何？</p> </body></html>属性选择器
属性选择器的写法很多元，不过基本上就是透过元素的属性来进行选择，可一次作用于多个元素上，下面就让我们来介绍比较常见的几种写法。
语法：
/* 情境一：选取具有某属性的元素 */[name] { /* 选取所有有 name 属性的元素 */属性名 : 属性值;}/* 情境二：选取具有某属性等于某值的元素 */[name="myElement"] { /* 选取所有 name 属性等于 myElement 的元素 */属性名 : 属性值;}/* 情境三：选取具有某属性，且属性值含有某字元的元素 */[name^="m"] { /* 选取所有 name 属性开头为 m 的元素 */属性名 : 属性值;}[name$="m"] { /* 选取所有 name 属性结尾为 m 的元素 */属性名 : 属性值;}[name*="m"] { /* 选取所有 name 属性含有 m 的元素 */属性名 : 属性值;}在开发中，属性选择器经常与标籤共同使用，例如：
input[name="myInput"] { /* 选择所有 name 为 myInput 的 input 标籤 */}基本选择器总览
* { color: red }元素作用于同种标籤，不能进行差异化样式设定p { color: red }类别作用于我们自行设定的类别，是使用频率最高的选择器.myClass { color: red }ID选取当前 ID 相同的唯一元素#myId { color: red }属性选择器用法多元，依属性进行筛选[name="myElement"] { color: red }上一篇：[快速入门前端 9] 开发人员工具
下一篇：[快速入门前端 11] CSS 选择器 (2) 複合选择器 — 交集和併集
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
