1. 元素选择器（类型选择器或标记选择器）：声明哪些元素采用css样式
2. 类选择器（class）：应用样式而不考虑具体设计的元素，为了将类选择器的样式与元素进行关联，必须将元素中的class属性指定一个适当的值。
class 选择器在html中以class属性表示, 在 css 中，类选择器以一个点”.”号显示。也可以指定特定的html元素使用class。
在html中，一个class属性还可能包含多个属性值，各个值之间用空格分隔，表示将多类应用到同一个标记中。可以使用多次，表示类别。
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>document</title> <style type="text/css"> /*class 选择器用于描述一组元素的样式*/ /*所有的 p 元素使用 class="special" */ p.special{ color: red; } </style></head><body> <h1 class="special">应用类属性</h1> <p class="special"> 应用段落</p></body></html>3. id选择器（id）：
id 选择器可以为标有特定 id 的 html 元素指定特定的样式。
html元素以id属性来设置id选择器,css 中 id 选择器以 “#” 来定义。
不同与类选择器，id选择器不能组合使用，不容许有空格分隔的多个值，仅仅使用一次。
#red {color:red;}<p id="red">这个段落是红色。</p>4.组合选择器：
多个选择器（元素选择器、类选择器、id选择器等）通过逗号连接。
样式一样的可以进行组合。
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>html5语义化</title> <style type="text/css"> header, ction, footer, aside, nav, article, fi小龙虾怎么做好吃gure { display: block; } nav,header,p,article{ width: 1200px; margin:0 auto; }
ul{ height:40px; background-color: #fff; list-style: none; display: inline-block; width: 1200px; padding: 0px; } li{ line-height: 40px; text-align: center; float: left; width: 400px; margin:0 auto; } li:hover{ background: pink; } a{ text-decoration: none; } .post{ border:1px dashed #000; padding: 0 0 20px 20px; margin-bottom: 40px; padding-top: 10px; background-color: #fff; } #content{ border:1px solid #ccc; padding:30px 40px; background-color: rgb(247,244,255); margin-top: 20px; } </style></head><body> <!-- 放在body中，这个页面的相关信息 --> <aside style="background-color: rgb(244,247,255)"> <h4 style="padding-top: 20px;padding-left: 20px;">页面导航</h4> <nav> <ul> <li><a href="#">查看相关内容</a></li> <li><a href="#">返回首页</a></li> <li><a href="#"音标学习软件>返回本页</a></li> </ul> </nav> </aside> <!-- <article> 标签定义独立的内容部分 --> <article id="content"> <!-- <header>元素主要用于定义内容的介绍展示区域：引导、导航. --> <!-- 帖子的头部 --> <header> <h1>马上要去工作了，也不知道会怎么样</h1>电荷量; <div>作者，初级码农</div> <p><time datetime="2020-03-15"></time></p> </header> <p>培训的，大概培训了半年，js、jquery、bootstrap、angular、vue、ajax、数据库、php、面向对象、web服务器、移动端</p> <br><br> <!-- <ction> 标签定义文档中的节（ction、区段）。比如章节、页眉、页脚或文档中的其他部分。 --> <!-- 回复部分 --> <ction> <特色项目;!-- 每个article代表一个回复 --> <!-- <article>定义独立的内容部分 --> <article class="post"> <!-- 回复的头部 --> <header> <h4>我觉得还行</h4> <div>作者：amy</div> <p><time datetime="2020-04-01"></time></p> </header> <p>工作机会还多的，php是轻量级网站开发最好的选择</p> </article> <!-- 每个article代表一个回复 --> <!-- <article>定义独立的内容部分 --> <article class="post"> <!-- 回复的头部 --> <header> <h4>不错了</h4> <div>作者：键盘侠</div> <p><time datetime="2020-04-06"></time></p> </header> <p>学历本科、信息专业、会这么多，不会找不到的，对自己有信心一点</p> </article> </ction> <br><br> <!-- 描述了文档的底部区域 --> <!-- 一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等 --> <!-- 脚注 附加信息--> <footer> <p style="color: pink;padding-left: 40px;">我的帖子我做主</p> </footer> <br><br> <!-- <aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。 --> <!-- 文章的额外的信息 --> <aside style="padding-left: 40px;"> <h4>关于楼主</h4> <ction> <div>用户组：菜鸟初级</div> <div>阅读量：20</div> <div>发表时间：2020-03-18</div> </ction> </aside> <!-- <figcaption> 标签定义 <figure> 元素的标题. --> <!-- <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。 --> <figure> <img src="/d/file/titlepic/t013feee31537e51f3b.png" height="96px" width="96px" alt="xiangmao" /> <figcaption style="padding-left: 20px">my logo</figcaption> </figure> </article> </body></html>5.通用选择器：星号（*）
该选择器可以与任何元素进行匹配，可以对文档中的所有元素设定属性和属性值。
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>div布局</title> <style type="text/css"> /*通用选择器*/ *{margin: 0; padding: 0; border: 0; } /*id选择器*/ #header{ width: 100%; height: 80px; line-height: 80px; background-color: rgb(255,165,0); } /*id选择器*/ #main{ height:200px; } /*id选择器*/ #menu{ float: left; height:200px; width: 10%; background-color: yellow; } /*元素选择器*/ menu{ height: 200px; } /*元素选择器*/ b{ display: inline-block; margin-top: 10px; font-size: 18大一总结px; margin-left: 5px; } /*元素选择器*/ ul{ margin-left: 46px; list-style: none; margin-top: 10px; } /*后代选择器*/ ul li{ line-height: 40px; } /*id选择器*/ #content{ float: left; height:200px; background-color: pink; width: 90%; } /*后代选择器*/ #content p{ text-align: center; line-height: 200px; } /*id选择器*/ #footer{ background-color: gray; height:80px; line-height: 80px; text-align: center; } </style></head><body><div id="container"> <!-- 头部 --> <div id="header"> <h1>主要页面标题</h1> </div> <!-- 主体部分--> <div id="main"> <!-- 菜单区 --> <div id="menu"> <menu> <b>菜单</b> <ul> <li class="">html</li> <li class="">css</li> <li class="">javascript</li> </ul> </menu> </div> <!-- 内容区 --> <div id="content"> <p>内容在这里</p> </div> </div> <!-- 脚部 --> <div id="footer"> <p>版权© sjs</p> </div></div></body></html>
本文发布于:2023-04-03 17:26:31，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ba03453e7ed198af816d0ab30d96d396.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css基本选择器.doc
本文 PDF 下载地址：css基本选择器.pdf
| 留言与评论（共有 0 条评论） |
