5 ѡ����

    Ŀ¼

5.1 ģʽƥ��

    CSS�У�ģʽƥ�����涨�ĵ����е�Ԫ��Ӧ��������Щ��ʽ������Щģʽ����Ϊѡ�����������Ǽ򵥵�Ԫ���������Ǹ��ӵ���������ص�ģʽ�����ģʽ�е�����������ijһ��Ԫ�ض�Ϊ�棬��ѡ���Ӿ�ƥ���Ǹ�Ԫ�ء�

    ѡ�����е��ĵ�����Ԫ�����Ĵ�Сд������ȡ�����ĵ����ԵĴ�Сд�����ԡ����磬��HTML�У�Ԫ�����Ǵ�Сд�޹صģ�����XML�У��Ǵ�Сд��صġ�

    ����ı��������CSS2ѡ���ӵ��﷨��

ģʽ����������
*ƥ������Ԫ�ء�ȫ��ѡ����
Eƥ������EԪ�أ�������ΪE��Ԫ�أ�������ѡ����
E Fƥ��EԪ�غ��������FԪ�ء�����ѡ����
E > Fƥ��EԪ����Ԫ�ص�����FԪ�ء���ѡ����
E:first-child��Ԫ��E���丸Ԫ�صĵ�һ����Ԫ��ʱ��ƥ��EԪ�ء� :first-childα��
E:link
E:visited
��Ԫ��E��һ�������ӵ���ʱ�����Ŀ�껹δ�����ʣ�:link�����Ѿ����ʣ�:visited��ʱ��ƥ��Ԫ��E������α��
E:active
E:hover
E:focus
���ض����û���Ϊʱ��ƥ��E�� ��̬α��
E:lang(c) ƥ��E���͵�Ԫ�أ�������ԣ����ࣩ����cд�ɣ��ĵ����Թ涨���ȷ�����ԣ��� :lang()α��
E + Fƥ������FԪ�أ����������ǰ����EԪ�ء�����ѡ����
E[foo]ƥ������EԪ�أ������������"foo"���ԣ�����ֵ��ʲô���� ����ѡ����
E[foo="warning"]ƥ������EԪ�أ������������"foo"���ԣ���������ֵΪ"warning"�� ����ѡ����
E[foo~="warning"]ƥ������EԪ�أ��������"foo"����ֵ��һ���Կո�ָ���б���������֮һΪ"warning"�� ����ѡ����
E[lang|="en"]ƥ������EԪ�أ�����"lang"����ֵ��һ�������ֺŷָ���б���������"en"��ͷ���������㣩�� ����ѡ����
DIV.warning����HTML���á���DIV[class~="warning"]�� ��ѡ����
E#myidƥ���κ���IDΪ"myid"��EԪ�ء�IDѡ����

5.2 ѡ�����﷨

    һ����ѡ����������һ������ѡ������������һ��ȫ��ѡ�����������ں���������������ѡ������IDѡ������α�����������⡣��������������ݶ�ƥ�䣬���ѡ����ƥ�䡣

    һ��ѡ������һ��������ѡ��������Ϸ����ɵ�������Ϸ��������հף�">"��"+"���հ׿��Գ�����һ����Ϸ��ͼ�ѡ����֮�䡣

    �ĵ�����ƥ��һ��ѡ���ӵ�Ԫ�س�Ϊ�Ǹ�ѡ���ӵ�����������һ����ѡ���ӵ�ѡ���ӣ�ƥ�����������Ҫ���Ԫ�ء�����ѡ���Ӻ���Ϸ���ϳ����������˶����ƥ�����������ѡ���ӵ�����������Щ�������Ҷ˵ļ�ѡ���ӵ�Ԫ�ص��Ӽ���

    ��һ�����е����һ����ѡ����֮�󣬿��Լ�һ��αԪ������ʱ������ʽ��ϢӦ�õ�ÿһ���������ɲ��֡�

5.2.1 ����

    �������ѡ����������ƣ����Խ����Ƿ���Ϊһ���Զ��ŷָ���б���

���ӣ�

    �����У����ǽ�������ͬ�������鲢Ϊһ������ˣ�

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

    �͵�ͬ�ڣ�

H1, H2, H3 { font-family: sans-serif }

    CSS���ṩ��������д�����ƣ�����������������д������

