简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基本选择器以及上下文选择器使用示例
Blogger Information
Blog 9
fans 0
comment 0
visits 3869
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
539 people have browsed it

css基本选择器以及上下文选择器使用示例

1. 元素样式来源

  1. 预定义(浏览器默认的)
  2. 自定义(用户自己写的)
  3. 继承样式(简化,例如字体,字号,前景色)

2. 自定义样式类型

  1. 行内样式：ele.style,当前元素
  2. 文档样式：<style>,当前文档
  3. 外部样式：xxx.css,引用它的文档

优先级：
行内样式 > 文档样式 > 外部样式。
important 最高优先级

3. 选择器

根据元素的基本特征，定位元素
元素 = 标签 + 属性

3.1 基本选择器

  1. 标签选择器
  2. 属性选择器
    例子：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <h1>hello world</h1>
  11.     <h1 class="site">php中文网</h1>
  12.     <h1 class="active">晚上好</h1>
  13.     <style>
  14.       /* 标签选择器 */
  15.       h1 {
  16.         color: red;
  17.       }
  18.       /* 属性选择器 */
  19.       h1[class="site"] {
  20.         color: green;
  21.       }
  22.       h1[id="active"] {
  23.         color: red;
  24.       }
  25.     </style>
  26.   </body>
  27. </html>

3.2 上下文选择器

通过元素的位置与层级来匹配。
上下文选择器,一定要有一个查询入口,否则会递归查询

  1. 父子：>（仅限父子）
  • 代码演示
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <ul>
  15.         <li class="item">item-1</li>
  16.         <li class="item">item-2</li>
  17.         <li class="item">item-3</li>
  18.         <li class="item">item-4</li>
  19.         <li class="item">item-5</li>
  20.       </ul>
  21.       <li class="item">item4</li>
  22.       <li class="item">item5</li>
  23.       <li class="item">item6</li>
  24.       <li class="item">item7</li>
  25.     </ul>
  26.     <style>
  27.       .list > .item {
  28.         border: solid 1px red;
  29.       }
  30.     </style>
  31.   </body>
  32. </html>
  • 效果图

    从运行效果可以看出，虽然 class 名称相同，但父子元素选择器值针对直接后代元素有用，次后代无效果。
  1. 后代：空格（后级所有元素，包括子集，孙子，重孙……）

    接父子选择器例子，简单修改，去掉 > 符号，所有具有相同class名称的样式都将改变。

  • 代码演示
    1. .list .item {
    2.   border: solid 1px red;
    3. }
  • 效果图

    具有通用样式的后代元素，使用此选择器更加方便灵活。
  1. 兄弟：+（相邻的下一个元素，紧跟的且只有一个）

    例子：有三个div元素，使用兄弟元素选择器，快速改变中间div的样式。

  • 代码演示

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.   </head>
    9.   <body>
    10.     <div class="wrap">
    11.       <div class="demo one">
    12.         <p>我是第1个元素</p>
    13.       </div>
    14.       <div class="demo">
    15.         <p>我是第2个元素</p>
    16.       </div>
    17.       <div class="demo">
    18.         <p>我是第3个元素</p>
    19.       </div>
    20.     </div>
    21.     <style>
    22.       .wrap > .demo {
    23.         display: inline-block;
    24.         width: 100px;
    25.         height: 200px;
    26.         border: solid red 1px;
    27.       }
    28.       /* 通过兄弟选择器改变中间div样式 */
    29.       .wrap > .demo.one + * {
    30.         width: 300px;
    31.         color: green;
    32.       }
    33.     </style>
    34.   </body>
    35. </html>

  • 运行效果

  1. 同级：~（与当前元素同级的后面的全部元素）

    使用兄弟选择器例子代码，将 + 换成 ~，改变排除第一个元素后的，所有同级元素样式。

  • 代码演示

    1. .wrap > .demo.one ~ * {
    2.   width: 300px;
    3.   color: green;
    4. }
  • 运行效果
Correcting teacher：PHPzPHPz

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！