简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css选择器的简述和使用
Blogger Information
Blog 40
fans 0
comment 1
visits 34251
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
css选择器的简述和使用
景云
Original
697 people have browsed it

  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>CSS基础学习</title>
  7.     <!-- 
  8.         css的引入方式二:内嵌式 
  9.         通过style标签引入的css规则，仅适用于当前html页面
  10.     -->
  11.     <style>
  12.         /* 标签选择器 */
  13.         p{
  14.             color:aqua;
  15.         }
  16.         #p{
  17.             color: bisque;
  18.         }
  19.         /* 上下文选择器：1、空格：所有层级；2：>：父子级；3：+:相邻的兄弟；4：~：相邻后面所有的兄弟 */
  20.         /* 后代选择器：所有层级 */
  21.         ul li{
  22.             background-color: red;
  23.         }
  24.         /* 子代选择器：仅父子层级 */
  25.         body>ul>li{
  26.             background-color: blue;
  27.         }
  28.         /* 同级相邻选择器：仅选中与之相邻的第一个兄弟元素 */
  29.         /* .item1+*{ */
  30.         .item1+li{
  31.             background-color: green;
  32.         }
  33.         /* 同级所有选择器：选中与之相邻的后面所以兄弟元素 */
  34.         .item2 ~li{
  35.             background-color: black;
  36.         }
  38.         /* 伪类选择器 */
  39.         /* 1.匹配任意位置的元素：`:nth-of-type(an+b)`
  40.             an:起点；b：偏移量；a b=0,1,2,3... ;  
  41.             0n+b可只写b，因为0乘任何数都是0，例如  ol li:nth-of-type(2)代表第二个元素
  42.             1n代表全部元素，1可以省略，因为1乘以任何数都是本身，1n+b代表从第三个元素开始的全部元素，
  43.             2n+3代表从第三个元素开始偏移，之后每再加2的元素都会被选中；就是3，5，7...
  44.             3n+2跟上面一样类推。
  45.         */
  46.         /* ol li:nth-of-type(2n+3){
  47.             background-color: red;
  48.         } */
  49.         /* 2.反向获取任意位置元素`:nth-last-of-type()`
  50.             规律如正相匹配一致
  51.         */
  52.         /* ol li:nth-last-of-type(-1n+3){
  53.             background-color: burlywood;
  54.         } */
  55.         /* 3.选择所有索引为奇数的元素 
  56.         odd也可以
  57.         ol li:nth-of-type(2n+1)也可以。
  58.         */
  59.         /* ol li:nth-of-type(2n-1){
  60.             background-color: chocolate;
  61.         } */
  62.         /* 4.选择所有索引为偶数的元素 
  63.         也可用2n+1*/
  64.         ol li:nth-of-type(even){
  65.             background-color: cornsilk;
  66.         }
  67.     </style>
  68.     <!-- 
  69.         css的引入方式三:外链式 
  70.         使用link标签引入外部公共样式表
  71.     -->
  72.     <link rel="stylesheet" href="style.css">
  73. </head>
  74. <body>
  75.     <!-- 要求：1. 实例演示css规则的三种引入到html文档中的方式; 2. 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器 -->
  76.     <!-- 
  77.         css的引入方式一：行内式 
  78.         规则仅对当前行有效
  79.     -->
  80.     <h3>1.CSS的引入方式</h3>
  81.     <p style="color:red;">css引入方式一</p>
  82.     <p>css引入方式二</p>
  83.     <p class="p">css引入方式三+class选择器</p>
  84.     <p id="p">id选择器</p>
  85.     <h3>2.上下文选择器</h3>
  86.     <ul>
  87.         <li class="item1">item1</li>
  88.         <li class="item2">item2</li>
  89.         <li>item3</li>
  90.         <li>item4
  91.             <ul>
  92.                 <li>item4-1</li>
  93.                 <li>item4-2</li>
  94.                 <li>item4-3</li>
  95.             </ul>
  96.         </li>
  97.         <li>item5</li>
  98.     </ul>
  99.     <h3>3.伪类选择器：结构伪类相关；难点重点</h3>
  100.     <ol>
  101.         <li>itemo-1</li>
  102.         <li>itemo-2</li>
  103.         <li>itemo-3</li>
  104.         <li>itemo-4</li>
  105.         <li>itemo-5</li>
  106.         <li>itemo-6</li>
  107.         <li>itemo-7</li>
  108.         <li>itemo-8</li>
  109.     </ol>
  110.     <ol>
  111.         <li>ol2-li</li>
  112.     </ol>
  113. </body>
  114. </html>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！