CSS选择器
2016-05-24 本文已影响59人
柯良勇
CSS常见选择器的类别
- 有①通用选择器②标签选择器③id选择器④类选择器⑤属性选择器 ⑥分组选择器(多元素) ⑦派生选择器(后代)⑧子元素选择器 ⑨伪类选择器
选择器的优先级
- 针对性越强则其优先级就越高;内联样式>id选择器>伪类选择器>属性选择器>类选择器>元素选择器>通用选择器.
class 和 id 的使用场景
- class有普遍性一般在内部用来定义部分有共同特性的元素的样式；id是唯一的，一般用于外部划分区块。
使用CSS选择器时命名空间的划定
- 在html中，部分标签如p、li等使用频繁，如果没有划分区块划定命名空间，在选取时就会导致混乱，一个选择器可能会选取到所有的元素，我们就没办法针对部分元素修改其样式；划定命名空间后，就有针对性。
CSS选择器示例
#header{}
.header{}
.header .logo{}
.header.mobile{}
.header p, .header h3{}
#header .nav>li{}
#header a:hover{}
- #header 选择id为header的元素
- .header 选择class为header的元素
- .header .logo 选择header这个类下的属于logo这个类的元素
- .header.mobile 选择同时标记有header和mobile这两个类的元素
- .header p, .header h3 选择header这个类下的p元素和h3元素
- #header .nav>li 选择header这个id下的标记有nav类的第一代li元素
- #header a:hover 选择header这个id下的a元素，修改鼠标悬停在上面时的样式
常见伪类选择器
:hover 鼠标悬停时的样式；
:active鼠标按下保持的样式；
:focus在输入框选中时的样式；
E:first child 选择E元素，且该E元素是第一子元素；
E:first-of-type 选择E元素，且该E元素是同类标签的第一个。
:first-child和:first-of-type的区别
- E:first child 选择E元素，且该E元素是第一子元素，在一个父元素下有多个同类子元素的情况下可以用其选择第一个子元素；
- E:first-of-type 选择E元素，且该E元素是同类型标签的第一个；在一个区块内有多个同类型标签的情况下用来选择其中的第一个；
选择器及样式示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
.item1:first-of-type{
background: red;
}
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">111</div>
<div class="ct">
<p class="item1">222</p>
<div class="item1">333</div>
<div class="item1">444</div>
<div class="item2">
<div class="item1">555</div>
<div class="item1">666</div>
</div>
</div>
</body>
</html>
- 输出红色背景解析：111是body下两个div类型的第一个；222是标记ct类这个div下的p类型的第一个；333是标记ct类这个div下的div类型的第一个；555是标记item2类这个div下的div类型的第一个。
- 输出蓝色字体解析：111是body父元素下第一个div子元素；222是标记ct类这个div父元素下的第一个p子元素；555是标记item2类这个div父元素下第一个div子元素。
text-align: center的作用解析
- 作用在块级元素上，让块级元素里面的行内元素水平居中。
属性兼容性的查询
- 在caniuse.com输入属性名称查询
