css 組合、分組、嵌套選擇器

 

 1 .objectsTab.active{}    /*Tab和.之間沒有空格*/
 2 <element class="objectsTab active">
 3 
 4 .objectsTab .active{}  /*Tab和.之間有空格,後代class*/
 5 <element class="objectsTab">
 6   …
 7     <element class="active">
 8 
 9 .panel-danger > .panel-heading {} /*直接後代class*/
10 <element class="panel-danger">
11   <element class="panel-heading">
12 
13 .btn-danger.disabled:hover{}
14 <element class="btn-danger disabled" :hover>
15 
16 fieldset[disabled]{}
17 <fieldset disabled>
18 
19 .btn-default[disabled]{}
20 <element class="btn-default" disabled>
21 
22 .active p{}
23 <element class="active">
24   …
25     <p>
26 
27 div p{}/*後代選取器*/
28 <div>
29   …
30     <p>
31 
32 div+p{} /*相鄰兄弟選擇器*/
33 <div>
34 <p>
35 
36 div~.p{}/*後續兄弟選擇器器*/
37 <div>
38 <element class="p">
39 ⋮
40 <element class="p">
41 
42 h1 {
43     color:green;
44 }
45 h2 {
46     color:green;
47 }
48 p {
49     color:green;
50 }
51 h1,h2,p {
52     color:green;
53 }

example+

 總結：以上都是element/class/id op element/class/id ，element是標籤，表示爲name，class是css類，表示爲.name，id是標籤id，表示爲#name

a op b :

‘ ’ 空格，後代選取器,

'>' 大於號，子元素選擇器

‘+’ 加號，子元素選擇器

‘~' 破折號，普通兄弟選擇器

',' 逗號，分組選擇器

[] 中括號，屬性選擇器

屬性和值選擇器：CSS 屬性 選擇器

[a=b] [a~=b] [a|b]

 

.class    .intro    選擇全部class="intro"的元素    1
#id    #firstname    選擇全部id="firstname"的元素    1
*    *    選擇全部元素    2
element    p    選擇全部<p>元素    1
element,element    div,p    選擇全部<div>元素和<p>元素    1
element element    div p    選擇<div>元素內的全部<p>元素    1
element>element    div>p    選擇全部父級是 <div> 元素的 <p> 元素    2
element+element    div+p    選擇全部緊接着<div>元素以後的<p>元素    2
[attribute]    [target]    選擇全部帶有target屬性元素    2
[attribute=value]    [target=-blank]    選擇全部使用target="-blank"的元素    2
[attribute~=value]    [title~=flower]    選擇標題屬性包含單詞"flower"的全部元素    2
[attribute|=language]    [lang|=en]    選擇一個lang屬性的起始值="EN"的全部元素    2
:link    a:link    選擇全部未訪問連接    1
:visited    a:visited    選擇全部訪問過的連接    1
:active    a:active    選擇活動連接    1
:hover    a:hover    選擇鼠標在連接上面時    1
:focus    input:focus    選擇具備焦點的輸入元素    2
:first-letter    p:first-letter    選擇每個<P>元素的第一個字母    1
:first-line    p:first-line    選擇每個<P>元素的第一行    1
:first-child    p:first-child    指定只有當<p>元素是其父級的第一個子級的樣式。    2
:before    p:before    在每一個<p>元素以前插入內容    2
:after    p:after    在每一個<p>元素以後插入內容    2
:lang(language)    p:lang(it)    選擇一個lang屬性的起始值="it"的全部<p>元素    2
element1~element2    p~ul    選擇p元素以後的每個ul元素    3
[attribute^=value]    a[src^="https"]    選擇每個src屬性的值以"https"開頭的元素    3
[attribute$=value]    a[src$=".pdf"]    選擇每個src屬性的值以".pdf"結尾的元素    3
[attribute*=value]    a[src*="runoob"]    選擇每個src屬性的值包含子字符串"runoob"的元素    3
:first-of-type    p:first-of-type    選擇每一個p元素是其父級的第一個p元素    3
:last-of-type    p:last-of-type    選擇每一個p元素是其父級的最後一個p元素    3
:only-of-type    p:only-of-type    選擇每一個p元素是其父級的惟一p元素    3
:only-child    p:only-child    選擇每一個p元素是其父級的惟一子元素    3
:nth-child(n)    p:nth-child(2)    選擇每一個p元素是其父級的第二個子元素    3
:nth-last-child(n)    p:nth-last-child(2)    選擇每一個p元素的是其父級的第二個子元素，從最後一個子項計數    3
:nth-of-type(n)    p:nth-of-type(2)    選擇每一個p元素是其父級的第二個p元素    3
:nth-last-of-type(n)    p:nth-last-of-type(2)    選擇每一個p元素的是其父級的第二個p元素，從最後一個子項計數    3
:last-child    p:last-child    選擇每一個p元素是其父級的最後一個子級。    3
:root    :root    選擇文檔的根元素    3
:empty    p:empty    選擇每一個沒有任何子級的p元素（包括文本節點）    3
:target    #news:target    選擇當前活動的#news元素（包含該錨名稱的點擊的URL）    3
:enabled    input:enabled    選擇每個已啓用的輸入元素    3
:disabled    input:disabled    選擇每個禁用的輸入元素    3
:checked    input:checked    選擇每一個選中的輸入元素    3
:not(selector)    :not(p)    選擇每一個並不是p元素的元素    3
::selection    ::selection    匹配元素中被用戶選中或處於高亮狀態的部分    3
:out-of-range    :out-of-range    匹配值在指定區間以外的input元素    3
:in-range    :in-range    匹配值在指定區間以內的input元素    3
:read-write    :read-write    用於匹配可讀及可寫的元素    3
:read-only    :read-only    用於匹配設置 "readonly"（只讀） 屬性的元素    3
:optional    :optional    用於匹配可選的輸入元素    3
:required    :required    用於匹配設置了 "required" 屬性的元素    3
:valid    :valid    用於匹配輸入值爲合法的元素    3
:invalid    :invalid    用於匹配輸入值爲非法的元素    3

