CSS基础教程之基本选择器
CSS选择器
1、基本选择器
（1）“*”选择器：通配符
描述：将匹配所有的HTML标签，所有的标签都会改变的。
语法：*{ color:red; }
注：“*”尽量少用，因为IE6不支持。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<h1>习近平心中的互联网</h1>
<p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>（2）标签选择器
描述：将匹配指定的HTML标签。
语法：h1{ color:red; }
注：CSS标签选择器，与HTML标签的名称一样，但不能加尖括号。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>习近平心中的互联网</h1>
<p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>（3）class选择器(类选择器)——类选择器是使用频率最高的
描述：给一类HTML标签加样式。这里所指的“一类”是：每个HTML标签都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标签都有。
类选择器的名称，必须以“.”开头，后限HTML标签的class属性的值。如：.box{ color:red; }
注： HTML标签的class属性的值，不能以数字开头。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 class="NO1">习近平心中的互联网</h1>
<p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>（4）id选择器
描述：给指定id的元素添加样式。
注：
网页中HTML标签的id属性的值，必须是唯一的。
每一个HTML标签都有一个id的公共属性。
id属性一般是给JS使用的，不是让你来加样式的。class属性只能给CSS用，不能给JS用的。
id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
#NO1{
color:blue;
background-color:#88ff99;
}
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 id="NO1">习近平心中的互联网</h1>
<p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>
neue Datei
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<h1>习近平心中的互联网</h1>
<p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)