什么是选择器：
每一条css样式定义由两部分组成，形式以下：css
[code] 选择器{
样式;
}
[/code] 在{}以前的部分就是“选择器”， “选择器”指明了{}中的“样式”的做用对象，也就是“样式”做用于网页中的哪些元素。前端
基础选择器
- 标签选择器（选择标签名）：一个完整的HTML页面是有不少不一样的标签组成，而 标签选择器，则是决定哪些标签，采用相应的CSS样式； 如：
p{
color:#900;
font-size:12px;
background:#090;
}
- ID选择器（#号+ID名）：ID 选择器能够为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具备惟一性，这意味着同一id在同一文档页面中只能出现一次；
如：web
#demoDiv{
color:#FF0000;
}
- 类选择器（.+class名）：类选择器根据类名来选择,前面以”.”来标志；
如：面试
.demoDiv{
color:blue;
}
- 通用选择器（选择所有元素）：通用选择器用*来表示； 如：
* {
color:green;
font-size: 12px;
}
- 群组选择器：当几个元素样式属性同样时，能够共同调用一个声明，元素之间用逗号分隔； 如：
p,h1,span{
color:red;
line-height:20px;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
使用群组选择器，将会大大的简化CSS代码，将具备多个相同属性的元素，合并群组进行选择，定义一样的CSS属性，这大大的提升了编码效率，同时也减小了CSS文件的体积。ide
层次选择器
- 子选择器 (元素之间用>分割)：子选择器（child selector）是指它的直接后代，能够理解为做用于子元素的第一个后代; 如：
p>span{
color:red;
}
- 后代选择器（元素之间用空格分隔)：用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开 如：
section span{
color:blue;
}
子选择器与后代选择器的区别： 1）子选择器（child selector）仅是指它的直接后代，然后代选择器是做用于全部子后代元素； 2）子选择器是经过“>”进行选择，然后代选择器经过空格来进行选择；学习
- 兄弟选择器（元素之间用+分隔):除了上面的子选择器与后代选择器，咱们可能还但愿找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，咱们想定位第一个段落p元素，对它应用样式。咱们就可使用相邻同胞选择器; 如：
h1 + p {
color:blue;
}
伪类选择器
伪类能够应用在连接标签中，也能够应用在一些表单元素中，但表单元素的应用IE不支持，因此通常伪类都只会被应用在连接的样式上。编码
-
动态伪类选择器 动态伪选择器的书写顺序： 1）link和visited必须放在最前面（无前后顺序,静态伪类选择器）； 2）link和visited只能用于a标签； 3）link和visited后面是focus 4）focus后面是hover； 5）hover后面是active；spa
-
结构伪类选择器 first-child：第一个元素。 last-child：最后一个元素。 nth-child(n)：某一个元素 想选择第几个，n就取值多少。 nth-child(-n+m)：选中前m个元素 n起始值是0。 nth-of-type(n)：选中第n个元素。 nth-last-child(n)：选中倒数第n个元素.code
-
否认伪类选择器 元素名：not（n）除了某个元素，其它元素添加样式orm
伪元素选择器：
全部伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器；
- :first-letter，设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；
div p:first-letter {
font-size: 20px
}
//选择div元素里全部的p元素的第一个字母或汉字;
- :first-line：设置第一个文本行样式；
.box .main:first-line {
color: #f00
}
//只有部分属性容许first-line：全部font属性、color、全部background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height
- :before：设置以前的样式，能够插入生成的内容，并设置其样式；
body:before {
content: 'The Start:';
display: block;
}
//在body元素前插入文本内容'The Start:'，并设置其为块元素
- :after：设置以后的样式，能够插入生成的内容，并设置其样式； 例：
body:after {
content: 'The End.';
display: block;
}
//在body元素最后插入文本内容'The End.'，并设置其为块元素
- input::-webkit-input-placeholder（修改输入框提示信息样式）
属性选择器
是根据元素的属性来匹配的，其属性能够是标准属性也能够是自定义属性；也能够同时匹配多个属性；
- 格式：元素名称[属性名+“属性值”]
input[type=“text”]
- 格式： 元素名[属性名^=属性值开头的内容] 选中以XXX开头的元素
input[type^=“te”]+span{
color:red;
}
- 格式： 元素名[属性名 $ =属性值结尾的内容] 选中以XXX结尾的元素
input[type $ =“d”]+span{
color:blue;
}
- 格式： 元素名[属性名* =属性值包含的内容] 选中包含XXX的元素
input[type*=“i”]+span{
color:green;
}
结语：想学习web前端的朋友，和须要前端资料的朋友均可以加入这边的学习裙，前面：953，中间：352，最后：883，裙里从小白到大佬都有，还有前端学习资料，前端面试题PDF文档，免费分享，不见不散哦！