이 장에서는 CSS 선택기가 무엇인지 설명하겠습니다. CSS3의 5가지 공통 기본 선택기. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
One: css 선택기가 무엇인가요?
CSS는 html, xml 등을 화면에 렌더링하는 데 사용되는 언어입니다. CSS는 주로 해당 요소에 스타일을 적용하여 상대적으로 적용되는 요소를 렌더링하는 것이 매우 중요합니다. 해당 요소를 선택하려면 선택기라고 부르는 것이 필요합니다. CSS에서 선택자는 스타일을 지정해야 하는 요소를 선택하는 데 사용되는 패턴입니다. 선택기는 주로 html의 트리 구조에서 DOM 요소 노드를 결정하는 데 사용됩니다.
두 가지: CSS3의 5가지 일반적인 기본 선택기
Css3에는 다양한 유형의 선택기가 있습니다. 다음은 5가지 일반적인 기본 선택기입니다: 와일드카드 선택기, 클래스 선택기, 요소 선택기, ID 선택기 및 그룹 선택기.
1. 와일드카드 선택기(모든 브라우저에서 지원)
범용 선택기는 모든 요소를 선택하는 데 사용됩니다.
*{marigin: 0;
padding: 0;
font-size: 14px;
}로그인 후 복사
위 코드는 재설정 스타일입니다. 문서에 많이 보일 것입니다. 그가 의미하는 바는 모든 요소의 여백과 패딩이 0으로 설정되고 글꼴 크기가 14px로 설정된다는 것입니다. 다른 방법은 특정 요소 아래의 모든 요소를 선택하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>로그인 후 복사
Rendering :
 "153654702728376CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)")
데모 요소의 세 가지 하위 요소인 div, p,span에는 각각 CSS 스타일이 설정되어 있지 않지만 아래의 모든 요소에 대해 통일된 스타일을 설정하는 한, 데모 요소인 경우 데모 요소 스타일이 세 개의 하위 요소인 div, p 및span에 표시됩니다.
2. 클래스 선택기(모든 브라우저는 클래스 선택기를 지원하지만 다중 클래스 선택기(.className1.className2)는 ie6에서 지원되지 않습니다.)
클래스 선택기는 앞에 " ."가 붙은 클래스 이름을 기준으로 선택합니다. mark는 문서 요소와 독립적인 방식으로 스타일을 지정합니다. 클래스 선택기를 사용하기 전에 html 요소에 클래스 이름을 정의해야 합니다. 즉, html 마크업에 클래스 이름이 있는지 확인해야 합니다. .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>로그인 후 복사
렌더링:
3. 요소 선택기(모든 브라우저에서 지원) 요소 선택기(태그 이름 선택기)는 CSS3 선택기 중 가장 일반적이고 기본적인 선택기입니다. 요소 선택기는 실제로 html, body, p, div 등과 같은 문서의 요소입니다. 다음 예에서는 범위 요소가 선택되고 글꼴 색상이 빨간색으로 설정됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>这里使用<span>元素选择器</span>改变了样式</p>
</div>
</body>
</html>로그인 후 복사
Rendering:
4. ID 선택기 (모든 브라우저에서 지원)
ID 선택기는 위에서 언급한 클래스 선택기와 매우 유사합니다. ID를 추가해야 합니다. 스타일 선택기에서 해당 요소를 찾을 수 있도록 먼저 html 문서에 이름을 지정합니다. 차이점은 클래스를 사용할 때 ID 선택기가 해당 클래스 이름 앞에 있다는 것입니다. ." 기호(.className)를 추가하고 ID 선택기는 (#demo)와 같이 이름 앞에 "#"을 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>로그인 후 복사
렌더링:
ID 선택기에는 특별한 주의가 필요한 여러 장소가 있습니다:
첫 번째: ID 선택기는 페이지에서 고유하기 때문에 문서에서 한 번만 사용할 수 있습니다.
둘째, id 선택자는 클래스 선택자와 같이 조합해서 사용할 수 없으며, 요소 이름은 하나의 ID 이름으로만 지정할 수 있습니다.
셋째, 동일한 id 이름은 "test."와 같이 다른 문서에서 사용할 수 있습니다. "html"에서는 h1에 #important"가 설정되어 있고, "test1.html"에서는 p의 id를 "#important"로 정의할 수도 있지만, test.html이나 test1에서는 하나의 id만 허용된다는 전제가 있습니다. .html "#important"의 존재.
5. 그룹 선택기(모든 브라우저에서 지원)
여러 요소가 동일한 스타일 속성을 갖는 경우 함께 명령문을 호출하고 요소를 쉼표로 구분할 수 있습니다. 그룹 선택자는 동일한 스타일을 가진 요소를 그룹화합니다. 각 선택자는 규칙에 여러 개의 다른 선택자가 포함되어 있음을 브라우저에 알려줍니다. 쉼표가 없으면 표현되는 의미가 완전히 다릅니다. 쉼표는 앞서 언급한 하위 선택자가 됩니다. 이를 사용할 때 주의해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,li{
color: blue;
}
.demo1,.demo2{
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>这里是一个段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">链接一</a><br>
<span class="demo2">文字文字！</span>
</div>
</body>
</html>로그인 후 복사
렌더링:
위 내용은 CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
