关于css:CSS选择器

什么是选择器：

每一条 css 款式定义由两局部组成，模式如下：

 选择器{款式;} </code></pre><p>
 在 {} 之前的局部就是“选择器”，“选择器”指明了 {} 中的“款式”的作用对象，也就是“款式”作用于网页中的哪些元素。
根底选择器

标签选择器（抉择标签名）：一个残缺的 HTML 页面是有很多不同的标签组成，而 标签选择器，则是决定哪些标签，采纳相应的 CSS 款式；

如：
p{
color:#900;
font-size:12px;
background:#090;
}

ID 选择器（# 号 +ID 名）：ID 选择器能够为标有特定 ID 的 HTML 元素指定特定的款式。依据元素 ID 来抉择元素，具备唯一性，这意味着同一 id 在同一文档页面中只能呈现一次；

如：
#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 文件的体积。
档次选择器

子选择器 (元素之间用 > 宰割)：子选择器（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；

构造伪类选择器

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 个元素.

否定伪类选择器

元素名：not（n）除了某个元素，其它元素增加款式
伪元素选择器：
所有伪元素选择器都必须放在呈现该伪元素的选择器的最初面，也就是说伪元素选择器不能跟任何派生选择器；

: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;}