<!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>标签选择器</title>
<style>
/* 选择器{} */
/* 1.标签选择器:以标签名命名的选择器 */
/* 标签选择器:选中所有的这个标签都生效css */
p{
color: brown;
}
/* 2.类选择器 */
/* 类:定义和使用才会生效 */
/* 结构:.类名 */
/* 类名可以由数字、字母、下划线、中划线组成,但不能以数字、中划线开头
一个标签可以由多个类名,类名之间用空格隔开
类名可以重复,一个类选择器可以同时选中多个标签 */
.one{
color: blue;
}
.two{
color: blueviolet;
}
.size{
font-size: 66px;
}
/* 3.id选择器 */
/* 结构:#id属性值
通过id属性值,找到页面中带有这个id属性值的标签,设置样式
1.所有标签上都有id属性;
2.id属性值类似于身份证号码,在一个页面时唯一的,不可重复
3.一个标签上只能由一个id属性值
4.一个id选择器只能选中一个标签
为了配合js,为了js不出问题,id唯一 */
#three{
color: rgb(226, 43, 168);
}
/* 4.通配符选择器 */
/* 结构:*{css属性名: 属性值;} */
/* 找到页面中所有的标签,设置样式 */
/* 1.开发中使用极少,特殊情况下才会用到
2.小页面中可能会用于去除标签默认的margin和padding */
*{
color: aqua;
}
</style>
</head>
<body>
<p class="two size">噢噢噢噢噢噢噢噢哦哦哦</p>
<p class="one">2222222222</p>
<p>555555555</p>
<div class="two">99999999</div>
<div id="three">0000000</div>
<p id="three">云边有个小卖部</p>
</body>
</html>
<!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>后代,子代选择器</title>
<style>
/* 1.后代选择器:空格 */
/* 作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
语法:选择器1 选择器2 {css}
结果:在选择器1所找到标签的后代(儿子,孙子,重孙子...)中,找到满足选择器2的标签,设置样式
注意:1.后代包括:儿子,孙子,重孙子
2.后代选择器中,选择器与选择器之前通过空格隔开 */
/* 父选择器 后代选择器 {} */
div p {
color: rgb(132, 5, 251);
}
/* 子代选择器: > */
/* 作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素
语法:选择器1>选择器2{css}
结果:选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
注意:1.子代包括:儿子
2.子代选择器中,选择器与选择器之前通过>隔开 */
div a{
color: red;
}
div>a{
color: blue;
}
p>a{
color: blueviolet;
}
</style>
</head>
<body>
<!-- <p>p标签</p>
<div>
<p>这是div的儿子p</p>
</div> -->
<div>
父级
<a href="#">div里的a</a>
<p>
<a href="#">div里的p里的a</p></a>
</p>
</div>
</body>
</html>
<!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>交集选择器</title>
<style>
/* 交集选择器:紧挨着 */
p.box{
color: aqua;
}
/* hover伪类选择器
选中鼠标悬停在元素上的状态,设置样式
语法:选择器:hover{}
伪类选择器选中的元素的某种状态
任何标签都可以添加伪类,任何一个标签都可以鼠标悬停 */
a:hover{
color: red;
background-color: aquamarine;
}
p:hover{
color: brown;
}
</style>
</head>
<body>
<!-- 找到第一个p,box类,设置文字颜色是红色 -->
<p class="box">99999999</p>
<p>77777777</p>
<div class="box">55555</div>
<br>
<br>
<a href="#">超链接</a>
<!-- emmet语法 -->
<div class="box"></div>
<div id="one"></div>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>[]
</body>
</html>
<!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>并集选择器</title>
<style>
/* 并集选择器:, */
/* 作用:同时选择多组标签,设置相同的样式
语法:选择器1,选择器2 {}
结果:找到选择器1和选择器2选中的标签,设置样式
注意:1.每组选择器之间用,隔开
2.每组选择器可以是基础选择器或者是复合选择器
3.每组选择器通常一行写一个,提高代码可读性 */
div,
p,
span,
h1{
color: aqua;
}
</style>
</head>
<body>
<div>44444</div>
<p>3333333</p>
<span>99999999</span>
<h1>000000</h1>
<h2>777777</h2>
</body>
</html>