CSS 학습 2: 선택기

1. 요소 선택기: 흔히 HTML 요소일 수도 있고 XML로 정의된 요소일 수도 있다. 예를 들어 다음과 같다.

h1 {color:red;}/*       */
h2 {font:normal 12px/16px "Courier New",Arial;}/* css        ，  font            “/”   */
h3,p {background-color:#EEE;}/*        */

2. 와일드카드 선택기는 페이지의 모든 요소에 스타일을 추가합니다. 예를 들어 다음과 같습니다.

* {color:blue;}/*      ，              color    blue，        */
*.p {font-weight:bold;}/*     ，       p    ，    (*) ，   .p */

3. 유형 선택기: 쓸데없는 말 말고 여러 종류의 선택기를 말해 보세요. 예를 들면:
다음과 같은 HTML 코드가 있습니다.

<p class="p">This is a paragraph</p><!--      -->
<div class="p">This is a div element</div><!--      -->
<p class="urgent warning">This is a paragraph</p><!--      ，  class         ，           -->
<p class="urgent warning help">Those words's background-color is red too in all browser!</p><!--      ，.waring.urgent           p -->
<p class=" help ie6">Those words's background-color is red in browser ie6!</p><!--      ，  help         ，   IE6        -->
<p class="help">Those words's background-color is red in browser ie6!</p><!--     ，  help         ，   IE6        -->
<p>This is a paragraph<span class="warning"> But this is a span element</span></p>

CSS 스타일은 다음과 같습니다.

p.p {font-style:italic;}/*     ，       p       */
.waring {font-weight:bold;}
.urgent {font-style:italic;}
.warning.urgent {background-color:silver;}/*     ，      waring urgent      ，           class    */
p.warning.urgent.help {background-color:red;}/*     ，      waring,urgent help    p  ，   IE6       class     help   p   */

IE6이 아닌 경우 CSS에warning.urgent.help와 같은 선택기는 Waring,urgent, help 세 가지 종류의 HTML 요소만 일치하고, HTML에서class="urgent Warning help"같은 선택기는 CSS의 다양한 스타일과 일치할 수 있습니다.IE6에서는 다릅니다.
4. ID 선택기: 클래스 선택기보다 ID 선택기는 그리 복잡하지 않습니다. ID 속성은 빈칸으로 구분된 단어 목록을 허용하지 않습니다. 예를 들어 다음과 같은 표기법은 옳지 않습니다.

<div id="div1 div2">...</div><!--          -->

CSS가 어떻게 쓰든지 간에 스타일은 무효입니다.그러나 ID 선택자와 클래스 선택자는 다음과 같이 함께 사용할 수 있습니다.

#div.div {color:red;}/* ID           ，      ，          */

일치 ID가 div이고 div 클래스에 속하는 HTML 요소가 선언됩니다.
또한, ID 선택자를 사용한 이상 한 요소 중 한 요소에만 ID를 사용할 수 있습니다. 예를 들어 아래의 표기법은 옳지 않습니다.

<h1 id="important">important</h1>
<em id="important">important</em>
<ul id="important">important</ul>

이 세 가지 요소는 같은 ID를 가지고 있어 같은 문서에 동시에 나타날 수 없으며 이는 ID의 유일성을 나타낸다.
5. 속성 선택자: 현재 유감스럽게도 속성 선택기는 IE6에 의해 식별되지 않았고 IE7 및 이상의 IE 시리즈는 대부분의 CSS를 지원한다.1 속성 선택기.
간단한 속성 선택기 인스턴스:

a[href] {color:yellow;}/*         ，      href   a   */
*[title] {font-weight:bold;}/*         ，      title      */
a[href][title] {color:red;}/*         ，     title    href    a   */

다음은 특정 속성 값에 따른 선택입니다.

a[href="../chemdemo/"] {color:yellow;}/*          ，     “../chemdemo/” a   */
p[class="urgent warning"] {font-weight:bold;}/*          ，           ，  class="urgent"        */

상례에서 p[class="urgent warning"]는class="urgent warning"류의 p 요소와 엄격하게 일치하고urgent와warning의 순서는 뒤바뀌지 않는다.
다음은 부분 속성 값에 따라 선택됩니다.class="urgent warning"클래스에 대해 CSS는 이렇게 쓸 수 있습니다.

p[class~="warning"] {color:red;}/*          ，“~”                       p   */
[class~="urgent"] {color:grey;}/*          ，“~”                     */

물론 class 속성에만 국한된 것이 아니라 모든 속성은 속성 선택자를 사용할 수 있습니다. 예를 들어 선택기img[title~="Figure"]는 제목 값이 "빈칸과 Figure"가 포함된 이미지와 일치합니다.
다음과 같은 하위 문자열 일치 속성 선택기도 있습니다.

[class^="cl"] {}/*          ，“^=”  class     cl      */
[class$="dy"] {}/*          ，“$=”  class     dy      */
[class*="ou"] {}/*          ，“*=”  class      ou    */

마지막 속성 선택기는 다음과 같은 특정 속성 선택 유형입니다.

*[lang|="en"] {}/*   lang   en  en-        */
img[src|="figure"] {}/*           “figure-”      */

6. HTML 태그의 중첩 관계에 따라 요소를 선택합니다.
다음 중 하나는 다음 요소를 선택하는 것입니다.

h4 em {}/*  h4     em       */
ul ol li em {}/*      ，          */

하나는 하위 요소를 선택하는 것입니다.
HTML 코드가 포함됩니다.

<h2>This is <strong>very</strong> important.</h2><!-- strong   h2    、     -->
<h2>This is <em>really <strong>very</strong></em> important.</h2><!-- strong   h2           -->

그러면 다음 CSS는 앞의 "very"를 굵은 글꼴로 표시합니다.

h2 > strong {color:red;}/*     h2          strong   */

또 다른 하나는 인접 형제 요소를 선택하는 것입니다. 모든 후손 요소를 선택하지 않으려면 인접 형제 요소를 선택하는 방법으로 선택 범위를 좁힐 수 있습니다.

h2 + p {}/*      h2   p  （    p    ），       （         ）*/
html > body tabke + ul {}/*            */

참고: IE6은 하위 선택기와 인접 선택기를 지원하지 않습니다.
7. 위류:
링크에 사용되는 위조류는':link'와':visited'두 가지가 있는데 CSS를 아는 사람들은 모두 낯설지 않을 거라고 믿습니다. 여기서 예를 들지 않겠습니다.
동적 위조: CSS2.1에는':focus',':hover',':active'세 가지가 포함되어 있으며 웹 페이지에서 자주 사용하는 방식은 정적 위조류와 결합하는 것이다.

a:link {}
a:visited {}
a:hover {}
a:active {}

위류의 순서는 매우 중요하다. 개인의 기억 방법은 러브-hate(사랑과 증오)이다.
동적 위조 클래스는 다음과 같은 모든 요소에 적용될 수 있습니다.

input:focus {background:#DDD;}/*                  */
*:hover {background:gray;}/*  body                       */

요소의 첫 번째 하위 요소를 선택하려면: first-child 정적 위조 클래스를 사용합니다.
CSS 스타일:

p:first-child,li:first-child {background:#CCC;}

HTML 코드:

<div>
	<p>p1</p><!--       -->
	<p>p2</p>
	<ul>
		<li>1</li><!--       -->
		<li>2</li>
		<li>3</li>
	</ul>
</div>

참고: IE6는 ":first-child"정적 위조를 지원하지 않습니다.
다음은 위류를 결합하는 용법에 관한 것이다.

a:link:hover {color:red;}/*      ，    a:hover:link，IE6     :hover   ：link   */
a:visited:hover {color:maroon;}/*      ，IE6     :hover   ：link   */

위의 스타일은 마우스 포인터가 액세스되지 않은 링크에 있을 때 빨간색, 액세스한 링크에 있을 때 자홍색으로 표시되도록 합니다.
언어에 따라 선택할 수도 있습니다. 즉: lang을 클래스로 사용합니다.

*:lang(fr) {font-style:italic;}/*           */

더 많은 언어 코드는 CSS 매뉴얼을 참조하십시오.
또한: 퍼스트,: left:, right 세 가지 위조 클래스가 있습니다. @page 규칙에만 사용됩니다. 예를 들어:

@page :right { margin: 4cm }/*                         */
@page :first {}/*                */

8. 위조 요소: CSS2.1에는 first-letter,:first-line,:before,:after 네 가지 위조 요소, 실례:

p {width:500px;}/*   :first-line        ，        width  ，               */
p:first-line {color:red;}/*        p   ，p                */
p:first-letter {font-size:2em;}
h2:before {content:"{";color:green;}/*  h2            “{”  ，        */
h2:after {content:"}";color:green;}/*  h2            “}”  ，        */
h3:after {content:"END";color:red;}/*  IE6    ，h3           “END”   */
span:before {content:"s";color:red;}/*  IE6    ，span          “s” */
span:first-letter {color:green;font-size:40px;}/* span              ，       */
span {position:absolute;}/*  span       ，         ，   40px */

결론은 다음과 같습니다.
1) IE6 지원:first-line과:first-letter 위조원소, 지원하지 않음:after와:before 위조원소;2):first-line과:first-letter는 블록급 요소에만 사용할 수 있고:after와:before는 블록급과 행내 요소에 적합하다.3) 인라인 요소 설정position 속성을 absolute로 설정하거나 디스플레이 속성을 Block으로 설정하면:first-line과:first-letter가 유효합니다.