Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1215 css的三种引入方式 + 选择器
Blogger Information
Blog 13
fans 0
comment 0
visits 8371
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
592 people have browsed it

CSS的三种引入方式

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>三种引入方式</title>
  6. <!--1. 通过style标签嵌入到html文档中用link标签和@import两种-->
  7.     <link rel="stylesheet" href="style.css" />
  8. <!--2. 通过style标签嵌入到html文档中-->
  9.     <style>
  10.       @import url(style.css);
  11.       p{
  12.         color:red;
  13.        }
  14.     </style>
  15.   </head>
  16.   <body>
  17.   <!--3. 在元素标签内通过style属性直接定义样式-->
  18.   <p>行内样式</p>
  19.   </body>
  20. </html>

id class 标签 属性 上下文 结构伪类选择器

  2. <!--上下文选择器： 1.空格：所有层级 2.> ：父子级 3.+ ：相邻的兄弟后面一个 4.~ ：所有相邻兄弟（后面）-->
  4.     <style>
  5.       /* 标签,类,ID,属性选择器 */
  6.       p {
  7.         color: blue;
  8.       }
  9.       .p {
  10.         color: #555;
  11.       }
  12.       #P {
  13.         color: coral;
  14.       }
  15.       div[name="div"] {
  16.         font-size: 20px;
  17.       }
  18.       /* 上下文选择器 */
  19.       /* 后代 */
  20.       ul li {
  21.         color: yellow;
  22.       }
  23.       /* 子元素 */
  24.       ul > p {
  25.         color: black;
  26.         font-size: 18px;
  27.       }
  28.       /* 同级相邻 */
  29.       .one + li {
  30.         color: darkred;
  31.       }
  32.       /* 同级后面所有元素 */
  33.       .two ~ li {
  34.         color: red;
  35.         font-size: 12px;
  36.       }
  37.     </style>
  1.     <!-- 标签选择 -->
  2.     <p>这是一段文字</p>
  3.     <!-- 类选择 -->
  4.     <p class="p">这是一段文字</p>
  5.     <!-- ID选择 -->
  6.     <div id="P">这是一段文字</div>
  7.     <!-- 属性选择 -->
  8.     <div name="div">这是一段文字</div>
  9.     <!-- 上下文选择 -->
  10.     <!--上下文选择器有4种:1.后代选择 2.子元素选择 3.同级相邻 4.同级所有-->
  11.     <ul>
  12.       <p>这是一段文字</p>
  13.       <li class="one">这是一段文字</li>
  14.       <li class="two">这是一段文字</li>
  15.       <li>这是一段文字</li>
  16.       <li>这是一段文字</li>
  17.       <li>这是一段文字</li>
  18.     </ul>

重点的伪类选择器

  1.       <style>
  2.       /* 匹配任意位置元素 */
  3.       /* ul li:nth-of-type(an+b)  a是启点,从0开始,n是一个循环数从0开始++, b是偏移量, 三者关系是a*n+b,一直循环找到所有 */
  4.       ul li:nth-of-type(2n) {
  5.         color: red;
  6.       }
  7.       /* 反向获取 */
  8.       ul li:nth-last-of-type(-n+3){
  9.         color: blue;
  10.       }
  11.       /* 几个语法糖 */
  12.       /* 偶数 */
  13.       ul li:nth-of-type(even) {
  14.         color: yellow;
  15.       }
  16.       /* 奇数 */
  17.       ul li:nth-of-type(odd) {
  18.         color: black;
  19.       }
  20.       /* 第一个 */
  21.       ul li:first-of-type {
  22.         color: #585858;
  23.       }
  24.       /* 最后一个 */
  25.       ul li:last-of-type {
  26.         color: #000;
  27.       }
  28.     </style>
  1.     <ul>
  2.       <li>这是一段文字</li>
  3.       <li>这是一段文字</li>
  4.       <li>这是一段文字</li>
  5.       <li>这是一段文字</li>
  6.       <li>这是一段文字</li>
  7.       <li>这是一段文字</li>
  8.     </ul>
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