Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1215（css引入、简单选择器、上下文选择器、伪类选择器）
Blogger Information
Blog 29
fans 0
comment 0
visits 19771
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引入、简单选择器、上下文选择器、伪类选择器）
手机用户1576673622
Original
549 people have browsed it

1.css引入

任何元素如果想引入到html文档中,必须要使用一个适当的标签,css也不例外

  • 引入方法：
    1.外部样式：适用于所有文档。使用：使用link标签，或者@import url();
    2.内部样式：仅适用当前文档。使用：使用style标签在文档内编写。
    3.行内样式：只对当前行起效。使用：在当前标签内用style属性直接编写。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>css的基本语法</title>
  7.     <!-- 内部样式 -->
  8.     <style>
  9.         h1 {
  10.             color: violet;
  11.             border: 1px solid #000;
  12.         }
  13.     </style>
  14.     <!-- 外部样式 -->
  15.     <link rel="stylesheet" href="">
  16. </head>
  18. <body>
  19.     <!-- 行内样式 -->
  20.     <h1 style="color: #000;">php.cn</h1>
  21. </body>
  22. </html>

2.简单选择器

  • 标签选择器
    根据元素标签名称进行匹配，返回一组。比如：
    h1 {…}
  • 类选择器
    根据元素class属性进行匹配，返回一组。比如：
    li[class:”on”] {…} 。 可简化class为“ . ”比如：li.on
  • id选择器
    根据元素id属性进行匹配,返回一个。比如：
    li[id:”foo”]。可简化id为#，比如：#foo
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>选择器1: 简单选择器</title>
  7.     <style>
  8.         /* 1. 标签选择器, 返回一组 */
  9.         li {
  10.             background-color: violet;
  11.         }
  13.         /* 2. 类选择器: 返回一组 */
  14.          .on {
  15.             background-color: violet;
  16.         } 
  18.         /* 3. id选择器: 返回一个 */
  19.         #foo {
  20.             background-color: violet;
  21.         }
  22.     </style>
  23. </head>
  25. <body>
  26.     <ul>
  27.         <li id="foo">item1</li>
  28.         <li class="on">item2</li>
  29.         <li id="foo">item3</li>
  30.         <li class="on">item4</li>
  31.         <li class="on">item5</li>
  32.     </ul>
  33. </body>
  35. </html>

3.上下文选择器

  • 后代选择器：选择标签下所有此元素。
    使用：空格。
  • 子元素选择器：只选择所有子元素，不管其他级别元素。
    使用： >
  • 同级相邻选择器：仅选中与之相邻的第一个兄弟元素。
    使用：+

  • 同级所有选择器：选择与之相邻后面的所有兄弟元素。
    使用：~

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <title>上下文选择器</title>
    4.   <style>
    6.       ul li {
    7.           background-color: lightblue;
    8.       }
    10.       body>ul>li {
    11.           background-color: teal;
    12.       }
    14.       .start+li {
    15.           background-color: lightgreen;
    16.       }
    18.       .start~li {
    19.           background-color: yellow;
    20.       }
    21.   </style>
    22. </head>
    23. <body>
    24.   <ul>
    25.       <li>item1</li>
    26.       <li class="start">item2</li>
    27.       <li>item3</li>
    28.       <li>item4
    29.           <ul>
    30.               <li>item4-1</li>
    31.               <li>item4-2</li>
    32.               <li>item4-3</li>
    33.           </ul>
    34.       </li>
    35.       <li>item5</li>
    36.   </ul>
    37. </body>

    4.伪类选择器

  • 匹配任意位置的元素：（:nth-of-type(an+b)）
    an+b: an起点,b是偏移量, n = (0,1,2,3…)
    匹配单个元素：匹配第三个li，（0n+3）可简化为（3），直接写偏移量就好。

    1.  ul li:nth-of-type(0n+3) {
    2.       background-color: violet;
    3.       }

    匹配所有元素：:nth-of-type(1n) 

    1.   ul li:nth-of-type(1n) {
    2.       background-color: violet;
    3.   }

    匹配某位元素后面所有元素：:nth-of-type(1n+某位)

    1.   ul li:nth-of-type(n+3) {
    2.       background-color: violet;
    3.   }
  • 反向获取任意位置的元素：（：nth-last-of-type(an+b)）
    1.   ul li:nth-last-of-type(-n+3) {
    2.       background-color: violet;
    3.   }
  • 选择所有为偶数的子元素：（:nth-of-type(2n)）或:nth-of-type(even)
  • 选择所有为奇数的子元素：（:nth-of-type(2n-1)）或:nth-of-type(2n+1)或:nth-of-type(odd)
  • 选取第一个元素的快捷方式：（：first-of-type）
    -选取最后一个元素的快捷方式：（:last-of-type）
  • 匹配父元素唯一子元素：（：only-of-type）
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