In diesem Artikel erfahren Sie, was CSS-Selektoren sind. Eine Zusammenfassung der Verwendung von CSS-Selektoren hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.
1. Selektor (Gerät) verwendet grundlegende Syntax
Selektor｛ Attribut 1: Attributwert 1;
Attribut 2: Attributwert 2;
Attribut 3: Attributwert 3;
…..: …….;
}
2. Tag-Selektor (HTML-Tags direkt als Selektoren verwenden)
second.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标记选择器</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p> 标记选择器(直接使用html标签做选择器)</p>
</body>
</html>p{
font-size:34px;
text-align:left;
text-transform:uppercase;
font-family:黑体,宋体;
text-indent:3em;
text-decoration:line-through;
font-weight:bolder;
letter-spacing:0.5em;
line-height:3px;
margin:34px;
padding:23px;
}second.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="text"> 类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同，
相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示 </p>
</body>
</html>second.css
.text{
font-variant:small-caps;/*小型大写字母*/
font-family:宋体,黑体;
font-style:italic;
text-transform:lowercase;
font-size:35px;
text-indent:3em;
text-decoration:overline;
font-weight:bold;
letter-spacing: 1px;
line-height:3em;
font-variant:small-caps;
text-align:right;
}4.ID-Selektor (legen Sie eine eindeutige ID für jedes HTML-Tag fest, CSS kann Stile für Tags über die ID festlegen)
—-#id value { } wird in CSS verwendet, um second.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择器</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="text" id="textp1"> ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
----CSS中用#id值{ }来表示 </p>
</body>
</html>.text{
font-variant:small-caps;/*小型大写字母*/
font-family:宋体,黑体;
font-style:italic;
text-transform:lowercase;
font-size:35px;
text-indent:3em;
text-decoration:overline;
}
#textp1{
font-weight:bold;
letter-spacing: 1px;
line-height:3em;
font-variant:small-caps;
text-align:right;
}5 darzustellen. Enthält Selektoren (nachkommende Selektoren: können sich überspannen Generierung, Cross-Tag): Enthält ein weiteres Tag in einem Tag
second.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>包含选择器</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="text" id="textp1"> <a href="#" class="link">ID选择器</a>
(为每一个html标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
----CSS中用#id值{ }来表示 </p>
</body>
</html>p a{
text-decoration:none;
font-size:25px;
background-color:pink;
}
.text{
font-size:21px;
font-style:normal;
text-transform:lowercase;
text-indent:3em;
font-weight:bold;
letter-spacing:0.7em;
line-height:27px;
}second.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="text" id="textp1">
<a href="#" class="link">子选择器</a>
（IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示
</p>
</body>
</html>second.css
p>a{
text-decoration:none;
font-family:黑体，宋体;
}
p{
font-size: 23px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相邻选择器</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="text" >
子选择器:
（IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示
</p>
<p class="text1">
相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示 </p>
</body>
</html>.text+.text1{
color:pink;
background-color:gray;
font-size:34px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="text" >
子选择器:
（IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示
</p>
<p class="text1">
并集选择器:多个标签一起设置样式，用逗号隔开 </p>
</body>
</html>
.text,.text1{
color:pink;
background-color:gray;
font-size:34px;}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<a href="" class="a1">伪类</a>
</body>
</html>a:link {
color:blue;
font-size:53px;
text-decoration: none;
}
a:visited {
color:red;
font-size:193px;
}
a:hover {
color:green;
font-size:73px;
}
a:active {
color:gray;
font-size:183px;
}Häufig verwendete sind (first-letter [wirkt auf den ersten Buchstaben des Textes], first-line [wirkt auf die erste Textzeile])
second.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪类</title>
<link href="second.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>伪元素(某个对象中某个元素的状态)CSS中用标签名：
伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
<br>伪元素(某个对象中某个元素的状态)CSS中用标签名：
伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行]) </p>
</body>
</html>p:first-letter{
font-size:200%;
}
p:first-line{
color:red;
}CSS-Klassenselektor und ID-Selektor
CSS-Nachkommenselektor und Mehrklassenselektor
CSS-Tag-Selektor, ID-Selektor, Klassenselektor-Instanz
Das obige ist der detaillierte Inhalt vonWas sind die CSS-Selektoren? Zusammenfassung der Verwendung von CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
