CSS 선택기 유형 및 사용법 소개-CSS 튜토리얼-php.cn

CSS 선택기 유형 및 사용법 소개

不言

풀어 주다： 2018-06-21 17:09:33

원래의

2098명이 탐색했습니다.

일반적으로 사용되는 것에는 태그 선택자, 클래스 선택자, ID 선택자 등이 있습니다. 실제로 다음 글에서는 이러한 선택자의 유형과 용도를 자세히 소개하겠습니다

먼저 이야기해 보겠습니다. 첫 번째 선택자
1. 태그 선택자(예: body, p, ul, li)
2. 클래스 선택자(예: class="head", class="head_logo")
3. 선택기(예: id="name", id="name_txt")
4. 전역 선택기(예: *)
5. 결합 선택기(예: .head .head_logo, 두 선택기는 다음으로 구분됩니다. 스페이스바)
6 .상속된 선택자(예: p p, 두 선택자는 스페이스바로 구분됩니다.)
7. 의사 클래스 선택자(예: 링크 스타일, 요소의 의사 클래스, 4가지 다른 선택자) 상태: 링크, 방문, 활성, 호버 )
8. 문자열 일치를 위한 속성 선택자(^ $ * 3가지 유형, 시작, 끝, 포함에 해당)
태그에 style=" "을 작성하는 방법은 다음과 같습니다. CSS를 소개하는 방법이며 선택기가 전혀 사용되지 않으므로 선택기가 아닙니다.
이 선택자를 별도로 살펴보겠습니다.
1: 태그 이름 선택기
XHTML 문서에는 p 태그, h1 태그 등과 같은 많은 태그가 있습니다. 문서의 모든 p 태그가 동일한 CSS 스타일을 사용하도록 하려면 태그 선택기를 사용해야 합니다.

p {color:red;border:1px blue solid;} 
p {color:#000;}

로그인 후 복사

2: 클래스 선택기
전체 XHTML 문서에서 동일한 태그에 대해 동일한 CSS 스타일을 지정하려면 태그 선택기를 사용하세요. 그러나 실제 응용에서는 XHTML 문서의 동일한 태그가 반복적으로 사용됩니다. 동일한 태그에 다른 CSS 스타일을 할당하려면 클래스 선택기를 사용해야 합니다.

<p class="test">测试代码</p> 
.test {color:red;border:1px blue solid;}

로그인 후 복사

HTML 문서에서는 태그의 여는 태그에 class="xxx"를 추가하여 스타일을 제어하고(입력 등 페어링되지 않은 태그는 태그에 직접 배치), 해당 페이지에 해당하는 CSS 파일에서는, .xxx를 사용하여 이 태그를 지정하여 이 태그를 제어할 수 있습니다. 클래스를 정의하여 태그를 찾는 방법을 클래스 선택자라고 합니다.

이러한 클래스 정의 방법은 프런트엔드 개발에서 가장 일반적으로 사용되는 선택기입니다. 여기에는 여러 가지 뛰어난 기능이 있습니다. 서로 다른 태그에 동일한 클래스를 설정할 수 있으므로 하나의 CSS 명령을 사용하여 여러 태그를 제어할 수 있으므로 많은 코드가 줄어듭니다. , 페이지 만들기 수정이 간단하고 유지 관리가 쉽고 수정하기 쉽습니다. 둘째, 배경 직원은 수업의 관련 설정을 사용할 필요가 없으며 더 나아가 배경 직원과 상호 작용할 필요가 없습니다. , 레이블의 Classname은 js 등을 통해 동적으로 변경될 수 있으며, 이로 인해 전체 레이블의 스타일이 변경되므로 프런트엔드 동적 효과를 보다 쉽게 구현할 수 있습니다.
3: ID 선택기
ID 선택기는 클래스 선택기와 유사하지만 ID 선택기는 재사용이 불가능합니다. XHTML 문서에서 ID 선택기는 CSS 스타일을 하나의 태그에만 할당할 수 있습니다.

<p id="test">测试代码</p> 
#test {color:red;border:1px blue solid;}

로그인 후 복사

ID가 있는 HTML 요소는 JavaScript로 조작할 수 있습니다. 또한 ID는 백엔드 개발자가 자주 사용하므로 프런트엔드 개발자는 ID를 가능한 한 적게 사용해야 합니다.
4. 글로벌 선택기
글로벌 선택기는 별표입니다. XHTML 문서의 모든 요소에 대해 작동합니다.

*{margin:0; padding:0;}

로그인 후 복사

5. 결합 선택기
태그 선택기, 클래스 선택기, ID 선택기를 조합하여 사용할 수 있습니다. 일반적인 조합 방식은 태그 선택기와 클래스 선택자의 조합, 태그 선택기와 ID 선택자의 조합이 있다. 이 두 조합 방법의 원리와 효과는 동일하므로 태그 선택자와 클래스 선택자의 조합만을 소개한다. 조합 선택자는 조합의 한 형태일 뿐 실제 선택자는 아니지만 실무에서 자주 사용된다.
예를 들어 .orderlist li {xxxx} 또는 .tableset td {}
사용할 때 일반적으로 li td dd 등과 같이 반복적으로 나타나고 동일한 스타일을 갖는 일부 태그에 사용됩니다.
예를 들어

H1.red {color: red}
그룹 선택기

.test1,span,test2 {border:1px blue solid;} 
p,span,img {border:1px blue solid;}

로그인 후 복사

그룹 선택기는 실제로 CSS를 작성하는 간단한 방법이지만 동일한 정의를 함께 사용하면 많은 코드가 절약됩니다.
6. 상속된 선택자
상속된 선택자를 사용하려면 먼저 문서 트리와 CSS 상속을 이해해야 합니다. 각 XHTML은 문서 트리로 간주될 수 있습니다. 문서 트리의 루트는 html 태그이고 head 및 body 태그는 해당 하위 요소입니다. 머리글과 본문의 다른 태그는 html 태그의 손자 요소입니다. 전체 XHTML은 조상과 자손 사이의 나무와 같은 관계를 나타냅니다. CSS 상속은 하위 요소가 상위 요소의 특정 속성을 상속한다는 것을 의미합니다. 다음은 예제를 통해 이러한 두 가지 중요한 CSS 개념을 자세히 설명합니다.
문서 트리 CSS 상속 상속 선택기

<p class="test"> 
<span><img src="xxx" alt="示例图片"/></span> 
</p> 
.test span img {border:1px blue solid;} 
p span img {border:1px blue solid;}

로그인 후 복사

后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。
7.伪类选择器
伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:visited、:hover和:active。
a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上
8.字符串匹配的属性选择符--主要有三种
语法：E[att^="val"] ： {attribute}
说明：匹配具有att属性、且值以val开头的E元素。

<span style="font-size:18px;"><style type="text/css"> 
p[title^="val"] {color:#FF0000;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="value">匹配具有att属性、且值以val开头的E元素</p> 
</p></span>

로그인 후 복사

语法:E[att$="val"] ： {attribute}
说明：匹配具有att属性、且值以val结尾的E元素

<style type="text/css"> 
p[title$="val"] {font-weight:bold;} 
</style> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p> 
</p> 
</body>

로그인 후 복사

语法:E[att*="val"] ： {attribute}
说明：匹配具有att属性、且值中包含val的E元素。

<style type="text/css"> 
p[title*="val"] {text-decoration:underline;} 
</style> 
<title>子串匹配的属性选择符 E[att*="val"]</title> 
</head> 
<body> 
<p style="width:733px; border: 1px solid #666; padding:5px;"> 
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p> 
</p> 
</body>

로그인 후 복사

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！