css选择器
一、css简介
在学习css的前提，需要知道css的全称是什么？:Cascading Style Sheets。
css指的是折叠样式表，其组成结构为：样式表->规则->选择器和声明块->声明->css属性和属性值组成。
浏览器读取编译css的顺序是由右往左，因为这样子，右边首先定位到具体的元素或者属性，这样子可以加快定位的速度。
css注释，作用和HTML类似，只不过必须编写在style标签中，或者css文件
选择器：通过选择器可以选择页面中指定的元素并且将声明快中的样式应用到选择器对应的元素上。
声明块：声明块紧跟在选择器右边，使用一对{}括起来
声明块实际上是一组一组的明值对结构
在一个声明块中可以写多个声明之间使用；隔开
声明的样式名和样式值使用：来连接
二、css选择器
（1）基本选择器
id # #list{}（id选择器，通过id属性值唯一的元素（一个页面中不能出现两个id一样的值））
类 . .list{}（class元素跟id类似，只不过class属性可以重复，拥有相同的class属性的值，我们说它是一组元素，可以同时为一个元素设置多个class的属性值，多个值之间使用空格隔开）
元素 元素名 body{}
后代 空格 #wrap li 两层之间用空格分开 .list li{}
分组选择器（并集选择器） ，（结合符）h1,h2,h3{} 其中逗号我们称之为结合符，（通过选择器分组可以同时选中多个选择器对应的元素，语法：选择器1，选择器2，选择器N）
通配符选择器 *{margin: 0;padding: 0;}
复合选择器交集选择器（可以选中同时满足多个选择器的元素，语法：选择器1选择器2选择器N）是连着，没有空格之类的，有空格的是后代
优先级不是选择器的，是css的声明的属性的
三：子元素选择器
#wrap>li(直接后代选择器)
跟后代选择器的区别就是，后代选择器针对底下所有层的选择生效，而直接后代只是针对第一级子元素生效。
如下代码所示1-1里面的li没有作用到（如果声明的css属性是具有继承作用的话，就可能会出现有作用，所以需要知道是否继承和初始值是什么？）。后代的话，就全部作用到。
<div id='wrap'>
<li>1-1<li></li></li>
<li>2-1</li>
</div>
四、兄弟选择器
（1）相邻兄弟选择器（+）
就是紧跟着的后面的那个选择器
比如#warp #first+.inner
紧跟着后面的那个选择器，class为inner的，才执行该声明块对应的属性值
结果是3-1才是变色，才生效。
1 <div id='wrap'> 2 <div id="second">1-1</div> 3 <div id="first">2-1</div> 4 <div class="inner">3-1</div> 5 <div class="inner">4-1</4-1></div> 6 </div>
（2）通用兄弟选择器(~)
叫做通用兄弟选择器
#warp #first ~ .inner{} 代表只要是跟在后面的class样式为inner的，都可以生效，
代码如上面代码，3-1和4-1都生效。
五、属性选择器
(1)存在和值属性选择器
[attr]:该选择器选择包attr属性的所有元素，不论attr的值如何。（div[name]）
[attr=val]:该选择器选择attr属性被赋值为val的元素。
[attr~=val]:表示带有以attr命名的属性的元素，并且该元素以空格分隔的值的列表
（2）子串值属性选择器
[attr|=val] : 选择attr属性的值是val（包括val）或val-开头的元素
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素
[attr*=val] : 选择attr属性的值种包含字符串val的元素
（3）title属性
title属性，这个属性可以给任何标签指定，当鼠标移入到元素上时，元素中的title属性的值将会作为文字提示显示
针对第一个属性选择器进行代码展示，结果就是只有rain这个才有边界：
div[name="rain"]{ border: 1px solid; } </style> <div id="warp"> <div name="rainbow">rainbow</div> <div name="rain">rain</div> <div name="bow">bow</div> <div name="rainbowCai">rainbowCai</div> </div>
六、伪类与伪元素选择器
（链接伪类）（注意：:link,:visited,:target是作用于链接元素的）
:link 表示作为超链接，并指向一个未访问的地址的所有瞄（还没访问过的，通过浏览器历史记录来判断有没有访问过）（意思就是只有a链接才可以调用:link去实现对应的操作）
:visited 表示作为超链接，并指向一个已访问的地址的所有瞄（意思就是点击a链接后会调用该功能的操作）
:target 代表一个特殊的元素，它的id是URL的片段标识符（uri代表链接的#号后面的东西，这个可以完成点击该a标签，效果会作用于id为uri的dom）
对应的三个的伪类用法如下代码所示：
a:link{ color: pink; } a:visited{ color: blue; } div{ font:50px/200px; width: 200px; height: 200px; background: pink; text-align: center; display: none; } a{ text-decoration: none; } :target{ display: block; } </style> <div> <a href="#">点我</a></div> <a href="#div1">div1</a> <a href="#div2">div1</a> <a href="#div3">div1</a> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div>
动态伪类 :hover :active 基本上可以作用于所有的元素，也就是不管是div还是a都是可以的。
:hover 表示悬浮到元素上有作用，产生效果
:active 表示匹配被用户激活的元素（点击按住的时候产生效果）
由于a标签的:link和:visited可以覆盖了所有的a标签的状态，所以当:link，:visited，:hover和active
一块使用时，:link和:visited不能放在最后，要不然是不起作用的，这个是有顺序的，一般是link、visited、hover、active（遵循LVha顺序规则）
因为其实执行顺序也是按照从上往下执行的，所以有冲突的时候就需要按照顺序执行。否则就不成效。
隐私与:visited选择器
只有下列的属性才能被应用到已访问链接：
color
background-color
border-color
a:link{ font-size: 12px; } a:visited{ font-size: 120px; } a:hover{ font-size: 48px; } a:active{ font-size: 84px; } .test:hover{ font-size: 84px; color: pink; } </style> <a href="javascript:alert('清除成功')">清除成功</a> <div class="test"> 这是一个悬浮测试！</div>
3、表单相关伪类
:enable 匹配可编辑的表单
:disable 匹配被禁用的表单(需要在input里面操作禁用操作)
:checked 匹配被选中的表单
:focus 匹配获焦的表单
input:enabled{ background-color: pink; } input:disabled{ background-color: deeppink; } input:checked{ width: 20px; height: 20px; } </style> <input type="text" /> <input type="text" disabled="disabled" /> <input type="checkbox" /> <input type="text" />
自定义单选按钮
label包含的可以实现，点击文字就完成input生效：
label{ float: left; position: relative; width: 100px; height: 100px; border: 2px solid ; overflow: hidden; border-radius: 50%; } input{ position: absolute; left: -50px; top: -50px; } label > span{ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } input:checked + span{ background-color: #0000FF; } </style> <label> <input type="radio" name="rain"/> <span></span> </label> <label> <input type="radio" name="rain"/> <span></span> </label> <label> <input type="radio" name="rain"/> <span></span> </label>
效果图：
4、结构性伪类
index值从1开始计数
index可以为变量n（只能是n）
index可以为even odd
#wrap ele:nth-child（index） 表示匹配#wrap中第index的子元素，这个子元素必须是li
#wrap ele：nth-of-type（index） 表示匹配#wrap中第index的ele子元素（ele可以是任何元素）
除此之外 :nth-child和:nth-of-type 有一个很重要的区别！！！
:nth-of-type以元素为中心！！！！
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child(相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1)
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type(相对于:first-child:last-child 或者 nth-last-type(1)或者nth-of-type(1)))
:not
:empth(内容必须是空的，有空格都不行，有atter没关系)
/*就是最后一个不执行该操作,就是最后一个的没有border*/ div > a:not(:last-of-type){ border-right: 1px solid; } /*第一个div的背景颜色变为蓝色*/ div:empty{ background-color: #0000FF; } div{ height: 200px; } </style> </head> <body> <div > <div id="1"></div> <div id=""> second </div> <div id=""> third </div> </div>
表格隔列变色：
#data>tbody>tr>td:nth-child(odd){
background-color: #ccccff;
}
5、伪元素选择器
css3为了区分伪类和伪元素，伪元素采用双冒号写法,单冒号也是可以的。
常见伪元素——::first-letter（第一个字母）,::first-line（第一行）,::before,::after,::selection（鼠标选中产生的结果。）。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
