title: CSS 选择器详细介绍 layout: post categories: CSS tags: css选择器 内联嵌入外部式 ID类选择器区别 伪元素
文章出自个人博客https://knightyun.github.io/2018/05/02/css-selector，转载请申明
CSS（层叠样式表Cascading Style Sheets）,用于修饰HTML网页内容，根据使用位置不同可分为三种样式：内联式，嵌入式，外部式。
<>内部使用，例如：
<p style = "color: red; font-size: 20px"></p>。
<style></style> 之中，并放在 <head></head> 内，例如：<head>
<!--这里放其它标签，例如 meta，link，script之类-->
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
.css 文件中，使用如下方式引用：
<link rel = "stylesheet" type="text/css" href="css/index.css">href写.css文件路径，可以是绝对路径或相对路径，相对路径类似于：../../css/index.css，绝对路径类似于：/css/index.css。
三种样式中，嵌入式和外部式需要使用到选择器，也是组成 css 样式的主体例如上例中的 p { }，主要分为：
元素选择器、类选择器、ID选择器、子选择器、后代选择器、通用选择器、属性选择器、伪元素选择器、组选择器、相邻同级选择器。
也叫类型选择器，可以理解为标签选择器，最基本的选择器，就是使用常见的HTML元素，例如：body { }, h { }, p { }, div { }, span { }, a { } 等。
前提需要在标签内使用类标记某处文档，类似：class = "myClass"，然后它的选择器的格式就为：.myClass { }，就是在类名前面加个小数点。
和类选择器类似，前提需要在标签内使用ID标记某处文档，类似：id = "myId"，格式为：#myId { }，就是在 ID 前加个符号 #。
ID选择器与类选择器的区别： <span id="2.3.1"> 类选择器可以使用多次，ID选择器只能使用一次，例如：
<p class = "one">This is a test content, </p><p class = "one">hello world !</p>，但是ID不能这样。 并且能同时使用多个类分别标记不同样式，例如：<p class = "one two"></p>，ID也不能这样。
用于指定标签元素的子元素，使用符号 > 隔开父元素与子元素，例如：
HTML：
<p1>
Hello World !!!
<p2>This is a test content</p2>
</p1>
CSS:
p1>p2 {
color: green;
font-size: 20px;
}
这里就指定了父元素 p1 的子元素 p2 的样式，但是只作用于子元素，不作用于父元素。
用于指定标签元素的后代元素，使用空格符号隔开，例如： html:
<p1>
Hello world !!!
<p2>
This is a <a>test</a> content
</p2>
</p1>
css:
p1 a {
color: green;
font-size: 20px;
}
这里指定了元素 p1 的后代元素 a 的样式，注意这里不是子代元素 p2，就是作用于所有指明的后代元素。
子代选择器与后代选择器的区别： <span id="2.5.1"> 顾名思义的理解，后代就是包含子代在内的所有下代的元素，可以跨越子代直接作用于孙代；而子代只包含父级的第一代子代元素。 子代选择器使用符号
>隔开，后代选择器使用空格隔开。
顾名思义，使用通配符 * 设置 html 中所有标签的样式，例如：
* {
color: red;
font-size: 20px;
}
这样就设置了HTML中所有的标签的样式了。
对具有指定的属性(attribute)设置样式，使用方括号符号 [ ]。
不用管属性值，例如：
[href] {color: red}
a [href] {color: red}
a [href] [title] {color: red}
以上格式都能实现相同效果，即具有该属性的
a标签。
具有指定属性与其指定值的标签，格式为：
a [title = "link"] {color: red}
HTML中存在一类与元素控制内容相同的抽象元素，但是并不实际存在于HTML文档，给标签的某种状态设置样式，例如单击某内容或鼠标滑过某内容，然后设置改变的样式。伪元素种类较多，只列举几个常用例子。
为激活的元素设置样式，就是用户单击该标签时的样式，例如：
a:active {color: red}
则用户点击这个链接文本时颜色变为红色。
悬停状态伪元素，为用户鼠标所停靠的标签设置样式，例如：
p:hover {color: red}
则鼠标停留在该段落时，段落内容变为红色。
用于具有焦点的元素，常用就是输入框，用户点击输入框准备输入时则该输入框就具有了焦点，例如：
input:focus {background-color: green}
则点击输入框时背景颜色变为绿色。
为选中的元素设置样式，例如：
::selection {color: red}
为文档中鼠标选定的内容设置为红色字体。注意可以追加应用范围：p::selection 表示段落中选中的字体才应用该样式，不追加直接使用 ::selection 表示应用于所有内容。
火狐浏览器支持需要使用 -moz-selection。
为元素的第一子代应用样式，例如：
p:first-child {color: red}
这个比较好理解。
为元素的父元素的第 n 个子代设置样式，只是括号内需要输入数字表示第几代，例如：
p:nth-child(2) {color: red}
假如p标签父元素是body，就表示为body的第二个子元素设置样式。
为多个元素设置相同样式时，可以使用逗号分隔元素，达到同时设置的效果。例如：
p1,p1 {color: red}
表示为p1和p2 同时设置相同的样式。
选择与指定元素同级的相邻的第一个某元素，设置样式，例如：
div+p {color: red}
表示为 p 设置样式，并且这个 p 与 div 同级，并且是与 div 相邻的第一个 p，div 内部的 p 并不包含在内。