CSS의 선택기 사용 요약
- 黄舟원래의
- 2017-10-27 10:04:241481검색
태그, 와일드카드 선택기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
<!--
body:标签选择器
*：通配符选择器
.：类选择器
，：并集选择器
CSS属性：
Text-align Center,left,right 文字居中格式
Font-size 18px 设置文字大小
Font-family 微软雅黑,宋体 设置字体
Font-weight Normal默认，bold粗体，100px 设置字体加粗
Font-style Normal默认，italic斜体 设置字体风格
Color 颜色 设置文字颜色
-->
body{
background:url("xia.jpg");
}
p{
font-size:50px;
color:green;
background-color:blue;
width:300px;
height:200px;
}
*{
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<h1>111</h1>
<p>14期威武</p>
</body>
</html>클래스 선택기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.G{
font-size: 200px;
color:red;
}
.o1{
font-size: 200px;
color: blue;
}
.o2{
font-size: 200px;
color: yellow;
}
.g1{
font-size: 200px;
color: green;
}
.l{
font-size: 200px;
color: pink;
}
.e{
font-size: 200px;
color: black;
}
</style>
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g1">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>복합 선택기: 교차점 선택기
선택기 + 선택기(사이에 공백 없음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:50px;
}
p.box{
color:red;
}
p#miss{
width: 400px;
height: 300px;
background-color:yellow;
}
</style>
</head>
<body>
<!--其实无非是浏览器寻找标签顺序，第一个找到p.box即可；第二个找到
.box类即可
-->
<p class="box">14期威武</p>
<p class="box">14期霸气</p>
<p id="miss">14期万岁</p>
</body>
</html>descendant 선택 또는 그리고 하위 항목 선택기: 실제로는 포함 관계입니다
후손 선택자: 여러 세대에 걸쳐 상속 가능 Selector+space+selector
후손 선택자: 첫 번째 자손만 찾을 수 있음 Selector+> ;+Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box span{
color:red;
}
</style>
</head>
<body>
<!--
下面p标签会找到.box类，由于span是后代选择器选择对象，即使隔代也可继承，所以p标签
下面的span标签也可继承
-->
<p class="box">
<p><span class="miss">14期威武</span>
<span>14期好人</span>
</p>
</p>
<p class="box"><span>14霸气</span></p>
</body>
</html>rrree위 내용은 CSS의 선택기 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.