美文网首页
CSS选择器

CSS选择器

作者: 酵母小木 | 来源:发表于2019-03-07 11:25 被阅读0次

本文转载自Thoughtworks学习平台的训练营的学习任务,仅供个人笔记回忆之用

选择器用来从页面中选择元素,以给它们定义样式。

1. 简单选择器

  • 通配选择器
 /* 匹配所有元素 */
 * {
   box-sizing: inherit;
 }
  • 标签选择器
 /* 匹配所有P元素 */
 p {
   margin: 1em 0;
 }
  • id选择器
  <!-- HTML -->
  <p id="example">Just test content</p>
  
  <!-- CSS -->
  <style type="text/css">
    /* 匹配id为example的元素
     * 注意:id 值在一个 HTML 中必须唯一
     */
    #example {
      font-size: 2em;
      line-height: 1.6;
      color: red;
    }
  </style>
  • 类选择器
  <!-- HTML -->
  <p class="error">Error message</p>
  <!-- 可以给一个元素指定多个class,用空格隔开 -->
  <p class="error icon">Another error message</p>
  
  <!-- CSS -->
  <style type="text/css">
    .error {
      color: orange;
    }
    .icon {
      background: url(error.png) no-repeat 0 0;
    }
  </style>

2. 复杂选择器

  • 属性选择器
  <!-- HTML -->
  <p>
    <label>用户名:</label>
    <input name="username" value="tw" disabled>
  </p>
  <p>
    <label>密码:</label>
    <input type="password" required>
  </p>
  
  <!-- CSS -->
  <style>
    /* 选中所有的禁用的输入框 */
    input[disabled] {
      background: #ddd;
      color: #999;
      cursor: not-allowed;
    }
    /* 选中所有输入框类型为"密码"的元素 */
    input[type="password"] {
      border-color: red;
      color: red;
    }
  
  </style>
  • 伪类选择器
    伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。
属性 描述
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
:checked 可以用来定义选中(checked)的元素,比如
单选按钮(radio)或多选按钮(checkbox)

基于DOM之外的信息去(比如根据用户和网页的交互)选择元素,示例如下:

   a:link    { ... }   /* 未访问过的链接 */
   a:visited { ... }   /* 已访问过的链接 */
   
   a:hover   { ... }   /* 鼠标移到链接上的样式 */
   a:active  { ... }   /* 鼠标在连接上按下时的样式 */
   a:focus   { ... }   /* 获得焦点时的样式 */
 
   <!-- 伪类的代码示例 -->
   <!-- HTML -->
   <nav>
     <ul>
       <li><a href="http://w3.org">W3C</a>
       <li><a href="http://example.com">example.com</a>
       <li><a href="http://www.360.com">360</a>
     </ul>
   </nav>
   
   <label>搜索:<input name="q" type="search"></label>
   
   <!-- CSS -->
   <style>
     a:link {
       color: black;
     }
     a:visited {
       color: gray;
     }
     a:hover {
       color: orange;
     }
     a:active {
       color: red;
     }
     :focus {
       outline: 2px solid red;
     }
   </style>
  • 伪元素选择器
    伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。

在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

属性 描述
::first-letter 选择指定元素的第一个单词
::first-line 选择指定元素的第一行
::after 在指定元素的内容前面插入内容
::before 在指定元素的内容后面插入内容
::selection 选择指定元素中被用户选中的内容
<h1>这是h1</h1>
<h2>这是h2</h2>

<!-- CSS -->
<style>
h1::before{
    content:"h1后插入内容"
}
h2::after{
    content:"none"
}
</style>

注意:

  • 伪元素要配合content属性一起使用
  • 伪元素不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
  • 伪元素的特效通常要使用:hover伪类样式来激活

3. 不同的选择器之间也可以组合。

  • 直接组合 EF
     <!-- HTML -->
     <p class="warning">这是一条警告信息</p>
     <div class="warning icon">这是另外一条警告信息</div>
     
     <!-- CSS -->
     /* 标签选择器和类选择器组合 */
     p.warning { color: orange; }
  • 后代组合 E F
      <!-- HTML -->
      <article>
        <h1>一级标题</h1>
        <p>第一段第一段。</p>
        <section>
          <h2>二级标题</h2>
          <p>第二段第二段。</p>
        </section>
      </article>
      
      <!-- CSS -->
      <style>
        /* 后代选择器 */
        /* 选中 article 标签下的 所有 p 元素 */
        article p {
          color: coral;
        }
        /* 选中 article 标签下的 section 标签下的 所有 h2 元素*/
        article section h2 {
          border-bottom: 1px dashed #999;
        }
      </style>
  • 亲子组合 E > F
      <!-- HTML -->
      <article>
        <h1>一级标题</h1>
        <p>第一段第一段。</p>
        <section>
          <h2>二级标题</h2>
          <p>第二段第二段。</p>
        </section>
      </article>
      
      <!-- CSS -->
      <style>
        /* 亲子选择器 */
        /* 亲子选择器和后代选择器不同的就是:后代选择器可以选中嵌套在标签内部任意层级的标签元素,而亲子选择器只能选中当前标签向内一层的元素,即亲子选择器只能匹配直接后代,通俗一点,就是只能匹配儿子辈,不能匹配孙子辈。*/
        article > p {
          color: limegreen;
        }
      </style>
  • 为一组选择器同时定义样式
      /* 下面的选择器将会同时将CSS规则应用在body/h1/h2/h3/h4/h5/h6/ul/ol/li上 */
      body, h1, h2, h3, h4, h5, h6, ul, ol, li {
        margin: 0;
        padding: 0;
      }
      
      [type="checkbox"], [type="radio"] {
        box-sizing: border-box;
        padding: 0;
      }

相关文章

  • 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/apnqpqtx.html