css3样式选择器{后面有思维结构图}

基本选择器
1.*{} 通配符选择器              表示：*{}
2.class选择器  class="名"    表示：.名{}
3.id选择器       id="id名"    表示：#id名{}
4.群组选择器              表示：名，名{}
1.各个选择器之间的权重：标签（001） class (0010) id (0100) 
2.当选择器的权重一致时，他会按顺序执行，后面的样式会覆盖前面的样式
3.!important最高的  ：可以提高权重/优先。
-----------------------------------------------------------------------------------------------------------
通配符
   ^     功能描述：匹配起始符
示例：span[class^=span]  表示选择以类名以“span”开头的所有span元素
   $     功能描述：匹配终止符
示例：a[href$=pdf]  表示选择以“pdf”结尾的href属性的所有a元素
   *     功能描述：匹配任意字符
示例：a[title*=site]  匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串
-----------------------------------------------------------------------------------------------------------
层次选择器
1.包含选择器（后代选择器）
标签  标签 ： 选择后面的标签匹配，且匹配的标签包含在前面的标签内
2.子选择器
标签>标签 ：选择后面的标签，且匹配的后面的标签是所匹配的前面的子元素
3.相邻兄弟选择器
 标签+标签 ：相邻着紧挨着的后一个元素 例：p:hover+a  
4.通用选择器
标签~标签 ：后面所有的元素  例：p：hover~a 
--------------------------------------------------------------------------------------------------------------
链接伪类选择器
a:link：未访问链接时的状态
a:visitteds：链接已经访问过的状态
a:hover：改变超链接鼠标移动上去的颜色
a:active:鼠标点击一瞬间的颜色【必须在hover之后使用】
注：【hover】可以用在p标签上 如果全要用到，顺序如下：link visitteds hover  active
-------------------------------------------------------------------------------------------------------------
伪对象选择器【伪元素选择器】
1.:after或者::after
语法：div:after{content:”文字”}  div:after{content:url();}
说明：与content属性一起使用，定义在对象后的内容。
2.:before或者::before
语法：div:before{content:”文字”} div:before{content:url();}
说明：与content属性一起使用，定义在对象前的内容。
3.:first-letter或者::first-letter
语法：div:first-letter
说明：定义对象内第一个字符的样式，注：该伪元素只能用于块元素
4.:first-line或者::first-line
语法：div:first-line
说明：定义对象内第一行的样式，注：该伪元素只能用于块元素
5.::selection
语法：div::selection
说明：选中之后的样式  只支持这background  color属性和color属性 0
------------------------------------------------------------------------------------------------------------
表单常用选择器
focus焦点  
语法 ： 选择器：focus{ outline: none; border: 1px solid green;}
作用：input框获取焦点之后的样式操作
outline轮廓
定义：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
作用：清除input框获取焦点之后的样式。
语法：outline：none
checked选中
定义：元素选中之后的样式操作
作用：美化单选框与复选框选中之后的样式
语法：选择器：checked{}
appearance清除
语法：appearance：none
作用：清除单选框、复选框、下单菜单的样式
注：浏览器不支持清除样式时， 可这样表示【-webkit-appearance：none】
------------------------------------------------------------------------------------------------------------
属性选择器
语法：[标签属性]{}    属性选择器无法识别 ： // .  这些带特殊符号的属性需要加""
1.E[attr]
希望选择有某个属性的元素，而不论属性值是什么  
例如：a[href]{color:red;}
2.E[attr=”value”]
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，
只选择有特定属性值的元素  
例如: a[href=”www.baidu.com”]{color:red;}
3.E[attr^=”value”]
指定了属性，并且指定了属性值，属性值是以value开头的 
例如：a[title^="text"] {color: red;}
4.E[attr$=”value”]
指定了属性，并且指定了属性值，属性值是以value结尾的 
 例如：a[title$="text"] {color: red;}
-----------------------------------------------------------------------------------------------------------
结构伪类选择器
1.：first-child{选择第一个元素}
2.：last-child{选择最后一个元素}
3.：nth-child（）{第几个元素 或者是odd奇数和even偶数}
4.：nth-last-child（）{选择某个元素的一个或多个特定的子元素，最后一个子元素开始算}
5.：first-of-type{选择一个上级元素下的第一个同类子元素}
6.：last-of-type{选择一个上级元素的最后一个同类子元素}
7.：nth-of-type（）选择指定的元素 只计算选择器指定的那个元素
8.：nth-last-of-type（）选择指定的元素，从元素的最后一个开始计算
9.：only-of-type  选择一个元素是它的上级元素的唯一 一个相同类型的子元素
10.：empty  选择的元素里面没有任何内容
11.：root      选择文档的根元素
12.：only-child  选择的元素是它的父元素的唯一 一个子元素；
---------------------------------------------------------------------------------------------------------------
状态伪类选择器
常用处：表单控件
1.disabled   禁用表单的样式
2.enabled   正常使用的表单的样式
3.checked   选中之后的样式
4.focus       获取焦点后的样式
------------------------------------------------------------------------------------------------------------
否定伪类选择器
 语法：属性:not()  
除了什么什么  可以让你定位不匹配该选择器的元素
------------------------------------------------------------------------------------------------------------
目标伪类选择器
  :target 
选择器可用于选取当前活动的目标元素。
定义：使用该选择器来对页面中的某个target元素
（该元素的id当做页面中的超链接来使用）指定样式，
该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

之后会继续添加补充 目前只学了这些 这是一个大致的css选择器思维结构图