5.3 ȫ��ѡ����

    ȫ��ѡ������д��"*"��ƥ������Ԫ������������ƥ�����ĵ����е�����һ��Ԫ�ء�

    ���ȫ��ѡ���Ӳ���һ����ѡ������Ψһ���ݣ�"*"����ʡ�ԡ����磺

5.4 ����ѡ����

    ����ѡ����ƥ���ĵ�����Ԫ����������һ������ѡ����ƥ���ĵ����и�Ԫ�����͵�ÿһ��ʵ����

���ӣ�

    ���µĹ���ƥ���ĵ��������е�H1Ԫ�أ�

H1 { font-family: sans-serif }

5.5 ����ѡ����

    ��ʱ�����߿���ϣ��ѡ������һ��Ԫ�����ĵ���������һ��Ԫ�صĺ��ʱ��ƥ���Ǹ�Ԫ�أ����磬��ƥ����Щ������һ��H1Ԫ���ڵ�EMԪ�ء���������ѡ����������ģʽ�������Ĺ�ϵ������ѡ��������������ѡ������ɣ������հ���ָ����ѡ���ӵ���ʽΪ"A B"����ƥ��һ��Ԫ��B����Ԫ��B����ǰ��Ԫ��A��������ʱ��

���ӣ�

     ���磬�������¹���

H1 { color: red }
EM { color: red }

    ������Щ�����������ͨ���ı��ı�����ɫ�����ı�����ǿ�������������������оͻ�ʧȥǿ��Ч����

<H1>������<EM>�dz�</EM>��Ҫ</H1>

    �����������Ľ���һ��������Ƕ�ǰ���Ĺ��򲹳�һ��������һ���򽫳�����H1֮���κ�λ�õ�EMԪ�ص��ı���ɫ����Ϊ��ɫ��

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

    ����������ƥ����������е�EMԪ�أ�

<H1>��<SPAN class="myclass">����<EM>�dz�</EM>��Ҫ</SPAN></H1>

���ӣ�

     �����ѡ���ӣ�

DIV * P 

    ƥ��һ��PԪ�أ������PԪ����DIVԪ�ص���Ԫ�ػ�����Ԫ�ء���ע��"*"���ߵĿհס�

���ӣ�

     ��������е�ѡ���ӽ��������ѡ���Ӻ�����ѡ��������ƥ���κ�Ԫ�أ����(1)��Ԫ��������"href"���ԣ���(2)������һ��PԪ���ڣ���PԪ���ְ�����һ��DIVԪ���ڣ�

DIV P *[href]

5.6 ��ѡ����

    ��ѡ����ƥ��һ��Ԫ�أ�����Ԫ��������һ��Ԫ�ص���Ԫ��ʱ����ѡ��������������ѡ���ӹ��ɣ�����">"�ָ

���ӣ�

     ����Ĺ�������������BODYԪ����Ԫ�ص�PԪ�ص���ʽ��

BODY > P { line-height: 1.3 }

���ӣ�

    ��������ӽ��������ѡ���Ӻ���ѡ���ӣ�

DIV OL>LI P

    ��ƥ��һ��LIԪ�صĺ��PԪ�أ���LI������OLԪ�ص���Ԫ�أ���OLԪ�ر�����DIVԪ�صĺ������ע�⣬��">"��Ϸ����˿�ѡ�Ŀհ��Ѿ���ʡ�ԡ�

    ����ѡ��һ��Ԫ�صĵ�һ����Ԫ�ص����⣬��μ����µ�:first-childα��һ�ڡ�

5.7 ����ͬ��ѡ����

    ����ͬ��ѡ���ӵ��﷨Ϊ��E1 + E2������E2��ѡ���ӵ����⡣��ѡ����ƥ��������ǣ����E1��E2���ĵ����и�Ԫ����ͬ����E1������E2֮ǰ����ѡ����ƥ��Ԫ��E2��

    ��ijЩ�龰�У�����Ԫ�ز����ĸ�ʽ���������ǵij������Զ������ģ����磬���ڿ��ƿ�֮��Ĵ�ֱ�߾���غϣ���"+"ѡ�����������߶�����Ԫ��ָ�����ӵ���ʽ��

���ӣ�

     ��ˣ�����Ĺ���ָ������һ��PԪ�ؽ�����һ��MATHԪ��֮��ʱ������Ӧ��������

MATH + P { text-indent: 0 } 

    �����һ�����ӣ���С�˽�����H1֮���H2Ԫ�صĴ�ֱ���룺

