cssクラスセレクタ
2737 ワード
詳細
1.基本セレクタ
例:
2.マルチエレメントセレクタ
例:
3.属性セレクタ
例:
4.cssの偽クラス
例:
5.cssの擬似要素
例:
6.兄弟要素汎用セレクタ
例:
1.基本セレクタ
× ，
e ， e
.info class ， class info
#footer id ， id footer 例:
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }2.マルチエレメントセレクタ
e，f ， e f ，e f
e f ， e f ，e f
e>f ， e f
e+f ， e f例:
div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }3.属性セレクタ
E[att] att E ， 。（ ：E "[cheacked]"。 。）
E[att=val] att "val" E
E[att~=val] att 、 "val" E
E[att|=val] att （hyphen-separated） 、 "val" E ， lang ， "en"、"en-us"、"en-gb"例:
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
4.cssの偽クラス
E:first-child
E:link
E:visited
E:active 、 E
E:hover E
E:focus E
E:lang(c) lang c E 例:
p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019";5.cssの擬似要素
E:first-line E
E:first-letter E
E:before E
E:after E 例:
p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: " (" attr(href) ") "; }6.兄弟要素汎用セレクタ
E~F E F 例:
p~ul{ background:#ff0; }