Css3 选择器
brief introduction of css3（CSS3 简短的介绍）
1. upgrade version（升级的版本）
css3 是 css2 的升级版本，语法格式都差不多，css3 最重要的突破是在 css2 的基层上实现动画了，主要配合 js 的事件来操作动画效率最高，当然除了实现动画还有很多其它功能
2. css3`s compatible history（CSS3兼容性的历史）
compatible 兼容性的意思
prefix 是前缀的意思
| prefix | browser |
| -webkit | chrome 和 safari |
| -moz | firfox |
| -ms | IE |
| -o | opera |
div{
-webkit-border-radius:50%;
-ms-border-radius:50%;
-moz-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}text-fill-color 属性只有 webkit 内核浏览器能做到，前缀 -webkit 肯定是不能去掉的
div{
-webkit-text-fill-color:;
}3. 参考手册（reference manual website）
http://css.doyoe.com
reference 参考的意思
manual 手册的意思
4. 权威的网站（Authoritative inquiry website ）
http://www.caniuse.com
Authoritative 权威的意思
inquiry 查找的意思
一、关系型选择器（Relationship selectors）
关系型选择器的模式，不是选择器类型是一个模式
什么是选择器的模式?
E F 是 css2 的父子选择器 ( div span{} )，不叫选择器的类型，只是一个模式
E > F 直接子元素选择器，也是一个模式，这个其实是 css3 的，只不过兼容性比较好
E + F
1. div 下的第一个兄弟元素节点
2. 并且这个兄弟必须是 p 元素
<style>
div + p{
background-color: orangered;
}
</style>
<div>div</div>
<p>p喵</p>
<p>p</p>
<p>p</p>条件也可以是 class
div + .demo{
background-color: orangered;
}
div + span.demo{
color:yellow;
} E ~ F
1. div 元素下的所有兄弟元素节点
2. 并且必须是 p 元素
<style>
div ~ p{
color:#fff;
background-color: red;
}
</style>
<div>div</div>
<span>span</span>
<p>p喵</p>
<p>p喵</p>
<p>p喵</p>
<em>
<p>兄弟元素节点必须在同级下</p>
</em>二、属性选择器（Attribute selectors）
E[attr ~= "val"] css2 提供的
E[attr |= "val"] css2 提供的
E[attr ^= "val"] 下面这三个是css3新增的，基本上是按照正则的规则
E[attr $= "val"]
E[attr *= "val"]
E[attr = "val"]
<style>
div[data] {
background-color: yellow;
}
div[data="a"] {
color: red;
}
</style>
<div class="demo" data="a">data="a"</div>
<div class="demo" data="b">data="b"</div>E[attr ~= "val"]
1. 属性名是 data
2. 属性值只有一个a，或者a开头后面被空格隔开，或者a左右被空格隔开
<style>
div[data~="a"] {
background-color: yellow;
}
</style>
<div data="a">1瞄</div>
<div data="b a c">2瞄</div>
<div data="a c">3瞄</div>
<div data="aa c">4</div>属性名换成 class 就更加好理解了
<style>
div[class~="a"] {
background-color: yellow;
}
</style>
<div class="a">1瞄</div>
<div class="b a c">2瞄</div>
<div class="a c">3瞄</div>
<div class="aa c">4</div>E[attr |= "val"]
以a开头，或者a开头后面加一个杠 -
<style>
div[class |="a"] {
background-color: red;
}
</style>
<div class="a">1喵</div>
<div class="a-test">2喵</div>
<div class="b-test">3</div>下面这三个是css3新增的，基本上是按照正则的规则
E[attr ^= "val"]
^ 正则中的意思，以什么什么开头的， [^] 放到方括号是非的意思
以"a"开头的
<style>
div[class ^="a"] {
background-color: yellow;
}
</style>
<div class="a">1瞄</div>
<div class="a-test">2瞄</div>
<div class="b-test">3</div>以"t"结尾的
<style>
div[class $="t"] {
background-color: yellow;
}
</style>
<div class="a">1</div>
<div class="a-test">2瞄</div>
<div class="b-test">3瞄</div>E[attr $= "val"]
$ 正则中的意思是以什么什么结尾
以 st 结尾的
<style>
div[class $="st"] {
background-color: yellow;
}
</style>
<div class="a">1</div>
<div class="a-test">2瞄</div>
<div class="b-test">3瞄</div>属性名写全，以 a-test 结尾的
<style>
div[class $="a-test"] {
background: yellow;
}
</style>
<div class="a">1</div>
<div class="a-test">2瞄</div>
<div class="b-test">3</div>E[attr *= "val"]
只要字符串里面有字母 t 就可以，不管位置在哪都无所谓。实测空格都可以
<style>
div[class *="t"] {
background-color: yellow;
}
</style>
<div class="a">1</div>
<div class="a-test">2瞄</div>
<div class="b-test">3瞄</div>三、伪元素选择符 Pseudo-Element Selectors（Pseudo 假装的意思）
E::placeholder
E::selection
这两个前面写一个冒号写两个冒号都可以
:befroe
:after
但是这两个必须写两个冒号，不能写一个冒号
::placeholder
::selection
E::placeholder
html5里面 input 标签有一个行间属性 placeholder，在部分移动端浏览器不是那么特别兼容，但不考虑特别多是可以用的
::placeholder 能改变 input 框的字体颜色，默认是灰色的，我们设置的是默认颜色
<style>
/* 注意，在使用的时候，在双冒号后面写兼容的前缀。在IE、webkit浏览器兼容前缀有input */
input::-webkit-input-placeholder {
color: #ff8c8c;
}
input::-ms-input-placeholder {
color: #ff8c8c;
}
input::-moz-placeholder {
color: #ff8c8c;
}
input::placeholder {
color: #ff8c8c;
}
</style>
<input type="text" placeholder="请输入用户名">E::selection
字体选中后的样式，它只能设置 1.颜色、2.背景、3.文字阴影，这三个属性（兼容性非常好）
<style>
p:nth-of-type(1)::selection {
color: #fff;
background-color: #ff8c8c;
text-shadow: 3px 5px 2px #000;
}
p:nth-of-type(2)::selection {
color: #fff;
background-color: #008c8c;
}
p:nth-of-type(3) {
color: #fff;
background-color: #008c8c;
}
span::selection {
color: yellow;
background-color: #008c8c;
}
</style>
<p>
文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会
</p>
<p>文字是人类用符号记录表达信息以传之久远的方式和工具。</p>
<p>文字是人类<span>老</span>用符号记录<span>邓</span>表达信息以传<span>头</span>之久远的方式和工具。</p>四、伪类选择器 Pseudo-Classes Selectors
伪类选择器是被选中元素的一种状态，重点是被选中的元素的一种状态
第一部分
E:not(s)
E:root E有点无厘头
E:target
第二部分
下面 5 种都考虑其它元素的影响，所以并不常用
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:only-child 只有一个子元素的前提下才会会被选中
E:nth-child(n) 一个公式选择，按照公式批量选
E:nth-last-child(n) 与nth-child相反，导致计数
这 5 种不考虑其它元素的影响，所以是常用的
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n) 重点
E:nth-of-last-type(n) 取反
第三部分
E:empty 元素必须是空的
E:checked 元素被选中状态
E:enabled
E:disabled
E:read-only
E:read-write 可读可写正常的状态
1、第一部分
E:not(s)
E:root E有点无厘头
E:target
E:not
:not（nots加s也可以）用法和 jQuery里的 .not() 方法如出一辙
选中前两个 demo 元素，
可以通过 div.demo 并列选择器选择，也可以通过 div[class="demo"] 属性选择器
这里用 :not 选择不是 .test 元素的，把前两个选中
<style>
div:not(.test) {
background-color: yellow;
}
</style>
<div class="demo">1喵</div>
<div class="demo">2喵</div>
<div class="test">3</div>选不是 .demo 元素的，把最后一个 div 选中
<style>
div:not(.demo) {
background-color: yellow;
}
</style>
<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3喵</div>参数换成属性选择器，选择不是 class="text" 的，选中前两个的
<style>
div:not([class="test"]) {
background-color: yellow;
}
</style>
<div class="demo">1喵</div>
<div class="demo">2喵</div>
<div class="test">3</div>想选中第四个 div，就是要选中没有 class 属性的 div，也就是除了有 class 的全部被选中
<style>
div:not([class]) {
background-color: yellow;
}
</style>
<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3</div>
<div>4瞄</div>如果选中有 class 的 div，不用 not 直接用属性选就完事了
<style>
div[class] {
background-color: #008c8c;
}
</style>
<div class="demo">1瞄</div>
<div class="demo">2瞄</div>
<div class="test">3瞄</div>
<div>4</div>:not 的应用场景
移动端的列表页面的时候，不是最后一个 li 都加下边的线。就是除了最后一个 li 以外，其它的都加下划线
<style>
ul {
padding: 0;
width: 200px;
border: 1px solid #ccc;
list-style: none;
}
li {
height: 32px;
line-height: 32px;
margin: 0 10px;
/* border-bottom: 1px solid #ccc; 这样加不好 */
}
li:not(:last-of-type) {
border-bottom: 1px solid #ccc;
}
</style>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>E:root
根标签选择器
在html页面里面 :root{} 和 html{} 是一样的，都是选中 html 标签，
但是区别是，在 html 文件里 :root 选中的是根标签 html 标签，在 xml 里 :root 选中的是 xml 标签
:root{
background-color: #008c8c;
}E:root E有点无厘头
div:root{} 不好用
html:root{} 可以用，但是没什么用，直接写 :root{} 也是根标签
E:target
target 的意思是目标，选中被选中的目标
什么是被选中的目标？
被选中的状态是被锚点所标记的
可以通过 js 手动设置锚点的值
location.hash = "Ruyic2";
哪个div元素的 id 被标记了，也就是变成了 location.hash 的值，这个 id 就变成 target 状态，
:target 的意思是被标记成锚点之后，言外之意就是 location.hash 的等于什么值之后
div:target{}
1. index.html#box2 url上的锚点是#box2
2. <div id="box2">box2</div> 这个div的id值变成 location.hash="box2" 的值了，这个 div 就变成了 target 的状态于是就被选中了
<style>
div:target {
background-color: yellow;
color: orangered;
}
</style>
<a href="#box1">点击选中box1</a>
<a href="#box2">点击选中box2</a>
<div id="box1">box1</div>
<div id="box2">box2</div>改变背景颜色
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<style>
:root,
body {
margin: 0;
height: 100%;
}
.btu-wrapper {
position: absolute;
width: 200px;
height: 20px;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -100px;
font-size: 12px;
background-color: rgba(255, 255, 255, .3);
text-align: center;
}
.btu-wrapper a {
display: inline-block;
height: 20px;
line-height: 20px;
text-align: center;
text-decoration: none;
color: #666;
margin: 0 5px;
}
div[id]:not(:target) {
display: none;
}
#red,
#green,
#blue {
width: 100%;
height: 100%;
}
#red {
background-color: #ff8c8c;
}
#green {
background-color: #008c8c;
}
#blue {
background-color: skyblue;
}
</style>
<title>改变背景颜色</title>
</head>
<body>
<div class="btu-wrapper">
<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">BlueSky</a>
</div>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<script>
location.hash = "red";
</script>
</body>
</html>html 先对 document 进行计算，计算完得出高度值，
然后 body 对 html 进行计算，把100%传递给 body，div 再拿 body 的高度
:root,
body{
height:100%;
}2、第二部分
下面五种都会考虑其它元素的影响，所以并不常用
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:only-child 只有一个子元素的前提下才会被选中
E:nth-child(n) 一个公式选择，按照公式批量选
E:nth-last-child(n) 与nth-child相反倒着计数
E:first-child
回忆这句话，伪元素选择器是"被选中元素"的一种状态
选择div下第一个p元素
1. p 标签是“被选择的元素”
2. p:first-child 选中的是“符合第一个p标签的状态”
<style>
p:first-child {
background-color: yellowgreen;
}
</style>
<div>
<p>1喵</p>
<p>2</p>
<p>3</p>
</div>选中 0 和 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-child</title>
<style>
p:first-child {
background-color: yellow;
}
</style>
</head>
<body>
<p>0瞄</p>
<div>
<p>1瞄</p>
<p>2</p>
<p>3</p>
</div>
</body>
</html>1. 必须是位置上的第一个
2. 必须是 p 元素，如果第一个是 span 元素会产生干扰
<style>
p:first-child {
background-color: yellowgreen;
}
</style>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
</div> E:last-child
选择最后一个元素，同级不能有兄弟元素，不是一个类型也不行，可能是因为div和p是兄弟元素（ 这个有问题 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:last-child</title>
<style>
div p:last-child {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3瞄</p>
</div>
<p>4</p>
</body>
</html>没有没选中最后一个p（ 这个有问题 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:last-child</title>
<style>
p:last-child {
background-color: yellow;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</body>
</html>E:only-child
span 是 div选独生子，所以被选中
<style>
span:only-child {
background-color: yellow;
}
</style>
<div>
<span>喵</span>
</div>span不是独生子了，所以不会选中
<style>
span:only-child {
background-color: red;
}
</style>
<div>
<span>不会被选中</span>
<em>em</em>
</div>div 现在是独生子，应该被选中，可是这里选不中，可能因为有兄弟元素body的干扰（ 这个也可能有问题 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div:only-child{
background-color: yellow;
}
</style>
<title>:only-child</title>
</head>
<body>
<div>
<span>span</span>
<em>em</em>
</div>
</body>
</html>E:nth-child(n)
Css是从 1 开始计数，n 是自然数从 0 开始计数，2n 选的是偶数
2 * 0 = 0 不选
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
<style>
.first p:nth-child(2n) {
background-color: yellow;
}
</style>
<div class="first">
<p>1</p>
<p>2 瞄</p>
<p>3</p>
<p>4瞄</p>
<p>5</p>
<p>6瞄</p>
</div>2n+1 选中的是基数
2 * 0 + 1 = 1
2 * 1 + 1 = 3
2 * 2 + 1 = 5
<style>
p:nth-child(2n+1) {
background-color: yellow;
}
</style>
<div>
<p>1瞄</p>
<p>2</p>
<p>3瞄</p>
<p>4</p>
<p>5瞄</p>
<p>6</p>
</div>还可以填单词
add 奇数 1 3 5
even 偶数 2 4 6
<style>
.third p:nth-child(odd) {
background-color: greenyellow;
}
.third p:nth-child(even) {
background-color: yellow;
}
</style>
<div class="third">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>填数字，
Css是从 1 开始计数，不能填负数
<style>
p:nth-child(1) {
background-color: #008c8c;
}
p:nth-child(4) {
background-color: #ff8c8c;
}
p:nth-child(6) {
background-color: yellow;
}
</style>
<div>
<p>1喵</p>
<p>2</p>
<p>3</p>
<p>4喵</p>
<p>5</p>
<p>6喵</p>
</div>位置必须是第一个，且必须是 p 元素，因为有 span 干扰没有选中
<style>
p:nth-child(1) {
background-color: red;
}
</style>
<div>
<span>span</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>位置是第三个元素，而且是p元素所以能够被选中
<style>
p:nth-child(3) {
background-color: yellow;
}
</style>
<div>
<span>1span</span>
<p>2</p>
<p>3喵</p>
<p>4</p>
<p>5</p>
</div>E:nth-last-child(n)
倒着计数与 nth-child 相反
<style>
p:nth-last-child(1) {
background-color: #008c8c;
}
p:nth-last-child(2) {
background-color: #ff8c8c;
}
</style>
<div>
<p>1</p>
<p>2</p>
<p>3喵</p>
<p>4喵</p>
</div>下面这五种不考虑其它元素的影响，所以是常用的
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n) 重点
E:nth-of-last-type(n) 取反
E:first-of-type
E:last-of-type
p元素类型的第一个和最后一个，排除span元素的干扰
<style>
p:first-of-type {
background-color: orangered;
}
p:last-of-type {
background-color: yellow;
}
</style>
<div>
<span>span</span>
<p>1喵orangered</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5喵yellow</p>
</div>外面有p元素依然可以选中
<style>
p:first-of-type {
background-color: orange;
}
p:last-of-type {
background-color: orangered;
}
</style>
<p>0喵orange</p>
<div>
<span>span</span>
<p>1喵orange</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5喵orangered</p>
</div>
<p>6喵orangered</p>E:only-of-type
必须只有一个 p 元素类型的儿子，原来的 only-child 是必须只有一个儿子，有其它类型的就不行了
<style>
p:only-of-type {
background-color: orangered;
}
</style>
<div>
<p>p喵</p>
<!-- 如果再有一个p元素就不行了 -->
<span>span</span>
</div>E:nth-of-type(n) [重点]
成哥：重点是 E:nth-of-type(n) 也是成哥同事最常用的
参数：
n+2 从第二个开始
n+3 从第三个开始
2n+1
odd
even
数字
找的是 p 元素同类型的
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
<style>
p:nth-of-type(2n) {
background-color: orangered;
}
</style>
<div>
<span>span</span>
<p>1</p>
<p>2瞄</p>
<p>3</p>
<p>4瞄</p>
<p>5</p>
<p>6瞄</p>
</div>E:nth-of-last-type(n)
倒着计树
3、第三部分
E:empty 元素必须是空的
E:checked 元素被选中状态
E:enabled
E:disabled
E:read-only
E:read-write 可读可写正常的状态
E:empty
:empty 就是这个元素里面什么都没有，有点像 hasChildNodes() 元素里面有没有节点，有节点就不行
这个元素必须是空的的状态下才叫 empty，有空格也不行，但是注释可以因为注释不算做内容
<style>
div:empty {
width: 100px;
height: 100px;
border: 1px solid #eee;
}
</style>
<div><span>123</span></div>
<div></div><!-- 瞄 -->
<div> </div>
<div><!-- 注释不算内容 --></div><!-- 瞄 -->
<div>234</div>E:checked
:checke 是元素被选中状态，input 选中状态下的，下一个 span 元素变化，这个做表单美化
<style>
input[type="checkbox"] {
display: none;
}
span {
display: block;
height: 30px;
width: 30px;
background-color: #ddd;
border-radius: 50%;
}
/* 选中状态下的下一个元素span */
input:checked + span {
background-color: orange;
}
</style>
<label>
<input type="checkbox">
<span></span>
</label>E:disabled 设置用不了的输入框样式
E:enabled 设置默认的正常的输入框样式
<style>
input:enabled {
border: 1px solid #008c8c;
}
input:disabled {
border: 1px solid red;
}
</style>
<input type="text" value="能用的">
<input type="text" disabled value="用不了"> E:read-only
<style>
input:read-only {
border: 1px solid #eee;
}
</style>
<input type="text" readonly value="只读">五、作业
1. Accordion List 手风琴效果
2. Tabs 选项卡
手风琴效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<style>
div {
position:absolute; top:50%;left:50%;margin-left:-100px;margin-top:-100px;
width: 200px;
height: 163;
}
span {
display: none;
background-color: antiquewhite;
height: 120px;
}
label {
display: block;
height: 40px;
line-height: 40px;
background-color: brown;
color: #fff;
border: none;
text-align: center;
border-bottom: 1px solid antiquewhite;
}
input[type="radio"] {
display: none;
}
input:checked + span {
display: block;
}
</style>
<title>Accordion List 手风琴效果</title>
</head>
<body>
<div>
<label for="demo1">Title</label>
<input type="radio" name="title" id="demo1">
<span>span</span>
<label for="demo2">Title</label>
<input type="radio" name="title" id="demo2">
<span>span</span>
<label for="demo3">Title</label>
<input type="radio" name="title" id="demo3">
<span>span</span>
</div>
</body>
</html>