>웹 프론트엔드 >CSS 튜토리얼 >CSS의 여러 선택기에 대해 이야기해 보겠습니다.

CSS의 여러 선택기에 대해 이야기해 보겠습니다.

零到壹度
零到壹度원래의
2018-03-20 15:06:382031검색

오늘 이 글은 주로 CSS의 여러 선택기에 대해 설명합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

1. 와일드카드 선택기

와일드카드 선택기는 모든 선택기 중 가장 넓은 범위를 가지며 페이지의 모든 요소와 일치할 수 있습니다.

/*设置当前页面中所有标签的颜色为红色*/* {color: red;
}

2.

태그 선택기는 현재 페이지에서 동일한 이름의 태그를 선택하는 것입니다

/*设置所有p标签的文字颜色为红色*/p {color: red;
}

3. ID 선택기

ID 선택기는 "#"으로 표시되고 그 뒤에 ID 이름

{:;
}

이 표시됩니다. title

HTML 태그에 있는 ID의 속성 값은 페이지에서 고유해야 합니다(엄격한 규칙이 아니라 W3C 사양임).

ID 선택기 명명 규칙

  • 문자(대문자 및 소문자 허용, 엄격한 구분), 밑줄 및 숫자만 허용됩니다. 즉, id="Head"와 id="head"는 충돌하지 않습니다

  • 문자로만 시작 가능

  • 이름 길이 제한은 없습니다. 1자 이상도 가능하지만 너무 길면 안 됩니다.

  • 태그 이름은 허용되지 않습니다. 엄격하고 빠른 규칙)

4、类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签,用.(点)表示 

{:;
}

这是标题1

这是标题2

 一个标签可以包含多个类选择器,在class标签中用空格隔开。

.head {color: blue;
}.subHead {font-size: 50px;
}

这是标题2

 5、复合选择器

5.1、交集选择器

交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如

h3.special  /* 需要满足标签是h3同时拥有special类 */

p#one /* 需要满足标签是p同时id为one */

 5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;
}

 5.3、后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代(后代不仅仅包括儿子,还包括子子孙孙)。

위 내용은 CSS의 여러 선택기에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.