H1 + H2 { margin-top: -5mm }   

���ӣ�

    ����Ĺ���ͬ��һ�����ƣ�����������������ѡ���ӡ����ֻ�е�H1����class="opener"��ʱ�������ر�ĸ�ʽ����

H1.opener + H2 { margin-top: -5mm }   

5.8 ����ѡ����

    CSS2��������ָ��������ƥ��Դ�ĵ��ж�������ԡ�

5.8.1 ���Ժ�����ֵ��ƥ��

    ����ѡ����������ƥ�䷽ʽ��

[att]
��Ԫ��������"att"����ʱƥ��ɹ�������������ֵ��ʲô��
[att=val]
��Ԫ�ص�"att"����ֵ����Ϊ"val"ʱ��ƥ��ɹ���
[att~=val]
��Ԫ�ص�"att"����ֵ��һ���Կո�ָ�ġ��֡����б�����������֮һΪ"val"��ƥ��ɹ���������ø�ѡ���ӣ�ֵ�е��ֲ����԰����ո���Ϊ�������Կո�ָ�ģ���
[att|=val]
��Ԫ�ص�"att"����ֵ��һ�������ֺŷָ�ġ��֡����б���������"val"��ͷ��ƥ��ɹ���ƥ�����Ǵ�����ֵ��ͷ�Ͽ�ʼ������Ҫ��������������������ƥ�䣨����HTML�е�"lang"���ԣ���������μ�RFC 1766��[RFC1766]����

    ����ֵ�����DZ�ʶ�����ַ�����ѡ��������������ֵ�Ĵ�Сд������ȡ�����ĵ����Ե������ԡ�

���ӣ�

    ���磬���µ�����ѡ����ƥ����Щָ����"title"���Ե�H1Ԫ�أ���������ֵΪʲô��

H1[title] { color: blue; }

���ӣ�

    ����������ӣ�ѡ����ƥ������ָ��"class"����Ϊ"example"��SPANԪ�أ�

SPAN[class=example] { color: blue; }

    ��������ѡ���ӿ�����������һ��Ԫ�صļ������ԣ��򼸴�ͬһ���Եij��֡�

���ӣ�

    ���ѡ����ƥ����ЩSPANԪ�أ���"hello"��������Ϊ"Cleveland"��"goodbye"��������Ϊ"Columbus"��

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

���ӣ�

    �����ѡ������ʾ��"="��"~="���������磬��һ��ѡ����ƥ��"rel"���Ե�"copyright copyleft copyeditor"ֵ�����ڶ���ѡ����ֻƥ��"href"����ֵΪ"http://www.w3.org/"��

A[rel~="copyright"]
A[href="http://www.w3.org/"]

���ӣ�

    ����Ĺ�������"lang"��������Ϊ"fr"��������Ϊ�����Ԫ�ص���ʾ���Թرա�

*[LANG=fr] { display : none }

���ӣ�

    ����Ĺ���ƥ�������"en"��ͷ��"lang"����ֵ������Ԫ�أ�����"en"��"en-US"��"en-cockney"��

*[LANG|="en"] { color : red }

���ӣ�

    ���Ƶأ������������ʽ����������һ�����ָ��ݲ�ͬ�Ľ�ɫ�Բ�ͬ������������

DIALOGUE[character=romeo] 
     { voice-family: "Lawrence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 DTD�е�ȱʡ����

    ƥ�����ĵ����е�����ֵ������ء�����HTML���ԣ������ĵ����Ե�ȱʡ���Կ��Զ�����DTD�л��ĵط�����ʽ�������Ӧ�ñ�֤��ʹ���ĵ�����û�а���ȱʡֵ������Ҳ��������������

���ӣ�

    �ٶ����ǿ���һ��Ԫ��ELEMENT��������һ��"notation"���ԣ���ȱʡֵΪ"decimal"����DTD��ʾ�����ǣ�

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

    �����ʽ���������¹���

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }

    ��ôΪ�˿���������ȱʡ�����ö�������ʽ�����õ���������Լ�������Ĺ���

EXAMPLE { /*... default property settings ...*/ }

    ������һѡ����������ѡ������ȣ�����ô��ȷ����ֻ��������ȱʡ������¡�ע�⣬�������Ժ�ȱʡ���Ե���ʽ��ͬ�����DZ��뱻��ʽ�ذ�����

