什么是选择器:
每一条 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;}