css选择器

作者: fanison | 来源:发表于2019-02-25 22:26 被阅读26次

- 基础选择器

1.* 通用元素选择器,匹配页面任何元素

  * {
    box-sizing: border-box;
  }
  .flex-container * {
    flex-basis: 100%;
  }
  1. #id id选择器,匹配特定id的元素

     <p id="welcome">hello</p>
     #welcome {
       font-size: 24px;
     }
    
  2. .class 类选择器,匹配class包含(不是等于)特定类的元素

一个 CSS 类可以应用到多个不同的元素
一个元素也可以应用多个不同的 CSS 类

    <ul>
      <li class="first done">1</li>
      <li class="second done">2</li>
    </ul>
    .first {
      font-weight: bold;
    }
    .done {
      text-decoration: line-through;
    }
  1. element 标签选择器

     p {
       color: red;
     }
    

- 组合选择器

  1. A, B 多元素选择器,用,分隔,同时匹配元素A或元素B

  2. A B 后代选择器,用空格分隔,匹配A元素所有的后代(不只是子元素、子元素向下递归)元素B

     <div class="first">第一层
       <div class="second">第二层
         <div class="third">第三层
           <span class="inner">最内层   
           </span>
         </div>
       </div>
     </div>
     .first .second{
       color:red;
     }
    
  1. A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

     .second > .third{
       color:red;
     }
    

third不是first的直接子元素,故css未生效

- 属性选择器

  1. [attr] 选择包含 attr 属性的所有元素,不论 attr 的值为何。

     [disabled] {
       cursor: not-allowed;
     }
    
  2. [attr=val]仅选择 attr 属性被赋值为 val 的所有元素。

     [data-color="gray"] {
       color: #ccc;
     }
    

- 伪类选择器

 <style>
   .box:first-child {
    color: red;
  }
  .box:first-of-type {
    background: blue;
  }
  .box :first-child {
    font-size: 30px;
  }
  .box :first-of-type {
    font-weight: bold;
  }
  </style>
   <div class="container">
      <div class="box">div.box</div>
      <p class="box">p.box</p>
      <div class="box">div.box</div>
      <div class="box">
        <div class="item">div.item</div>
        <p class="item">p.item</p>
      </div>
      <p class="box"></p>
    </div>

.box:first-child 匹配class=box的第一个子元素(div.box为第一个,所以颜色为红色)
.box:first-of-type 匹配class=box使用同种标签的第一个子元素(div.box为第一个使用div标签,p.box为第一个使用p标签,所以背景颜色为蓝色)
.box :first-child 匹配父元素class=box下的第一个子元素(div.item为div.box下的第一个子元素,所以字体为30px)
.box :first-of-type 匹配父元素class=box下所有使用同种标签的第一个子元素(div.item为div.box下的第一个使用div标签,p.item为div.box下第一个使用p标签,所以加粗)

E F:nth-child(n) 匹配其父元素的第n个子元素
E F:nth-of-type(n) 匹配使用同种标签的第n个子元素

n的取值1,2,3,4,5;2n+1, 2n, 4n-1;odd(奇数), even(偶数)

- 伪元素选择器

选择器优先级:

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义

相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS-选择器1-概述

    CSS选择器-系列文章 CSS选择器-系列文章下一节 CSS选择器2-类选择器CSS3参考手册

  • CSS选择器、优先级以及!important知识总结

    一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

网友评论

    本文标题:css选择器

    本文链接:https://www.haomeiwen.com/subject/tzunyqtx.html