5.8.3 ��ѡ����

    ��HTML��ʽ���У���ƥ��"class"����ʱ�����߿���ʹ�õ㣨.����������Ϊ"~="���ŵ��������ˣ�HTML��"DIV.value"��"DIV[class~=value]"��˼��һ���ġ�����ֵ���������"."֮��

���ӣ�

     ���磬���ǿ���Ϊ����class~="pastoral"��Ԫ��ָ����ʽ��Ϣ���£�

*.pastoral { color: green }  /* all elements with class~=pastoral */
���ߣ�
.pastoral { color: green }  /* all elements with class~=pastoral */

    ����Ĺ���ֻ��class~="pastoral"��H1Ԫ��ָ����ʽ��

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

    ����Щ���������£����������еĵ�һ��H1Ԫ�ز�����ɫ���֣����ڶ�������ɫ���֣�

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

    Ҫƥ��"class"ֵ��һ���ּ��ϣ�ÿһ��ֵ��������"."�ָ�������⡣

���ӣ�

    ���磬����Ĺ���ƥ������PԪ�أ��������"class"���Ա�ָ��Ϊһ���ո�ָ���б����������а���"pastoral"��"marine"��

 
P.pastoral.marine { color: green }

    �ù���ƥ��class="pastoral blue aqua marine"����ƥ��class="pastoral blue"��

     ע�⣡CSS����"class"���Ժ�ǿ������������û�г������ݵ�Ԫ�أ���HTML�е�DIV��SPAN�����û�������������Լ��ġ��ĵ����ԡ�����ͨ��"class"������ָ����ʽ��Ϣ������Ӧ�ñ�����һ���ԡ�������Ϊ�ĵ����ԵĽṹ��Ԫ��ͨ�����й��Ϻ��Ͽɵĺ��壬�������Զ������ȴ������ˡ�

5.9 IDѡ����

    �ĵ����Կ��԰�������ΪID���͵����ԡ�ID�������Ե�����֮�����ڣ�û���������Կ�������ͬ��ֵ�������ĵ�������ʲô��ID���Կ���������һ��ָ������Ԫ�ء���HTML�У�ID���Զ�������Ϊ"id"��XMLӦ�ÿ��ܲ�ȡ��ͬ�ķ�������ID���ԣ�����Ҳ��ͬ�������ơ�

    �ĵ������е�ID������������Ϊ�ĵ�����Ԫ�ص�һ��ʵ��ָ��һ����ʶ����CSS IDѡ���ӻ���Ԫ�صı�ʶ����ƥ��һ��Ԫ�ء�CSS IDѡ���Ӱ���һ��"#"�������ں����IDֵ��

���ӣ�

    �����IDѡ����ƥ��ID����ֵΪ"chapter1"��H1Ԫ�أ�

H1#chapter1 { text-align: center }

    ������������У���ʽ����ƥ��IDֵΪ"z98y"��Ԫ�ء���ˣ�����ƥ��PԪ�أ�

<HEAD>
  <TITLE>ƥ��PԪ��</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>���ı�</P>
</BODY>

    ��һ�������У���ʽ����ֻƥ��IDֵΪ"z98y"��H1Ԫ�أ�����ƥ�������е�PԪ�أ�

<HEAD>
  <TITLE>ֻƥ��H1</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>���ı�</P>
</BODY>

    IDѡ���ӱ�����ѡ���Ӿ��и��ߵ����ȼ������磬��HTML�У�������ĽǶ�˵��ѡ����#p123��[ID=p123]����ȷ��

    ע�⣡��XML 1.0[XML10]�������ĸ����԰�����Ԫ�ص�ID����Ϣ�������DTD�С�����XMLʱ���û��˲������Ķ�DTD����˿��ܲ�֪��Ԫ�ص�ID��ʲô�������ʽ���������֪���������������⣬��Ӧ�ø�Ϊʹ��һ�������ѡ���ӣ�[name=p371]������#p371��Ȼ����һ������ѡ���ӵIJ�������IDѡ���Ӳ�ͬ��������ҪΪ��������һ��"!important"����Ȩ��[name=p371]{color: red ! important}����Ȼ��XML 1.0�ĵ��е�Ԫ�����û��DTD��Ҳ�͸���û��ID��

