|
|
@@ -0,0 +1,160 @@
|
|
|
+<!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>
|
|
|
+ /* 1.标签选择器 */
|
|
|
+ /* div {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #00f;
|
|
|
+ } */
|
|
|
+ /* 2.id选择器 */
|
|
|
+ #one {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ /* 3.类选择器 */
|
|
|
+ .two {
|
|
|
+ color: blueviolet;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ /* 4.包含选择器 后代选择器 */
|
|
|
+ ul li {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ /* 4.伪类选择器
|
|
|
+ :first-child 第一个子类
|
|
|
+ :last-child 最后一个子类
|
|
|
+ :nth-child(n) 第n个子类
|
|
|
+ even 偶数 2n
|
|
|
+ odd 奇数 2n+1
|
|
|
+ :hover 滑过
|
|
|
+ */
|
|
|
+ ul li:first-child {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ ul li:last-child {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ ul li:nth-child(2n + 1) {
|
|
|
+ color: pink;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ ul li a {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ /* ul li a:hover {
|
|
|
+ color: red;
|
|
|
+ } */
|
|
|
+ ul li:hover {
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ ul li:hover a {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ /* 5.子类选择器 */
|
|
|
+ p > span {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .aaa > #bb {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ /* 6.属性选择器
|
|
|
+ 标签名[属性名='属性值'] {}
|
|
|
+ */
|
|
|
+ img[alt="www"] {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 7.伪元素选择器
|
|
|
+ ::before ::after
|
|
|
+ 一定是搭配着content使用
|
|
|
+ ::after与:after有什么区别?
|
|
|
+ css3 css2 语法区别
|
|
|
+ */
|
|
|
+ #news {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: purple !important;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ #news::after {
|
|
|
+ content: "哈哈哈哈";
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ #news::before {
|
|
|
+ content: "哈哈哈哈";
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ #new {
|
|
|
+ width: 400px;
|
|
|
+ height: 600px;
|
|
|
+ background: #fff;
|
|
|
+ border: 2px solid #f00;
|
|
|
+ }
|
|
|
+ /* 8.相邻选择器 + 修改的是后一个选择器的样子 */
|
|
|
+ /* #new h1 + h2 {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ #new h1 + h3 {
|
|
|
+ color: plum;
|
|
|
+ } */
|
|
|
+ /* 9.~ 兄弟选择器 修改的是后一个选择器的样子 */
|
|
|
+ #new h1 ~ h2 {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ #new h1 ~ h5 {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ #new h1 ~ h1 {
|
|
|
+ color: blue;
|
|
|
+ }
|
|
|
+ /* 10.* 通配符选择器 匹配全局 */
|
|
|
+ * {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div></div>
|
|
|
+ <p id="one">你好</p>
|
|
|
+ <div class="two">哈哈</div>
|
|
|
+ <ul>
|
|
|
+ <li><a href="">哈哈</a></li>
|
|
|
+ <li><a href="">哈哈</a></li>
|
|
|
+ <li><a href="">哈哈</a></li>
|
|
|
+ <li><a href="">哈哈</a></li>
|
|
|
+ <li><a href="">哈哈</a></li>
|
|
|
+ <li><a href="">哈哈</a></li>
|
|
|
+ <li><a href="">哈哈</a></li>
|
|
|
+ </ul>
|
|
|
+ <a href="">你好</a>
|
|
|
+ <p>
|
|
|
+ <span> 哈哈哈哈 </span>
|
|
|
+ </p>
|
|
|
+ <div class="aaa">
|
|
|
+ <h1 id="bb">哈哈哈哈p</h1>
|
|
|
+ </div>
|
|
|
+ <img src="../day2/img01.gif" alt="" />
|
|
|
+ <img src="../day2/img01.gif" alt="www" />
|
|
|
+ <p id="news">今天天气真好</p>
|
|
|
+ <div id="new">
|
|
|
+ <h1>哈哈哈哈1</h1>
|
|
|
+ <h2>哈哈哈哈2</h2>
|
|
|
+ <h3>哈哈哈哈3</h3>
|
|
|
+ <h4>哈哈哈哈4</h4>
|
|
|
+ <h5>哈哈哈哈5</h5>
|
|
|
+ <h6>哈哈哈哈6</h6>
|
|
|
+ <h1><span> 哈哈哈哈1 </span><span> 哈哈哈哈1 </span></h1>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+</html>
|
e