|
|
@@ -0,0 +1,165 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* 通配符选择器 匹配全局样式 */
|
|
|
+ * {
|
|
|
+ cursor: pointer;
|
|
|
+ list-style: none;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ /* 标签选择器
|
|
|
+ 格式：标签名称{...}
|
|
|
+ */
|
|
|
+ div {
|
|
|
+ width: 500px;
|
|
|
+ height: 500px;
|
|
|
+ background: purple;
|
|
|
+ /* color: aqua; */
|
|
|
+ text-align: center;
|
|
|
+ /* line-height: 200px; */
|
|
|
+ }
|
|
|
+ div p {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ id选择器：
|
|
|
+ 在body标签中：<标签 id="名字1"></标签>
|
|
|
+ 在样式表中：#名字1：{....}
|
|
|
+ */
|
|
|
+ #other {
|
|
|
+ color: #0f0 !important;
|
|
|
+ }
|
|
|
+ #other {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 类选择器：
|
|
|
+ 在body标签中：<标签 class="名字1"></标签>
|
|
|
+ 在样式表中：.名字1：{....}
|
|
|
+ */
|
|
|
+ .vase {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ /* 后代选择器/包含选择器 */
|
|
|
+ div ul {
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ div ul li {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 伪类选择器
|
|
|
+ :hover 鼠标滑过效果
|
|
|
+ :nth-child() 自定义子元素
|
|
|
+ odd 2n+1 奇数项
|
|
|
+ even 2n 偶数项
|
|
|
+ :first-child 第一个子元素
|
|
|
+ :last-child 最后一个子元素
|
|
|
+ */
|
|
|
+ div ul li:hover {
|
|
|
+ color: #fff;
|
|
|
+ /* 鼠标变小手 */
|
|
|
+ /* cursor: pointer; */
|
|
|
+ }
|
|
|
+ div ul li:nth-child(odd) {
|
|
|
+ color: #0f0;
|
|
|
+ }
|
|
|
+ div p:nth-child(3) {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ div ul li:last-child {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ div ul li:first-child {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ .news {
|
|
|
+ width: 100%;
|
|
|
+ /* auto 自适应 */
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ /* 群组选择器：由逗号隔开 */
|
|
|
+ .news span,
|
|
|
+ i,
|
|
|
+ b {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 600px;
|
|
|
+ height: 600px;
|
|
|
+ background: #00f;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /* 相邻选择器 由+连接 改变的是加号后的标签 */
|
|
|
+ .main h2+h3 {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ .main h1~.aaa {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ /* 兄弟选择器 用~连接 */
|
|
|
+ .aaa {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ /* 伪元素选择器
|
|
|
+ 前 ::before {
|
|
|
+ content:""
|
|
|
+ }
|
|
|
+
|
|
|
+ 后 ::after {
|
|
|
+ content:""
|
|
|
+ }
|
|
|
+
|
|
|
+ */
|
|
|
+ .word::before {
|
|
|
+ content: "明天下大雪";
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ .word::after {
|
|
|
+ content: "在家吃火锅 你们上早八";
|
|
|
+ color: #0f0;
|
|
|
+ }
|
|
|
+ /* 子类选择器 用>连接 */
|
|
|
+ .main>p {
|
|
|
+ color: orange;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div>
|
|
|
+ <p>这是第一个选择器</p>
|
|
|
+ <p id="other">这是第一个选择器2</p>
|
|
|
+ <p class="vase">这是第一个选择器</p>
|
|
|
+ <ul>
|
|
|
+ <li>无序列表1</li>
|
|
|
+ <li>无序列表2</li>
|
|
|
+ <li>无序列表3</li>
|
|
|
+ <li>无序列表4</li>
|
|
|
+ <li>无序列表5</li>
|
|
|
+ <li>无序列表6</li>
|
|
|
+ </ul>
|
|
|
+ <div class="news">
|
|
|
+ <span> 我的名字 </span>
|
|
|
+ <b>叫</b>
|
|
|
+ <i>图图</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <h1>我家住在翻斗花园</h1>
|
|
|
+ <h2>我上翻斗幼儿园</h2>
|
|
|
+ <h3>喜羊羊</h3>
|
|
|
+ <h4>哆啦A梦</h4>
|
|
|
+ <h5>海绵宝宝</h5>
|
|
|
+ <div class="aaa">
|
|
|
+ 4444444
|
|
|
+ <h5>33333</h5>
|
|
|
+ </div>
|
|
|
+ <p class="word">这是一段新文字</p>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+</html>
|
e