5.10 αԪ����α��

    CSS2�У���ʽ��Ԫ�ص�����һ���ǻ���Ԫ�����ĵ����е�λ�á���һ�򻯵�ģ�Ͷ��ڴ󲿷�������㹻�ġ����������ĵ����ṹ�����ƣ�һЩ���õ�ӡˢЧ�������޷��ﵽ�����磬��HTML 4.0���μ�[HTML40]���У�û��Ԫ�ؿ���������һ������ĵ�һ�У����Ҳû��һ���򵥵�CSSѡ���ӿ�����������

    CSS������αԪ����α���ĸ���������ĵ���֮�����Ϣ���и�ʽ����

    ������αԪ�ػ�α�࣬���Ƕ���������Դ�ĵ����ĵ����С�

    α�������ѡ�����е��κ�λ�ó��֣���αԪ��ֻ���Գ�����ѡ���ӵ�����֮��

    αԪ�غ�α������������Сд��صġ�

    ijЩα�����໥�ų�ģ�������һЩ����ͬʱӦ�õ�ͬһԪ���ϡ�������ֹ����ͻ���������������������������

    ��CSSһ�µ�HTML�û��������������д���:first-line��:first-letter�Ĺ��򣬻��ߣ�����ֻ֧����ЩαԪ�����Ե�һ���Ӽ���

5.11 �

5.11.1 :first-child�

    :first-childα��ƥ��һ��������һ��Ԫ�صĵ�һ����Ԫ�ص�Ԫ�ء�

���ӣ�

    �����У�ѡ����ƥ���κ�һ����DIVԪ�صĵ�һ����Ԫ�ص�PԪ�ء��ù���ȡ����DIV�е�һ�������������

DIV > P:first-child { text-indent: 0 }
��һѡ���ӽ�ƥ�������������DIV�ڵ�PԪ�أ�
<P>��ע��֮ǰ�����һ��PԪ�ء�
<DIV class="note">
   <P> ��ע��֮�еĵ�һ��PԪ�ء�
</DIV>
���Dz�ƥ����������еĵڶ���PԪ�أ�
<P> ��ע��֮ǰ�����һ��PԪ�ء�
<DIV class="note">
   <H2>ע��</H2>
   <P> ��ע��֮�еĵ�һ��PԪ�ء�
</DIV>

���ӣ�

    ����Ĺ���ƥ��������ǣ����PԪ����ij��Ԫ�صĵ�һ����Ԫ�أ���EMԪ�������ĺ������ô��EMԪ�ص�������������Ϊ'bold'��

P:first-child EM { font-weight : bold }

    ע�⣬�����������ƿ����ĵ�����һ���֣��ڼ����һ����Ԫ��ʱ�����Dz��������ڡ�

     ���磬�����EMԪ�أ�

<P>abc <EM>default</EM> 
��PԪ�صĵ�һ����Ԫ�ء�

    ��������ѡ������һ���ģ�

* > A:first-child   /* A������Ԫ�صĵ�һ����Ԫ�� */
A:first-child       /* ͬ�� */

5.11.2 �������:link ��:visited

    �û�����ʾδ���ʵ����Ӻ��ѷ��ʵ�����ʱ������һЩ��ͬ��CSS�ṩ��α��':link'��':visited'���������֣�

ע�⣡����һ���ض���ʱ����û��˿���ѡ���Ѿ����ʵ����ӻָ�����δ���ʵģ�':link'״̬��

    ������״̬�ǻ����ų�ġ�

    �ĵ����Ծ�����ЩԪ���dz����ӵ�Դ�������磬��HTML 4.0�У�����α�������ڴ���"href"���Ե�AԪ�ء���ˣ����������CSS2����Ч��һ����

A:link { color: red }
:link  { color: red }

���ӣ�

    �����������ӣ�

<A class="external" href="http://out.side/">external link</A>
�Ѿ������ʣ�����
A.external:visited { color: blue }
��ʹ����Ϊ��ɫ��

