版权声明：出错请帮忙指出。 https://blog.csdn.net/sinat_25786399/article/details/82822180
选择器：实现css样式的基本组成部分
基本选择器
id选择器
与标签一一对应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#a1 {
color: red;
}
</style>
</head>
<body>
<!-- 选择器:实现css样式的基本组成部分 -->
<!-- id选择器
语法:
css #选择器名称
{} 表示选择器属性内容
css属性以及属性值
html 标签添加id属性,属性值为选择器名称
id:标签的身份证,必须和标签一一对应
-->
<a href="#" id="a1">百度</a>
</body>
</html>class选择器/类选择器
与标签是多对多对应，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.a1 {
color: orange;
}
.a2 {
font-size: 100px;
}
</style>
</head>
<body>
<!-- class选择器/类选择器 -->
<!--语法:
css .选择器名称
{}
属性以及属性值
html html标签添加class属性,属性值为选择器名称
class与id选择器的区别:
1,一个id选择器只能给一个标签使用
一个clas选择器可以给多个标签使用
2,一个标签只能有一个id选择器
一个标签可以有多个class选择器
-->
<a href="#" class="a1 a2">百度</a>
</body>
</html>类型选择器/html选择器/标签选择器
对指定类型的标签都起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
strong {
color: red;
}
</style>
</head>
<body>
<!-- 类型选择器/html选择器/标签选择器 -->
<!--语法:
css 选择器名称是HTML中的标签名称
html 不用添加特殊内容
作用: 对指定的所有HTML标签,起css样式作用
-->
<strong>北京</strong>
<strong>北京</strong>
<strong>北京</strong>
<strong>北京</strong>
</body>
</html>* 通配选择器
对HTML文件中的所有标签都起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
color: green;
}
</style>
</head>
<body>
<!-- 通配选择器 -->
<!-- 语法:
css * 作为选择器名称
html 不用添加特殊内容
作用:html页面中所有的标签,都会受到选择器样式效果影响
-->
<a href="#">百度</a>
<strong>上海</strong>
<h1>重庆</h1>
<em>广州</em>
<del>天津</del>
</body>
</html>基本选择器的优先级
id选择器 > class选择器 > 类型选择器 > 通配选择器
三种基本语法的优先级
1,内联/行内样式,优先级最高
id选择器 > class选择器 > 类型选择器 > 通配选择器.选择器的作用范围越大,优先级就越小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
color: red;
}
a {
color: yellow;
}
.a1 {
color: green;
}
#a1 {
color: pink;
}
</style>
</head>
<body>
<!-- 优先级 -->
<!-- 同一个标签,被不同的选择器指定,css的属性相同,但是属性值不同,会造成优先级问题 -->
<!-- 四项基本选择器的优先级: -->
<!-- id选择器 > class选择器 > 类型选择器 > 通配选择器 -->
<!-- 选择器的作用范围越大,优先级就越小 -->
<a href="#" class="a1" id="a1">百度</a>
</body>
</html>2.内部样式,外部样式的优先级
选择器的类型不同:按照选择器的基本优先级id > class > 类型 > 通配.
选择器类型相同:link标签和style标签,谁的位置在后,显示谁的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#a_nei {
color: green;
}
.a_nei {
color: yellow;
}
</style>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<!-- 三种基本语法的优先级 -->
<!-- 内联样式 内部样式 外部样式 -->
<!-- 1,内联样式优先级最高 -->
<a href="#" style="color:red;" id="a_wai">百度</a>
<!-- 2,内部样式和外部样式比较优先级
(1),内部样式和外部样式中的选择器不同,按照选择器的基本优先级来决定显示效果
-->
<hr>
<a href="#" id="a_wai" class="a_nei">搜狐1</a>
<a href="#" id="a_nei" class="a_wai">搜狐2</a>
<!-- (2), 内部样式,外部样式,选择器类型相同,看link标签和style标签在head标签中的位置,谁在后,显示谁的效果-->
<hr>
<a href="#" class="a_wai a_nei">新浪</a>
<!-- 强调:id选择器与标签一定是一一对应的效果,一个标签绝对不允许出现一个以上的id选择器 -->
</body>
</html>
demo.css
#a_wai {
color: black;
}
.a_wai {
color: pink;
}