目录
class选择器
标签选择器
父子选择器
直接选择器
并列选择器
分组选择器
选择器权重
选择器对应css写法
正确简洁编程手法（多组合）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 通过link+tab创建一个外部css文件 -->
<link rel="stylesheet" type="text/css" href="选择器.css" />
</head>
<body>
<!-- 1.id选择器 -->
<div id="only">菜单</div>
<div id="only1">目录</div>
css 部分
/* 1. */
#only{
background-color: blue;
}
<!-- 2.class选择器 -->
<div class="demo">123</div>
<div class="demo">345</div>
/* 2. */
.demo{
background-color: blueviolet;
}
<!-- 3.标签选择器 -->
<span>天玄</span>
/* 3. */
span{
background-color: burlywood;
}
<!-- 4.父子选择器 -->
<div>
<strong >我的淘宝</strong><br>
<hl >全部订单</hl><br>
<hl>收藏夹</hl><br>
<hl>购物车</h1>
</div>
快建方式：div>strong+回车
/* 4. */
div p{
background-color: cadetblue;
}
<!-- 5. -->
<div class="hhh">你好</div>
/* 5. */
div.hhh{
background-color: chartreuse;
}
<!-- 5.直接选择器 -->
<div>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>
/* 与父子选择器比较 */
/* 父子： */
div em{
background-color: greenyellow;
}
/* 将数字1,2都填上了颜色 */
/* 直接： */
div>em{
background-color: honeydew ;
}
/* 将1填上了颜色并且覆盖了父子时1的颜色 ，也就是由原来的greenyellow变成了 honeydew */
<!-- 6.并列选择器 -->
<div >1</div>
<div class="demo">2</div>
<p class="demo">3</p>
<div class="classdiv" id="iddiv">
<p class="classp" id="idp">4</p>
</div>
快建形成：div.classdiv#iddiv>p.classp#idp+回车
/* 6:并列的用法(1)*/
/*相同的‘class’，"实现让2变红 */
div.demo
/* 权重=1+10（256进制) */
{
background-color: hotpink;
}
/* div.demo的顺序不可以换 */
/*(2)： */
#iddiv p
{
background-color: rgb(82, 82, 226);
}
div #idp/* 权重=1+100（256进制） */
{
background-color: lightcoral;
}
/* 知识点：权重问题：
行间样式 1000
id选择器 100
class/属性/伪类 10
标签选择器/伪元 1
通配符(*) 0
当（1）和（2）选中同一个东西时，（2）的权重
大于（1）的，（2）的颜色会覆盖（1)的颜色。
*/
<!-- 7.分组选择器 -->
<em>1</em>
<strong>2</strong>
<div>3</div>
</body>
</html>
/* 7.分组选择器的应用 */
em,
strong,
div{
background-color: lightcoral;}
知识点：权重问题：
行间样式 1000
id选择器 100
class/属性/伪类 10
标签选择器/伪元 1
通配符(*) 0
当（1）和（2）选中同一个东西时，（2）的权重
大于（1）的，（2）的颜色会覆盖（1)的颜色。
正确简洁编程手法（多组合）
应该是先写css，再写HTML，形成多种组合。
css:
.demo{
background-color: hotpink;
}
#id{
width: 100px;/*通常width和height只要设置一个就好了*/
border-radius: 50%;
}
.leng{
background-color: lightcoral;}
html：
<div class="leng" id="id">你好呀</div>
<div class="demo" id="id">你好呀</div>
.........
css类型越多，HTML组合也越多
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
