标签、类、ID选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8.     <style>
  9. /* 标签选择器 */
  10.         h3{
  11.             color: blue;
  12.         }
  13. /* class类选择器可以应用多个语句 */
  14.         .red{
  15.             color: red;
  16.         }
  17. /* ID选择器只能应用一个语句 */
  18.         #sp{
  19.             color: springgreen;
  20.         }
  21.     </style>
  22. <body>
  23. <!-- 标签选择器调用 -->
  24.     <h3>hello</h3>
  25. <!-- 类选择器调用 -->
  26.     <span class="red">你好么</span>
  27.     <h3 class="red">你好么</h3>
  28. <!-- ID选择器调用 -->
  29.     <span id="sp">word</span>
  30. </body>
  31. </html>

后代选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         /* 后代选择器 */
  9.         div span{
  10.             color: tomato;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <!-- + 代表兄弟元素 比如：h2+span -->
  16.     <div>
  17.         <h2>我喜欢的：</h2>
  18.         <span>西瓜</span>
  19.         <span>龙眼</span>
  20.         <span>橙子</span>
  21.     </div>
  22.     <h2>我不喜欢的：</h2>
  23.     <span>榴莲</span>
  24.     <span>臭豆腐</span>
  25. </body>
  26. </html>

子代选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         /* 子代选择器 */
  9.         .fount>span{
  10.             color: tomato;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <!-- + 代表兄弟元素 比如：h2+span -->
  16.     <div class="fount">
  17.         <h2>我喜欢的：</h2>
  18.         <span>西瓜</span>
  19.         <span>龙眼</span>
  20.         <span>橙子</span>
  21.         <!-- div的孙子辈 -->
  22.         <p>
  23.             <span>其实最喜欢香蕉</span>
  24.         </p>
  25.     </div>
  26.     <h2>我不喜欢的：</h2>
  27.     <span>榴莲</span>
  28.     <span>臭豆腐</span>
  29. </body>
  30. </html>

交集选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         /* 交集选择器 */
  9.         span.red{
  10.             color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <!-- span.red 定义span里面的class为red span#red 定义span里面的ID为red -->
  16.     <span class="red">hongse</span>
  17.     <span class="red">hongse</span>
  18.     <span class="red">hongse</span>
  19.     <div class="red">hongse</div>
  20.     <div class="red">hongse</div>
  21.     <div class="red">hongse</div>
  22. </body>
  23. </html>

并集选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.     /* 并集选择器用,连接元素 */
  9.         div,span,p{
  10.             color: green ;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div>绿色</div>
  16.     <span>绿色</span>
  17.     <p>绿色</p>
  18. </body>
  19. </html>

连接伪类选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         /* 
  9.         1. 连接没有被访问过 link
  10.         2. 连接被访问过 visited
  11.         3. 鼠标移动到连接上 hover
  12.         4. 鼠标按下不松开 active
  13.          */
  14.         a:link{
  15.             color: blue;
  16.         }
  17.         a:visited{
  18.             color: blue;
  19.         }
  20.         a:hover{
  21.             color: blueviolet;
  22.         }
  23.         a:active{
  24.             color: black;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <a href="http://www.baidu.com">百度一下</a>
  30. </body>
  31. </html>