2.2 CSS选择器
2017.09.13 - 灬无言 - 阅 1,4012.2.1 简单选择器
- 元素选择器
文档的元素就是最基本的选择器。
简单来说，就是HTML标签做选择器。
语法： 标签{声明;}
例：
html {
color:red;
}
p {
font-size:20px;
}
- 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
可指定单个元素，也可多个。通常类选择器还可以结合使用。
语法： .类选择器名 {声明} “.”+ 类选择器名
命名规则：字母或下划线开头，可以包含字母、下划线和数字。
例：
<head>
<style type=”text/css”>
.lizi {
color:red;
}
</style>
</head>
<body>
<div class=”lizi”>例子一</div>
<p class=”lizi”>例子二</p>
</body>
- ID选择器
ID选择器一个文档中只能使用一次。
语法： #ID选择器名 {声明} “#”+ ID选择器名
命名规则：字母或下划线开头，可以包含字母、下划线和数字。
例：
<head>
<style type=”text/css”>
#lizi1 {
color:red;
}
#lizi2 {
color:red;
}
</style>
</head>
<body>
<div id=”lizi1”>例子一</div>
<p id=”lizi2”>例子二</p>
</body>
- （锚）伪类
简单介绍一个，链接的类选择器，a:hover{声明;}。它的意思就是当鼠标移动到<a>标签上时，就会链接就是显示出声明的样式。
a:hover{
color:red;
font-size:100px;
}
2.2.2 复杂选择器
- 选择器分组（并集选择器）
多个简单选择器共用一个样式。
语法：选择器1，选择器2，…选择器N{共用声明} 选择器之间用逗号隔开。
例：
h1,h2,p,body {
color:red;
}
- 后代选择器
后代选择器可以选择作为某元素后代的元素。
语法：父元素 子元素 {声明} 父元素和子元素之间空格隔开。
例：
div h1 {
font-size:100px;
color:red;
}
2.2.3 其他选择器
- 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
语法：标签[属性] { 声明 } 最前面的标签可有可无。
例：
*[width] {color:red;}
p[bgcolor]{font-size:10px;}
- 子元素选择器
元素的子元素的属性。
语法：元素 > 子元素 {声明}
例：
p > strong {color:red;} 只有p元素的子元素中的strong才会改变样式。
- 相邻兄弟选择器
相邻兄弟选择器可以使 紧邻的两个元素（同级），拥有共同的父属性。
语法：元素A +元素B{声明} 完成之后呢，只为元素B添加了样式。
例：
p + h1 {color:red}
这些并不是全部，一般会常用选择器就可以了。
图文不够清楚？点击下方观看视频教程
扫描二维码关注“小小课堂网”
第一时间获取最新教程
