欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS的元素样式来源及选择器的使用学习

程序员文章站 2022-05-29 12:49:41
...

CSS的元素样式来源

  • 用户代理样式

    • 不为html设置任何样式时,浏览器默认样式表

  • 用户自定义样式

自定义样式 演示
行内样式 <div style="" ></div>
内部嵌入式 <style>div{}<style>
引用链接样式 <link href="style.css" >

基本选择器

css的五大选择器

  1. 通配选择器
  2. 标签选择器
  3. 类选择器
  4. ID选择器
  5. 属性选择器

1.通配选择器

匹配任何元素的通配符

    

  1.    <body>
    2. 

  2.         <div>
    3. 

  3.             <h2>Christmas tree</h2>
    4. 

  4.         </div>
    5. 

  5.     </body>
    6. 

  1.     body *{backgroud-color: gray;}

2.标签选择器

元素选择器

    

  1.    <body>
    2. 

  2.         <div>
    3. 

  3.             <h2>Christmas tree</h2>
    4. 

  4.         </div>
    5. 

  5.     </body>
    6. 

    

  1.     body {width: 100px;height: 100px;backgroud-color: gray;}
    2. 

  2.     div {position: relative;display: block;}
    3. 

  3.     h2 {font-size: 25px;font-weight: bold;}
    4.

3.类选择器

用于多个元素

    

  1. <div class="menu">
    2. 

  2.     <h2 class="menu-txt">Christmas tree</h2>
    3. 

  3. </div>
    4. 

    

  1.     .menu {position: relative;display: block;}
    2. 

  2.     .menu-txt {font-size: 25px;font-weight: bold;}
    3.

4.ID选择器

用于唯一元素

    

  1. <div id="menu">
    2. 

  2.     <h2 id="menu-txt">Christmas tree</h2>
    3. 

  3. </div>
    4. 

    

  1. #menu {position: relative;display: block;}
    2. 

  2. #menu-txt {font-size: 25px;font-weight: bold;}
    3.

5.属性选择器

简单属性选择，具体属性选择，部分属性选择， 特定属性选择

  1. <H2 title="attribute">Christmas tree</H2>
  1. h2[title="attribute"] {font-size: 25px;font-weight: bold;}

上下文选择器

  1. 后代选择器
  2. 子选择器
  3. 相邻兄弟选择器
  4. 所有兄弟选择器

1.后代选择器

    

  1. <div>
    2. 

  2.      <h2>
    3. 

  3.            Christmas tree
    4. 

  4.            <h2>Christmas tree</h2>
    5. 

  5.     </h2>
    6. 

  6. </div>
    7.

语法规则是 div 和 h2 之间有一个空格

  1. div h2{color: gray;}

2.子选择器

    

  1. <div>
    2. 

  2.  <h2>Christmas tree</h2>
    3. 

  3. </div>
    4.

子选择器只会选择某个元素的子元素，而不会扩大到任意的后代元素

  1. div > h2{color: gray;}

3.相邻兄弟选择器

    

  1. <div>
    2. 

  2.     <h2>Christmas tree<h2>
    3. 

  3.     <em>Christmas tree</em>
    4. 

  4.     <em>Christmas tree</em>
    5. 

  5. <div>
    6.

会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级

  1. h2 + em {color:gray;}

3.相邻兄弟选择器

    

  1. <div>
    2. 

  2.     <h2>Christmas tree<h2>
    3. 

  3.     <em>Christmas tree</em>
    4. 

  4.     <em>Christmas tree</em>
    5. 

  5. <div>
    6.

会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级

  1. h2 + em {color:gray;}

4.所有兄弟选择器

    

  1.     <ul class="list">
    2. 

  2.       <li class="item">item1</li>
    3. 

  3.       <li class="item second">item2</li>
    4. 

  4.       <li class="item">item3 </li>
    5. 

  5.       <li class="item">item4</li>
    6. 

  6.       <li class="item">item5</li>
    7. 

  7.     </ul>
    8.

*号为通用标识符

    

  1.     .item.second ~ * {
    2. 

  2.         background-color: yellow;
    3. 

  3.     }
    4.

选择器的权重

选择器 权值 权级
通配符选择器 0，0，0，0 0级
元素选择器 0，0，0，1 1级
CLASS选择器 0，0，1，0 2级
ID选择器 0，1，0，0 3级
行内样式 1，0，0，0 4级
!important 无限大 5级

推荐使用 class 而不用 id

  1. class 可以复用，id是唯一；
  2. id选择器比class选择器权值高；
  3. class的诞生是为了样式服务；

上一篇： 配置Ruby开发环境

下一篇： 使用 Packer 创建自定义镜像

推荐阅读