Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1215-css引入和选择器
Blogger Information
Blog 5
fans 0
comment 0
visits 3928
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1215-css引入和选择器
待伊散落尽芳华
Original
526 people have browsed it

1215-css引入和选择器

1. css的三种引入方式

  1. 内部样式：将css写在style标签中。仅对当前html文档有效。
  2. 外部样式：适用于所有引入css文件的html文档。使用link标签、或在style标签内容中使用@import。
  3. 行内样式：将css赋予标签的style属性。

2. css选择器

  1. 标签选择器
  1. <head>
  2. <style>
  3.     h1 {
  4.         background-color: red;
  5.     }
  6. </style>
  7. </head>
  9. <body>
  10.     <h1>标签选择器</h1>
  11. </body>
  1. 属性选择器
  1. <head>
  2. <style>
  3.     h1[class="ooo"] {
  4.         background-color: red;
  5.     }
  6.     .ooo {
  7.         background-color: red;
  8.     }
  9.     #ooo {
  10.         background-color: red;
  11.     }
  12. </style>
  13. </head>
  15. <body>
  16.     <h1 id="ooo" class="ooo">类选择器</h1>
  17. </body>
  1. 上下文选择器
  1. <head>
  2. <style>
  3.     /* 1. 后代选择器，所有层级 */
  4.     ul li{
  5.         background-color: red;
  6.     }
  7.     /* 子元素选择器：仅父子层级 */
  8.     body>ul>li {
  9.          background-color: red;
  10.     }
  11.     /* 同级相邻选择器：仅选中相邻的第一个兄弟元素 */
  12.     li+li{
  13.         background-color: red;
  14.     }
  15.     /* 同级所有选择器：选中与之相邻的后面所有的兄弟元素 */
  16.     li~li{
  17.         background-color: red;
  18.     }
  20. </style>
  21. </head>
  23. <body>
  24.     <ul>
  25.         <li>li-1</li>
  26.         <li>li-2</li>
  27.         <li>li-3</li>
  28.         <li>li-4</li>
  29.         <li>li-5
  30.             <ul>
  31.                 <li>li-1</li>
  32.                 <li>li-2</li>
  33.                 <li>li-3</li>
  34.                 <li>li-4</li>
  35.             </ul>
  36.         </li>
  37.     </ul>
  38. </body>
  1. 伪类选择器
  1. <head>
  2. <style>
  3.     /* 匹配任意位置元素： :nth-of-type(an+b)
  4.     偶数：odd
  5.     奇数：even
  6.      */
  7. ul li:nth-of-type(0n+3){
  8.     color : red;
  9. }
  11. /* 反向获取任意元素： :nth-last-of-type(an+b) */
  12. ul li:nth-last-of-type(-n+3){
  13.     color : red;
  14. }
  16. /* 选择第一个子元素： :first-of-type
  17.     选择最后一个子元素： :last-of-type
  18.  */
  19.  ul li:first-of-type{
  20.     color : red;
  21. }
  22.  ul li:last-of-type{
  23.     color : red;
  24. }
  25. /* 匹配父元素的唯一子元素： :only-of-type */
  26.  ul li:only-of-type{
  27.     color : red;
  28. }
  31. </style>
  32. </head>
  34. <body>
  35.      <ul>
  36.         <li>li-1</li>
  37.         <li>li-2</li>
  38.         <li>li-3</li>
  39.         <li>li-4</li>
  40.         <li>li-5</li>
  41.     </ul>
  42. </body>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post