CSS3 常用选择器

复杂选择器
1.兄弟选择器（仅指next就只是说下一个）
兄弟：同一级别。
1.相邻兄弟选择器：next   紧紧跟在指定选择器后面的选择器
（必须挨着）。仅选择下一个元素。(类似jQuery next()方法)
通过“+”结合   selector1+selector2(同级  &  相邻)
div+p{}
2.通用兄弟选择器  next_all  后面所有，不用紧跟着 (类似jQuery nextALL())
由“~” selector1~selector2   ~~~~
div~p{}          div之后全部p元素
---------------------------------------------
2.属性选择器
语法：[属性相关内容]
[id]:具备ID属性的元素
p[id]:有ID属性的p元素
p[id][class]:既有id又有class的p元素
p[id="p1"]:
p[name="qqq"]:
input[value="sssbbb"]:

p[class~="value"]:   value 会出现在p的class中 ，完整独立。
p[class~="clear"]    <p class="clear left"></p>就可以。
<p class="myclear left"></p>这句不行，不独立


p[class^="u"]匹配class属性值以p开始的p标记
"^"以。。。作为开始  class="userclass"

p[class*="u"]  class属性值中包含u就行


p[class$="u"]  class属性值以u结尾的p标记


--------------------------------------
常用模式
input[type="text"][这里可以写另一个匹配条件]{  }






--------------------------------------------------------
2.伪类选择器
1.目标伪类(锚点激活之后的动作)
作用：突出显示活动HTML锚点（name=""，id=""）元素
语法：":target"
div:target{   }
<a href="#锚点">跳转</a>


2.元素状态伪类
多用于表单元素，<form></form>
:enabled:匹配已经启用元素
:disable:禁用元素
:checked:被选中元素(只适用于checbox与radio  单选，复选框)

<input type="text" disabled/>禁用
input:disabled{   ??    }


下课休息--------------------------------------
3.结构伪类（！important）
1.:first-child:他爸的长子  首行
table td:first-child{}    tr的第一个td
2.:last-child{}:他爸的最小儿子页脚
3.:empty {}       没子元素的元素（只是文本也是子元素 空格也算子


元素）
  ----------------------DOM树-----------------
4.only-child:他爸的独生子（只有一个儿子）
 
----------------------------------
否定伪类。。。常用
作用：{非}指定选择器元素
:not(selector){}不选,不要。。。。排除法  
input:not([type=text])  或者 input:not(p){        }
input:not([type=text]):not([type=password]){}中间不加空格和逗号




4.伪元素选择器（特殊排版可能会用）
行内元素不行。块级元素，行内块，float是可以的。position可以把
元素变成块级元素

匹配文本内容，不是元素

1.:first-letter{}  某内容首字符
2.:fir。st-line{}      首行
3.    ::selection{}      //用户选中的字，两个冒号
p::selection{  color:red; }
 
------------------------


结构伪类补充:(不怎么使用)
常用的
:nth-child(n)： {attribute}
匹配父元素中的第n个子元素E


:nth-last-child(n)
匹配父元素中的倒数第n个结构子元素E

:nth-of-type(n)  这一类不常用,也不好用所以不看了


------------------

还有一个内容追加,和CSS3计数器,笔记之后做