CSS

CSS 格式

basic:
ex:
h1, h2 {
color: gray;
background: white;
}

class:
class can apply to many elements
ex:
*.warning or .warning
for each element with warning class

ex:
p.warning
for p element with warning class

the element can has more than one class
ex: <p class = "urgent warning">

串聯:
ex:
.warning.urgent
for the element with warning and urgent class
( There are problems for IE version < 7 using 串聯 )

id
use #
an id can only appear once in one HTML element
id has higher priority than class
class and id會識別大小寫

ex: *#cat = #cat
id cat applies to all elements

attribute selector:
( IE version < 7 does not support)
ex:
h1[class]
apply to <h1 class="xxx">

ex:
cat[eat]
apply to <cat eat="xxx">

ex: *[eat]
apply to all elements with eat="xxx"

串聯:
ex:
a[href][title]
apply to a element with href="xxx" and title = "xxx"

ex:
cat[eat="1"]
apply to cat with eat element = "1"

span.cat = span[class~="cat"]
apply to span element with class = "cat"

descendent selector(後代選取項)
ex:
h1 em {
color: gray;
}
apply to em element belongs to h1 element

ex:
ul ol ul em
apply to
< ul >
< ol >
< ul >
< em >

for後代選取項，選取項之間的層極可以無限大
ex: ul em
apply to
< ul >
< ol >
< ul >
< em >

選取子代組件
ex:
h1 > strong
apply only to
< h1 > < strong >
not < h1 > < em > < strong >

ex: table.sun td > p
apply to 身為td子代的p，而td是table的後代，且table的class ="sun"