在css中选择器是很重要的，我们在编写网页的时候会经常用到选择器。在本博客内我会为大家讲解多种选择器
通用选择器可以匹配到页面中所有的元素， 语法:
*{样式声明;}一组样式声明的组成为 属性:取值; 我们可以直接用body来取代*，因为大部分内容都是写在body标签中
元素选择器可以定义某一个标签的样式 语法： 这里我们用div来举例子
div{样式声明;}
类选择器是由css定义好，可以被任意标记的class属性使用 语法：
.类名{样式声明;} 起类名是有限制的 第一 不能以数字开始 第二 在类命中只能用 "_"下划线和”-“连字符。其他的特殊符号一律不能使用 引用方式： <div class="类名"></div> 我们也可以在一个元素中引用多个类选择器，中间用空格分隔 <div class="类名1 类名2 类名3">ID选择器是专门针对于ID值的选择器 语法：
#ID值{样式声明;} 例如 #test{样式声明;} 可以匹配到ID值为test的元素要知道选择器是可以结合使用的，可以更精准的匹配到我们想要修改样式的元素 例如
#test div.css{样式声明;}s 这个选择器可以匹配到ID值为test并且class定义为css的div元素群组选择器可以为多个元素设置同样的样式 语法：
选择器1，选择器2，选择器3，……{样式声明;} 选择器间用逗号隔开 例如 div,p{ background-color:red; } 这是为div和p设置背景颜色为红色后代选择器就是具备层级关系的元素，被嵌套的元素都可以称为后代元素 例如
<div> <p> <a> </a> <p> </div>这时我们就可以说 a是div的后代元素,当然了p标记也是后代元素 这时后代选择器的语法为；
div a{样式声明;} 匹配到div中的a子代选择器就是只具备一层关系的元素，被嵌套元素称为子代元素 就拿上面后代选择器的例子来解释，p就是是div的子元素，而a就不是子代元素，而是div的后代元素 语法
div>p{样式声明;} 匹配的是div中的p 为了说明子代和后代我在这里再举一个例子 div>a{样式声明;} 像这样是匹配不到我们想要的 div中的p中的a标签的，匹配到的是div中的a子代元素 后代选择器和子代元素也是可以组合的 div>p a{元素声明;} 这样就可以精准的匹配到 div中的p中的a伪类选择器是要配合其他选择器来使用的，而且还有不同的元素状态，所以它会很杂。 同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
静态伪类是针对超链接的 状态 1. :link 表示超链接未被访问的状态 2. :visited 表示超链接已经被访问过的状态 使用方式
a:link{} 也可以配合其他选择器使用比如 div>p a:link{} 匹配div中的p中的a标记未被访问的超链接， 同理 div>p a:visited{} 匹配div中的p中的a标记被访问过的超链接动态伪类是所有标签都可以用的 1. :hover 匹配鼠标悬停在元素上的状态 2. :active 匹配元素被激活时的状态（点击被激活时的状态） 3. :focus 匹配元素获取焦点时的状态 比如选中文本框和密码框的时候 使用方式和静态伪类一样
它可以设置当锚点被连接时的样式
1. :target 使用方式如下 div:target{background:red;} 设置div被锚点链接过去时背景颜色为红色 以锚点方式链接到该元素时，该元素的样式会变成我们设计的样式它可以匹配 元素已启用 被禁用 被选中的状态 主要应用在表单控件
1.:enabled 匹配每个已启用的元素 2.:disabled 匹配每个被禁用的元素 3.:checked 匹配每个被选中的元素 （radio单选框，checkbox复选框）它可以通过元素间的的结构关系来匹配元素
1.:first-child 匹配其父元素中的首个子元素 例如 td:first-child{color:red;} 匹配属于其父元素中的第一个td 2.:last-child 匹配属于其父元素中最后一个子元素 例如 td:last-child{color:bule;} 3.:nth-child(n) 匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。 4.:empty 匹配没有子元素的元素 也不能有文本 5.:only-child 匹配 其父元素中 仅有一个子元素 的元素否顶伪类选择器是将 满足条件的 选择器匹配的元素 排除出去 就是除了匹配到的元素之外的其他全部元素 例如
为所有的a元素设置一个字体大小为12px，除了class值为hello的 a:not(.hello){a font-size:12px; }通过位置关系来匹配元素(平级) 只能向后找，不能向前找
1.相邻兄弟选择器 挨在一起的元素称之为相邻兄弟 1.语法： 选择器1+选择器2{ } 选择器中间用加号来表示同级 ex: <div> <a></a> <p></p> </div> 在这a 和 p 就是兄弟元素 div a+p{样式上面;} 这是用后代选择器加上兄弟选择器来匹配到div中的a 和p 2.通用兄弟选择器 后面所有的元素 1.语法 选择器1~选择器2{ } ex: <div> <a></a> <p></p> <b></b> </div> 相邻兄弟选择器只能匹配两个紧挨着的两个元素，而通用兄弟选择器则是往后全部中只要有就能匹配到 div a~b{样式声明;} 这是匹配div中的 a 和 b两个元素使用元素所使用的属性和值来匹配页面中的元素 语法
[attr=值]{}不同的使用方式
elem为元素标签 1.[attr] attr：表示某一具体属性 匹配页面中 带有attr属性的元素 2.elem[attr] elem：表示页面中某一元素 例如 div[id]:匹配页面中所有有id的div元素 3.elem[attr1][attr2]…… 匹配即具备attr1属性同时也具有attr2属性的元素 例如 p[id][class]匹配页面中有id也有class属性的p元素 4.elem[attr=value] value:表示某一具体数值 匹配attr属性值为value的所有元素 ex: input[type=text] 5.elem[class~=value] 1.用在多类选择器中 2.匹配 class属性值 是以空格隔开的值列表， 并且value是该值列表中的一个独立的值 的元素 6.elem[apttr^=value] ^= :以……为开始 作用：匹配attr属性值以value开始的元素 Ex： 匹配class属性以col- 开始的所有元素 [class^=col-]{ weight } 7.elem[attr*=value] *=：包含……字符 作用：匹配attr属性值中包含value字符的元素 8.elem[attr$=value] $=：以……为结束 作用：匹配attr属性值以value作为结束的元素 属性选择器中，所有的值，都可以用""或''引起来匹配某个元素中的某部分内容
1. :first-letter 或 ::first-letter 匹配某元素的首字符 2. :first-line 或::first-line 匹配某元素的 第一行 整行 字符 3. :selection 匹配被用户选取的部分 只能改文本颜色和背景颜色 如果修改大小那么布局可能会被破坏版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
