<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第二个网站</title>
<style type="text/css">
.f ,#s qq{
color: fuchsia;
}
.first>span{
color: navajowhite;
border:2px solid aquamarine;
}
#box{
color: darkblue;
}
.h{
color: yellow;
}
ss{
font-size: 12px;
color: tan;
font-weight:bold ;
}
span{
color: royalblue;
}
a:hover{color: blanchedalmond;}
</style>
<link href="day02.css" rel="stylesheet" type="text/css" />
<!-- 外部式css样式-->
</head>
<body>
<h2>认识css样式</h2>
<ss>内联式 > 嵌入式 > 外部式</ss>
<p>hhhhhhh<span>嵌入式css</span>hhhhhhhhhhhhhhhhhhhh</p>
<p style="color: darkgoldenrod;">内联式css</p>
<p> kjhoh hio;h <p1>外部式css</p1>eee</p>
<hr />
<h2>类选择器</h2>
<p>黄g<q1 class="h">加油</q1>！！！！！！！</p>
<h2>ID选择器</h2>
<div id="box">jujihuihh</div>
<p2>类和ID选择器的区别</p2><br />
<p2>1、ID选择器只能在文档中使用一次。<br />
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。<br />
</p2>
<h2>子选择器</h2>
<p class="first">还有一个比较有用的选择器，<span>子选择器</span>用于选择指定标签元素的第一代子元素。</p>
<h2>后代选择器</h2>
<p>包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。</p>
<p>子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。</p>
<h2>通用选择器</h2>
<p>通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，</p>
<p>如：* {color:red;}</p>
<h2>伪类选择器</h2>
<p>伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，
<a >比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色</a>
a:hover{color:red;}</p>
<h2>分组选择器</h2>
<p class="f">当你想为<qq>html</qq>中多个标签元素设置同一个样式时，可以使用分组选择符（，）</p>
<p id="s">hhhhhh<qq>hhdg</qq>hhhhhhhh</p>
</body>
</html>
【前端】css样式和选择器
于 2021-05-21 18:22:59 首次发布
扫一扫
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