5.11.3 ��̬α�ࣺ:hover��:active��:focus

    �������û�����ʱ�����û��Ķ����ı���ȾЧ����CSSΪͨ�õ�����ṩ����α�ࣺ

    ��Щα�໥���ų⡣һ��Ԫ��ͬʱ����ƥ�����е����ɸ���

    CSS��û�й涨��ЩԪ�ؿ�����������״̬��������ν�����뿪��Щ״̬���ű����Ըı�Ԫ���Ƿ���Ӧ�û��¼�����ͬ���豸���û��˶���ָ��ͼ���Ԫ�صı��ַ�������������ͬ��

    �û��˲�����Ϊα��ı任���������е�ǰ��ʾ���ĵ������磬һ����ʽ������ָ��һ��:active���ӵ�'font-size'Ҫ��һ��δ��������Ӵ󡣲�����������ܻ��ڶ���ѡ�������ʱ���ı���ĸ��λ�ã��û��˿��Ժ�����Ӧ����ʽ����

���ӣ�

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { color: yellow } /* user hovers     */
A:active  { color: lime }   /* active links    */

    ע�⣬A:hover���������A:link��A:visited����֮�󣬷�������������A:hover��'color'���ԡ�ͬ���ģ�����A:active������A:hover֮�󣬼������ɫ��lime�����û��ȼ�����ָ��AԪ��ʱӦ�á�

���ӣ�

    һ����϶�̬α������ӣ�

A:focus { background: yellow }
A:focus:hover { background: white }

    �ڶ���ѡ����ƥ����α��:focus��α��:hover�е�AԪ�ء�

    Ҫ�˽⽹���������ֵ���Ϣ����μ���̬��������һ�ڡ�

     ע�⣡��CSS1�У�':active'α���':link'��':visited'�ǻ����ų�ġ������Ѿ����������ˡ�һ��Ԫ�ؿ��Լ���':visited'����':active'�������':link'����':active'��������������һ��������һ��IJ�����������

5.11.4 ����α�ࣺ :lang

    ����ĵ����Թ涨��һ��Ԫ�ص���Ȼ��������ζ���ģ��Ϳ��ܻ���Ԫ�ص����ԣ�д��CSS��ѡ������ƥ���������磬��HTML[HTML40]�У���������"lang"���ԡ�METAԪ�ء����ܻ��д�Э��õ�����Ϣ����HTTPͷ������Ͼ����ġ�XMLʹ��һ��XML:LANG���ԡ����ܻ�������ȷ���ĵ����Եķ�����

    α��':lang(C)'ƥ��������C��ʾ��Ԫ�ء�����C��һ�����Դ�����������HTML 4.0[HTML40]�Լ�RFC 1766 [RFC1766]�С�����ƥ�䷽ʽ��'|='������һ����

���ӣ�

    ������Щ����Ϊ�Է�������д�ɵ�HTML�ĵ��������ţ�

HTML:lang(fr) { quotes: '� ' ' �' }
HTML:lang(de) { quotes: '�' '�' '\2039' '\203A' }
:lang(fr) > Q { quotes: '� ' ' �' }
:lang(de) > Q { quotes: '�' '�' '\2039' '\203A' }

    �ڶ��Թ���ʵ�����Ǹ���QԪ�صĸ�Ԫ�ص����ԣ�������QԪ�ص�'quotes'���ԡ�������Ϊ���ŵ�ѡ��ͨ���ǻ���������ΧԪ�ص����ԣ����������ﱾ���������������Ƭ��“à l'improviste”�����������ı��У����ʹ�����ĵ����š�

5.12 αԪ��

5.12.1:first-lineαԪ��

    :first-lineαԪ�ض�һ������ĵ�һ����ʽ������Ӧ���������ʽ�����磺

P:first-line { text-transform: uppercase }

    ��������������ζ�š���ÿһ�εĵ�һ�е���ĸ��Ϊ��д����������ѡ����"P:first-line"����ƥ���κ�ʵ�ʵ�HTMLԪ�ء���ƥ������CSSһ�µ��û�����ÿһ�ο�ʼ�����һ��αԪ�ء�

    ע�⣬��һ�еij���ȡ���ںܶ����أ���ҳ��Ŀ��ȣ�����ߴ�ȵȡ���ˣ����µ�һ������ͨ��HTML���䣺

<P>This is a somewhat long HTML 
paragraph that will be broken into several 
lines. The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>
���ܵķ������£�
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag 
sequence. The other lines will be treated as 
ordinary lines in the paragraph.
�û��˿��ܼ��ԡ���д���԰���:first-line���鹹�����������һ�鹹���������ʾ����������μ̳еġ�
<P><P:first-line> This is a somewhat long HTML 
paragraph that will </P:first-line> be broken into several
lines. The first line will be identified 
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>

    ���һ��αԪ�ؽض���һ��ʵ�ʵ�Ԫ�أ�����Ҫ��Ч��ͨ������ͨ��һ���鹹����������ﵽ�������йرղ����´򿪸���һ���ضϵ�Ԫ�ء���ˣ��������������������м���һ��SPANԪ�أ�

