css基本选择器
选择器仅出现在 文档内嵌样式表 或者 外部样式表 中
主要分为以下六种选择器
- 选择所有元素
- 根据类型选择元素
- 根据类选择元素
- 根据id选择元素
- 根据属性选择元素
- 其他选择器（比如 ”:“冒号选择器-选择器动作）
1.选择所有元素
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin SelectAllCSS_Test</title>
<style type="text/css">
/* 选择所有元素 */
*{
font-size:40px;
color:#345cff;
}
</style>
</head>
<body>
<a>MelanceXin </a>
<p>MelanceXin </p>
<h1>MelanceXin </h1>
<!-- h1自带一个加粗效果 -->
</body>
</html>
2.根据类型选择元素
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin SelectByTypeCSS_Test</title>
<style type="text/css">
/* 根据类型设置样式 */
a {
font-size: 40px;
color: #345cff;
}
p {
font-size: 30px;
color: #60fa60;
}
</style>
</head>
<body>
<a>MelanceXin </a>
<p>MelanceXin </p>
<h1>MelanceXin </h1>
<!-- h1自带一个加粗效果 -->
</body>
</html>
3.根据类选择元素
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin SelectByClassCSS_Test</title>
<style type="text/css">
/* 根据类设置样式 */
.class1 {
font-size: 50px;
color: #fff31a;
}
</style>
</head>
<body>
<a class="class1">MelanceXin </a>
<!-- class 是一个全局属性，而且基本上所有元素都是有class属性 -->
<a>MelanceXin </a>
<p>MelanceXin </p>
</body>
</html>
4.根据id选择元素
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin SelectByIDCSS_Test</title>
<style type="text/css">
/* 根据ID设置样式 */
#id1 {
font-size: 30px;
color: #3db8e9;
}
/* 根据类设置样式 */
.class1 {
font-size: 50px;
color: #fff31a;
}
</style>
</head>
<body>
<a id="id1">MelanceXin </a>
<!-- ID也是一个全局属性，包括 body标签都拥有id这一属性 -->
<a class="class1">MelanceXin </a>
<!-- class 是一个全局属性，而且基本上所有元素都是有class属性 -->
<a>MelanceXin </a>
</body>
</html>
ID选择器 和 类选择器 的区别：
- 共同点：都可以用作选择器使用，改变该属性外面的元素的样式。
- 不同点：ID选择器叫做唯一选择器，通俗点说就是这个元素的一个身份证，或者说是主键。
即在网页内或者网页内嵌网页中此ID属性的属性值确保只出现过一次，不能重复使用！
（但即使两个id属性值一样也可以正常使用，但不符合id选择器定义时的规范）
类选择器的属性值可以多次使用，相当于将不同元素如果想要表达出同一效果而进行的分门别类。
5.根据属性选择元素
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin SelectByAttributeCSS_Test</title>
<style type="text/css">
/* 根据属性设置样式 */
[href="SelectByClassCSS.html"] {
font-size:80px;
color:#ffad2a;
}
[href="SelectByIDCSS.html"] {
font-size:30px;
color:#ff4190;
}
</style>
</head>
<body>
<a href="SelectByClassCSS.html">MelanceXin </a>
<a href="SelectByIDCSS.html">MelanceXin </a>
<a >MelanceXin </a>
</body>
</html>
6.":"冒号选择器-选择器动作
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin SelectByActionCSS_Test</title>
<style type="text/css">
a {
font-size:40px;
color:#ffad2a;
}
/* 根据动作设置样式 */
a:hover{
/* 鼠标移到文本上的效果 */
font-size:80px;
color:#66bfe2;
}
</style>
</head>
<body>
<a href="SelectByClassCSS.html">MelanceXin </a>
<a href="SelectByIDCSS.html">MelanceXin </a>
<a >MelanceXin </a>
<h1>MelanceXin </h1>
</body>
</html>