本文介绍了主要的浏览器内核Trident、EdgeHTML、Gecko、Webkit和Chromium/Blink，以及CSS的选择器类型，包括名称选择器、ID选择器、类选择器和分组选择器的应用实例。通过实例演示了如何使用这些选择器来控制HTML元素的样式。
主要浏览器内核：Trident\MSHTML,EdgeHTML(微软），Gecko(火狐），Webkit（苹果）,Chromium/Blink（谷歌）
名称选择器:
直接是 名称{代码}
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>
ID选择器：
格式：#元素ID{代码}
- <!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>
效果展示
类选择器
格式： ( . )类名{代码} 注意：也可以在点的前面指定是什么类型的HTML元素受影响。
例如：
p.center {
text-align: center;
color: red;
}<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
</body>
</html>
分组选择器：
出现不同元素的样式设置一样的时候
h1, h2, p {
text-align: center;
color: red;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
