Heim > Artikel > Web-Frontend > Zusammenfassung der Verwendung von Selektoren in CSS
Zusammenfassung der Verwendung von Selektoren in CSS
- 黄舟Original
- 2017-10-27 10:04:241450Durchsuche
Tag, Platzhalterselektor
<!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>Klassenselektor
<!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>Zusammengesetzter Selektor : Kreuzungsselektor
Selektor + Selektor (kein Leerzeichen dazwischen)
<!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>Nachkommenselektor und Nachkommenselektor Selektor: Eigentlich ist es ein Inklusionsbeziehung
Nachkommenselektor: kann von Generation zu Generation vererbt werden Selektor + Leerzeichen + Selektor
Nachkommenselektor: Nur den ersten Nachkommen finden Selektor +>+Auswahl
<!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><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
}
</style>
</head>
<body>
<!--
此处，由于是子代选择器，所以span只能继承p；span只能继承p；
所以第一个为绿色；第二个为红色
-->
<p>
<p><span>14期威武</span></p>
<span>14期霸气</span>
</p>
</body>
</htmlDas obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von Selektoren in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die Implementierung des Links- und Rechtsgleitens mithilfe von CSS auf mobilen EndgerätenNächster Artikel：Beispiel für die Implementierung des Links- und Rechtsgleitens mithilfe von CSS auf mobilen Endgeräten