CSS基础-选择器
概念
前文说，CSS是给HTML添加样式的， 那么要想两者之间产生作用，就需要用到选择器。
选择器标记在HTML标签上; 通过选择器，浏览器可以知道什么时候加载这些样式。
CSS 通过选择器组合一组样式，集体作用在某一段html代码上。
多种选择器
标签选择器
标签选择器，使用HTML的标签作为选择器。
作用域：引用页面上所有的同名标签， 标签选择区域大，通常用来初始化样式
举例
<style>
span {
background-color: rebeccapurple;
color: rgb(182, 56, 56)
}
</style>
<body>
<span >
我式这个div
</span>
<span >
我式这个div
</span>
<div>这个</div>
<div>那个</div>
</body>
id选择器
每个html标签都可以 有id属性，用来标记该标签的唯一性。
定义了id属性，就可以用id 作为一个选择器来用。
id选择器通常以#号开头。
举例
<!DOCTYPE html>
<html lang="en">
<head>
<!--匹配demoSpan ， 匹配上的才会选择，匹配不上的就不选择 -->
<style>
#demoSpan{
color: rgb(128, 0, 53);
}
</style>
</head>
<body>
<span >
我式这个div
</span>
<span id="demoSpan">
我式这个div
</span>
</body>
</html>
class 选择器
每个html都可以设置class属性，用来指定特定的样式。
利用class属性来指定样式的，定义为class选择器。
class 选择器 通常以 符号 . 开头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.colorRed{
color: red;
}
</style>
</head>
<body>
<span class="colorRed">
我是span，内容红色
</span>
</body>
</html>
复合选择器
| 选择器名称 | 示例 | 解释 |
|---|---|---|
| 后代选择器 | .box1 .sp | 选择类名为box的标签内部的class属性值为sp的标签,使用空格隔开 |
| 交集选择器 | li.sp | 选择既是li标签也属于 sp类的标签 |
| 并集选择器(也叫分组选择器) | ul,ol | 选择所有的ul和ol标签 |
| 复合选择器 | div.box li p.spec.item | 复合选择器可以式 id，class 后代选择器等的随组合从而形成的选择器 |
<!--后代选择器示例-->
<!--css 后代选择器， 只有box1自己的后代中叫 sp 才会显示红色-->
.box1 .sp {
color: red
}
<div class="box1">
<span class="sp">第一段文字</span>
</div>
<div class="box2">
<span class="s2">第二段文字</span>
</div>
<!--交集选择器 同时 拥有 box1 和 box2 的盒子才会高亮-->
.box1.box2 {
color: red
}
<div class="box1">
盒子1
</div>
<div class="box1 box2">
盒子2
</div>
<div class="box2">
盒子3
</div>
<!--并集选择器 box1 box2 颜色均会为红色-->
.box1,.box2 {
color: red
}
<div class="box1">
盒子1
</div>
<div class="box2">
盒子2
</div>
<div class="box3">
盒子3
</div>
元素关系选择器
| 名称 | 举例 | 意义 |
|---|---|---|
| 子选择器 | div>p | div的子标签， 只会匹配div标签的子（不含孙子等）元素中的所有P标签 |
| 相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 | p~span | p元素后的所有同层级span元素， （从IE7开始兼容） |
序号选择器
| 名称 | 意义 | 兼容性 |
|---|---|---|
| :first-child | 第一个子元素 | IE7 |
| :last-child | 最后一个子元素 | IE9 |
| :nth-child(3) | 第3个子元素 | IE9 |
| :nth-of-type(3) | 第三个某类型子元素,同种标签指定序号 | IE9 |
| :nth-last-child(3) | 倒数第三个子元素 | IE9 |
| :nth-last-of-type(3) | 倒数第三个摸个类型的子元素，同种标签指定元素 | IE9 |
<!--一段html代码-->
<div class="parentBox">
<div class="box">
<p>box1</p>
<p>box1</p>
</div>
<div class="box">
<p>box2</p>
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
<p>box3</p>
</div>
<div class="box">
<p>box4</p>
<p>box4</p>
</div>
<div class="box">
<p>box5</p>
<p>box5</p>
</div>
</div>
<!--模拟第一个div元素，背景称红色-->
<style>
.box:first-child {
background-color: red;
}
</style>
<!--模拟div元素，最后一个背景为绿色-->
<style>
.box:last-child {
background-color: green;
}
</style>
<!--模拟 nth-child指定 元素下标，如果指定的元素下表不是p标签，那么css也不会生效-->
<style>
div p:nth-child(4) {
background-color: red;
}
</style>
<div>
<p>第1个p标签</p>
<p>第2个p标签</p>
<div>第一个div子标签</div>
<p>第3个p标签</p>
<p>第4个p标签</p>
</div>
<!--模拟 nth-child 传参为基数的时候，css发挥作用。 nht-child 可以写成 an+b的形式，表示从b开始每a个选择一个-->
<!--2n+1 表示奇数 2n表示偶数-->
<style>
div p:nth-child(2n+1) {
background-color: red;
}
</style>
<div>
<p>第1个p标签</p>
<p>第2个p标签</p>
<div>第一个div子标签</div>
<p>第3个p标签</p>
<p>第4个p标签</p>
</div>
<!--模拟将选择同种标签指定子元素序号的子元素-->
<style>
div p:nth-of-type(2n) {
background-color: red;
}
</style>
<div>
<p>第1个p标签</p>
<p>第2个p标签</p>
<div>第一个div子标签</div>
<p>第3个p标签</p>
<p>第4个p标签</p>
</div>
属性选择器
| 举例 | 意义 |
|---|---|
| img[alt] | 选择有alt属性的img标签 |
| img[alt=”房子”] | 选择alt属性是房子的img标签 |
| img[alt^=”小区”] | 选择alt属性以小区开头的img标签 |
| img[alt$=”花园”] | 选择alt属性以花园结尾的img标签 |
| img[alt*=“小径”] | 选择alt属性中包含有小径字样的img标签 |
| img[alt~=”马赛克”] | 选择有alt属性中有空格隔开的马赛克字样的img标签 |
| img[alt | =”作家”] |
伪类
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，例如： 超级链接有四个特殊状态
| 伪类 | 意义 |
|---|---|
| a:link | 没有被访问的超级链接 |
| a:visited | 已经被访问过的超级链接 |
| a:hover | 正被鼠标悬停的超级链接 |
| a:active | 正被激活的超级链接（按下键但是没有松开） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
color: dodgerblue;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color:crimson;
}
</style>
</head>
<body>
<div>
<a href="http://www.taobao.com">淘宝</a>
</div>
<div>
<a href="http://www.alibaba.com">阿里巴巴</a>
</div>
</body>
</html>
CSS3新增伪类
| 伪类 | 意思 |
|---|---|
| :empty | 选择空标签 |
| :focos | 选择当前获得焦点的表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已经勾选的单选按钮或者复选框 |
| :root | 选择根元素， 即标签 |
<!--验证选取空标签示例-->
<style>
p {
height: 200px;
width: 200px;
border: 2px solid red;
}
p:empty {
background-color: green;
}
</style>
<p></p>
<p></p>
<p>费控标签</p>
<p></p>
<!--验证获得焦点后 背景颜色为黑色-->
<style>
input:focus {
background-color: black;
}
</style>
<input></input>
<input></input>
<input></input>
<input></input>
<!--验证添加disabled enabled伪类-->
<!--默认情况下， 为input标签为 enabled-->
<style>
input:disabled {
background-color: blue;
}
input:enabled {
background-color: green;
}
</style>
<input></input>
<input></input>
<input disabled></input>
<input></input>
<!--验证 checked,已经单选的或者复选框,如果选中，相邻兄弟span标签的文字变成红色-->
<style>
input:checked+span{
color: red;
}
</style>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<!--root选择器 即表示根节点开始的所有元素-->
<style>
:root {
font-size: 30px;
}
</style>
伪元素
表示虚拟动态创建的元素, 伪元素用双冒号表示:: , IE8可以兼容到单冒号
请关于一下啦^_^
微信公众号