<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>
�û��˿�����Ϊ:first-line�����鹹�������ʱ��ΪSPAN���뿪ʼ�ͽ�����ǣ�
<P><P:first-line><SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P:first-line><SPAN class="test"> be
broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the 
paragraph.</P>

    :first-lineαԪ��ֻ���ԺͿ���Ԫ�����á�

    :first-lineαԪ�غ�����Ԫ�����ƣ�������һЩ�ض������ơ�ֻ���������Կ���Ӧ����:first-lineαԪ�أ�������������ɫ����������������'word-spacing'��'letter-spacing'��'text-decoration'����'vertical-align'��'text-transform'��'line-height'��'text-shadow'�Լ�'clear'��

5.12.2 :first-letterαԪ��

    :first-letterαԪ�ؿ������������״�д���Լ�����д��ĸ�³�������Щ���dz��õ�ӡˢЧ������һ�������ĸ��һ������Ԫ�����ƣ��������'float'������'none'����������һ������Ԫ�����ơ�

    ��Щ�ǿ���Ӧ����:first-letterαԪ���ϵ����ԣ�������������ɫ����������������'text-decoration'��'vertical-align'������'float'Ϊ'none'ʱ����'text-transform'��'line-height'���߾��������߰��������߿�������'float'��'text-shadow'�Լ�'clear'��

    ���µ�CSS2����ʹ����ĸ�³���չΪ���У�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

    ��һ���ӵĸ�ʽ��Ч������Ϊ��

    Image illustrating the combined effect of the :first-letter and :first-line pseudo-elements   [D]

    �鹹�������Ϊ��

<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>

    ע�⣬:first-letterαԪ�ر�������ݣ��ȵ�һ���ַ������ڣ���:first-lineαԪ�صĿ�ʼ��Dz�����αԪ��������Ԫ�صĿ�ʼ���֮��

    Ϊ�˵õ��������ĸ�³���ʽ���û�Ҫ������ߴ���н��ƣ����������ߡ�ͬ���ģ���ʽ��ʱ��ҲҪ��������������

    �����ţ�������ΪUnicode [UNICODE]��"open" (Ps)�� "close" (Pe)��"other" (Po)���������е��ַ������������������ĸǰ��ҲҪ�������ڣ�

    Quotes that precede the
first letter should be included.   [D]

    :first-letterαԪ��ֻƥ������Ԫ�ص�һ���֡�

    ijЩ���Զ�����δ����ض�����ĸ��Ͽ������ر�Ĺ������磬�ڵ����У������ĸ���"ij"������һ�����ʵĿ�ͷ����������ĸ������Ϊ����:first-letterαԪ��֮�ڡ�

���ӣ�

    �����������ʾ�˻����ص���αԪ������໥���á�ÿһ��PԪ�صĵ�һ����ĸ����ɫ�ģ�����ߴ�Ϊ'24pt'����һ����ʽ�е�������������ɫ�ģ���������������ֵ���ɫ��'red'��

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Some text that ends up on two lines</P>

    �ٶ���"ends"ǰ��һ�����У���ô��һƬ�ε��鹹�������Ϊ��

<P>
<P:first-line>
<P:first-letter> 
S 
</P:first-letter>ome text that 
</P:first-line> 
ends up on two lines 
</P>

    ע�⣬:first-letterԪ����:first-lineԪ��֮�ڡ�������:first-line�ϵ����Խ�Ϊ:first-letter�̳У��������:first-letter��������ͬ�����ԣ���̳е����Ա���Խ��

5.12.3 :before��:afterαԪ��

    ':before'��':after'αԪ��������һ��Ԫ�ص�����֮ǰ��֮��������ɵ����ݡ����ǵ������μ����ɵ�����һ�ڡ�

���ӣ�

    

H1:before {content: counter(chapno, upper-roman) ". "}

    ��:first-letter��:first-lineαԪ����:before��:after����ʱ������Ӧ���ڰ���������ı��ĵ�һ����ĸ���һ�С�

���ӣ�

    

P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}

    ����"Special!"�е�"S"����ɫ����Ϊ��ɫ��