|
|
@@ -0,0 +1,166 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>选择器</title>
|
|
|
+ <style>
|
|
|
+ /* 新的样式表会覆盖之前的样式表 */
|
|
|
+ /* 标签选择器 */
|
|
|
+ /* div {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: #00f;
|
|
|
+ } */
|
|
|
+ /* h2 {
|
|
|
+ color: #ff0;
|
|
|
+ } */
|
|
|
+ /*
|
|
|
+ id 选择器
|
|
|
+ 在body标签内的 格式:id="名字(英文)"
|
|
|
+ 在样式表里 格式:#名字{...}
|
|
|
+ */
|
|
|
+ #word {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 类选择器
|
|
|
+ 在body标签中 格式:class="名字（英文）"
|
|
|
+ 在样式表里 格式：.名字{...}
|
|
|
+ */
|
|
|
+ .main {
|
|
|
+ color: aquamarine;
|
|
|
+ }
|
|
|
+ /* 伪类选择器
|
|
|
+ :hover 划过效果
|
|
|
+ :first-child 第一个子元素
|
|
|
+ :last-child 最后一个子元素
|
|
|
+ :nth-child(数字) 自定义第几个子元素
|
|
|
+ 偶数项 even 2n
|
|
|
+ 奇数项 2n+1 odd
|
|
|
+ */
|
|
|
+ a:hover {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* span {
|
|
|
+ color: #00f;
|
|
|
+ } */
|
|
|
+ /* 包含选择器(后代选择器) */
|
|
|
+ p span {
|
|
|
+ color: rgb(48, 230, 63);
|
|
|
+ }
|
|
|
+ ul li:first-child {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ ul li:last-child {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ ul li:nth-child(odd) {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ > 子类选择器
|
|
|
+ */
|
|
|
+ p>span {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ /* 群组选择器： , */
|
|
|
+ /* p,span,h2,h3 {
|
|
|
+ color: #f00;
|
|
|
+ } */
|
|
|
+ /* 属性选择器
|
|
|
+ 格式：
|
|
|
+ 标签名字[属性="属性值"]{...}
|
|
|
+ */
|
|
|
+ img[alt="111"] {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ /* 相邻选择器 + */
|
|
|
+ /* 挨着h1的h2标签 */
|
|
|
+ /* h1+h2 {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ h2+h3 {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ h3+h3 {
|
|
|
+ color: #0ff;
|
|
|
+ }
|
|
|
+ h3+h4 {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ h4+h5 {
|
|
|
+ color: pink;
|
|
|
+ } */
|
|
|
+ /* 兄弟选择器 ~ */
|
|
|
+ h1~h3 {
|
|
|
+ color: #00f;
|
|
|
+ }
|
|
|
+ h1~h5 {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ h1~h2 {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ h5~span {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div>
|
|
|
+ 这是一个盒子
|
|
|
+ <h2>标题</h2>
|
|
|
+ </div>
|
|
|
+ <p id="word">这是一段内容这是一段内容</p>
|
|
|
+ <p class="main">一段新内容一段新内容</p>
|
|
|
+ <a href="">音乐</a>
|
|
|
+ <a href="">跳舞</a>
|
|
|
+ <a href="">书法</a>
|
|
|
+ <a href="">画画</a>
|
|
|
+ <a href="">唱歌</a>
|
|
|
+ <!-- -->
|
|
|
+ <p>
|
|
|
+ <span>新的行内元素</span>
|
|
|
+ <span>新的行内元素</span>
|
|
|
+ <span>新的行内元素</span>
|
|
|
+ <span>新的行内元素</span>
|
|
|
+ <span>新的行内元素</span>
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ </ul>
|
|
|
+ <img src="../day1/images/img01.gif" alt="111">
|
|
|
+ <h1>h1</h1>
|
|
|
+ <h2>h2</h2>
|
|
|
+ <h3>h3</h3>
|
|
|
+ <h3>h3</h3>
|
|
|
+ <h4>h4</h4>
|
|
|
+ <h5>h5</h5>
|
|
|
+ <span>span1</span>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <span>span2</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>123</p>
|
|
|
+ </div>
|
|
|
+ <span>456</span>
|
|
|
+ <h2>456</h2>
|
|
|
+ <h3>456</h3>
|
|
|
+ <span>456</span>
|
|
|
+ <span>456</span>
|
|
|
+ </body>
|
|
|
+</html>
|
e