<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<!--HTML注释-->
<style type="text/css">
/*CSS语法必须写在<style>标签中*/
/*CSS注释*/
/* 【通用选择器】
* 1、写法： *{}
* 2、作用： 选中页面中的所有HTML标签
* 3、优先级：最低！
*/
*{
/*background-color: red;*/
}
/* 【标签选择器】
* 1、写法： HTML标签名{ }
* 2、作用： 选中所有对应的HTML标签，并修改其样式
*/
li{
color: red;
font-size: 36px;
}
/* 【类选择器 class选择器】
* 1、写法： .选择器名{}
* 2、调用： 在需要修改样式的HTML标签上，使用class="选择器名"
* 3、优先级： 当作用于同一层时，class选择器>标签选择器
*/
.list{
color: blue;
}
/* 【ID选择器】
* 1、写法： #选择器名{}
* 2、调用： 在需要修改样式的HTML标签上，使用id="选择器名"
* 3、优先级：同一层时，id选择器>class选择器
* 4、ID选择器是唯一的！同一页面严禁出现同名ID！！！
*/
#first{
color: green;
}
/* 【后代选择器】
* 1、写法： 选择器1 选择器2 …… 选择器N {}
* 2、生效规则： 选择器2必须是选择器1的【后代】……以此类推
*
* 【子代选择器】
* 1、写法： 选择器1>选择器2>……>选择器N{}
* 2、生效规则： 选择器2必须是选择器1的【直接子代】……
*/
div>ul>li{
/*background-color: yellow;*/
}
/* 【交集选择器】
* 1、写法： 选择器1选择器2……选择N{}
* 2、生效规则： 必须同时满足所有选择器，才会生效
*/
li.list#first{
background-color: yellowgreen;
}
/* 【并集选择器】
* 1、写法： 选择器1,选择器2,……,选择N{}
* 2、生效规则： 满足任意一个选择器，均可生效
*/
.list,#first{
color: darkslategray;
}
/* 【选择器命名规范】
* 1、只能有字母、数字、下划线组成；
* 2、开头不能是数字。
*/
.ul_1{
background: red;
}
/* 【选择器优先级】
* 1、就近原则：近者优先。
* 2、当作用于同一层时：可有权重计算
* 权重划分： 标签选择器 1
* class选择器 10
* id选择器 100
* 行级样式表style="" 1000
* #ul .li .li2 li{} 优先级权重121
* li .li1 .li2 .lis2 {} 优先级权重31
* #ul #li li{} 优先级201
*/
</style>
<!-- 【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用；
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表： 在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。
-->
<link rel="stylesheet" type="text/css" href="css/01css.css" />
</head>
<body>
<div>
<ul class="ul_1">
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
</div>
<ul>
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
</body>
</html>