CSS 選擇器

 

.person-data .btn.chat {
    position: absolute;
    z-index: 6;
    margin: 0;
    background:#19bb9b;
    border-radius:10px;
    width:72px;
    height:28px;
    top: 502px;
    left: 172px;
}
/*這裏不能寫.person-data .send 不然.send會是.person-data的相對位置,同時.send的標籤會不跟隨父標籤的相對位置*/
.btn.chat .send {
    display: block;
    position: relative;
    z-index: 6;
    width: 17px;
    height: 15px;
    margin: 7px 27px 6px 28px;
}

 

 <a class="btn chat" onclick=""><a class="send"></a></a> 　　沒效果

 <div class="btn chat" onclick=""><a class="send"></a></div>    有效果

 

 

選擇器	示例	示例說明	CSS
.class	.intro	選擇全部class="intro"的元素	1
#id	#firstname	選擇全部id="firstname"的元素	1
*	*	選擇全部元素	2
element	p	選擇全部<p>元素	1
element,element	div,p	選擇全部<div>元素和<p>元素	1
element element	div p	選擇<div>元素內的全部<p>元素	1
element>element	div>p	選擇全部父級是 <div> 元素的 <p> 元素	2
element+element	div+p	選擇全部緊接着<div>元素以後的<p>元素	2
[attribute]	[target]	選擇全部帶有target屬性元素	2
[attribute=value]	[target=-blank]	選擇全部使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	選擇標題屬性包含單詞"flower"的全部元素	2
[attribute|=language]	[lang|=en]	選擇一個lang屬性的起始值="EN"的全部元素	2
:link	a:link	選擇全部未訪問連接	1
:visited	a:visited	選擇全部訪問過的連接	1
:active	a:active	選擇活動連接	1
:hover	a:hover	選擇鼠標在連接上面時	1
:focus	input:focus	選擇具備焦點的輸入元素	2
:first-letter	p:first-letter	選擇每個<P>元素的第一個字母	1
:first-line	p:first-line	選擇每個<P>元素的第一行	1
:first-child	p:first-child	指定只有當<p>元素是其父級的第一個子級的樣式。	2
:before	p:before	在每一個<p>元素以前插入內容	2
:after	p:after	在每一個<p>元素以後插入內容	2
:lang(language)	p:lang(it)	選擇一個lang屬性的起始值="it"的全部<p>元素	2
element1~element2	p~ul	選擇p元素以後的每個ul元素	3
[attribute^=value]	a[src^="https"]	選擇每個src屬性的值以"https"開頭的元素	3
[attribute$=value]	a[src$=".pdf"]	選擇每個src屬性的值以".pdf"結尾的元素	3
[attribute*=value]	a[src*="runoob"]	選擇每個src屬性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	選擇每一個p元素是其父級的第一個p元素	3
:last-of-type	p:last-of-type	選擇每一個p元素是其父級的最後一個p元素	3
:only-of-type	p:only-of-type	選擇每一個p元素是其父級的惟一p元素	3
:only-child	p:only-child	選擇每一個p元素是其父級的惟一子元素	3
:nth-child(n)	p:nth-child(2)	選擇每一個p元素是其父級的第二個子元素	3
:nth-last-child(n)	p:nth-last-child(2)	選擇每一個p元素的是其父級的第二個子元素，從最後一個子項計數	3
:nth-of-type(n)	p:nth-of-type(2)	選擇每一個p元素是其父級的第二個p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇每一個p元素的是其父級的第二個p元素，從最後一個子項計數	3
:last-child	p:last-child	選擇每一個p元素是其父級的最後一個子級。	3
:root	:root	選擇文檔的根元素	3
:empty	p:empty	選擇每一個沒有任何子級的p元素（包括文本節點）	3
:target	#news:target	選擇當前活動的#news元素（包含該錨名稱的點擊的URL）	3
:enabled	input:enabled	選擇每個已啓用的輸入元素	3
:disabled	input:disabled	選擇每個禁用的輸入元素	3
:checked	input:checked	選擇每一個選中的輸入元素	3
:not(selector)	:not(p)	選擇每一個並不是p元素的元素	3
::selection	::selection	匹配元素中被用戶選中或處於高亮狀態的部分	3
:out-of-range	:out-of-range	匹配值在指定區間以外的input元素	3
:in-range	:in-range	匹配值在指定區間以內的input元素	3
:read-write	:read-write	用於匹配可讀及可寫的元素	3
:read-only	:read-only	用於匹配設置 "readonly"（只讀） 屬性的元素	3
:optional	:optional	用於匹配可選的輸入元素	3
:required	:required	用於匹配設置了 "required" 屬性的元素	3
:valid	:valid	用於匹配輸入值爲合法的元素	3
:invalid	:invalid	用於匹配輸入值爲非法的元素	3