标签选择器

　　使用html标签筛选需要渲染的网页元素。

  • 使用场景

    • 修改标签的默认样式，例如ul li 有默认的内边距，开发时应去掉标签的默认样式。

    • 设定全局字体样式。

    • 根据分辨率设定html标签的默认字体。

      div {/*直接用标签作为选择器*/
      
    background-color: yellow;
      
}

类选择器

　　为一组样式属性进行命名（类名），标签使用时需要声明，使用频率最多的选择器。

  • 类选择器的特点

    • 多个标签可以引用同一个样式类，提高程序的公用性。

    • 通过语义化的类名定义增加了程序可读性。

    • 标签可以通过class引入多个样式类名，用空格分开。

    • 类名区分大小写。

       <!DOCTYPE html>
      
 <html>
      
     <head>
      
         <meta charset="utf-8" />
      
         <title></title>
      
         <style type="text/css"><!--使用style标签包裹-->
      
             .aClass{
      
                 background-color: #2E8B57;
      
             }
      
             .bClass{
      
                 color: red;
      
             }
      
         </style>
      
     </head>
      
     <body>
      
         <div class="aClass bClass">这是一个div容器</div>
      
     </body>
      
 </html>

ID选择器

　　　　根据标签的id属性筛选要被渲染的标签（很少使用）。

  • 注意事项

    • ID不能重复，因此每个元素都要编写一个id选择器，无法提炼公用样式。

    • 文档内元素的ID是区分大小写的。

    • id命名规则是由字母、数字和下划线组成。

    • 但是数字不能开头。

  • 程序示例

        <head>
    
        <meta charset="utf-8" />
    
        <title></title>
    
        <style type="text/css"><!--使用style标签包裹-->
    
            #v_div{
    
                color: green;
    
            }
    
        </style>
    
    </head>
    
    <body>
    
        <div id="v_div">这是一个div容器</div>
    
    </body>

选择器分组

　　对一组选择器赋予同样的样式属性。

  • 使用场景：对于一组公用标签的相同属性进行赋值。

  • 基本语法

    selector1,selector2…..{/*若干个选择器，用逗号分隔*/
    
    此处为css属性以及取值
    
}

  • 程序示例

        <head>
    
        <meta charset="utf-8" />
    
        <title></title>
    
        <style type="text/css"><!--使用style标签包裹-->
    
            #v_div,a,.v_p{
    
                border: solid 3px #800080;
    
            }
    
        </style>
    
    </head>
    
    <body>
    
        <div id="v_div">这是一个div容器</div>
    
        <p class="v_p">段落</p>
    
        <a href="#">超链接</a>
    
    </body>

派生选择器

　　　　又称为后代选择器，按照html标签的层级关系（全部后代子孙）筛选被渲染的标签。

  • 基本语法

    <!--父在前，子在后，并用空格隔开-->
    
selector1 selector2…..{
    
    此处为css属性以及取值
    
}

  • 程序示例

        <head>
    
        <meta charset="utf-8" />
    
        <title></title>
    
        <style type="text/css">
    
            .parent p {
    
                color: red;
    
            }
    
        </style>
    
    </head>
    
    <body>
    
        <div class = "parent">
    
                <div>
    
            <p>派生选择器</p>
    
                 </div>
    
        </div>
    
    </body>

后代选择器

　　又称为子元素选择器，按照html标签的层级关系（直接后代），筛选要被渲染的标签。

  • 基本语法

    selector1>selector2{
    
    此处为css属性以及取值
    
}

  • 程序示例

         <head>
    
         <meta charset="utf-8" />
    
         <title></title>
    
         <style type="text/css"><!--使用style标签包裹-->
    
             .parent>div>p {
    
                 color: red;
    
             }
    
         </style>
    
     </head>
    
     <body>
    
         <div class = "parent">
    
                 <div>
    
                 <p>派生选择器</p>
    
                  </div>
    
         </div>
    
     </body>

属性选择器

　　　　根据元素的html属性或属性值筛选要被渲染的元素。

  • 基本语法

    selector[attr][attr=‘value’]{
    
    此处为css属性以及取值
    
}

  • 程序示例

    <style type="text/css">
    
    a[href] {
    
        color:yellow;
    
    }
    
    a[href][title] {
    
        color:red;
    
    }
    
    a[href='www.baidu.com'] {
    
        color:blue;
    
    }
    
</style>

伪类选择符

　　　　按照用户操作状态筛选需要渲染的元素，在css2中定义的伪类选择符一般用来操作超链接。

  • 伪类选择符的状态

    • E:link:筛选未被访问的链接。

    • E:visited :筛选已经被被访问的链接。

    • E:hover:筛选当前鼠标悬停时的任何元素。

    • E:active:筛选被用户激活（鼠标点击）时的任何元素。

      <style type="text/css"><!--使用style标签包裹-->
      
    .mydiv:link{
      
        color: blue;
      
    }
      
    .mydiv:visited{
      
        color: gray;
      
    }
      
    .mydiv:hover {
      
        color: purple;
      
    }
      
    .mydiv:active{
      
        color: red;
      
    }
      
</style>
      
<!--.mydiv为类选择器-->

伪对象选择符

　　　　在其他选择器筛选的结果中继续筛选需要渲染的标签

  • E::first-letter：设置符合E筛选条件的第一个字符的样式。
  • E::first-line：设置符合E筛选条件内的第一行的样式。
  • E::before：设置符合E筛选条件的前一个元素的样式。
  • E::after：设置符合E筛选条件的后一个元素的样式。

<style type="text/css">
.myObj::first-line {/*第一行字体为红色*/

　　　　color: blue;

}

</style>

选择器的优先级别

  • 当同一个元素被多个选择符筛选，并且继承父元素的样式时，优先级别如下：

    • !important的优先级别最高。
    • 继承的优先级别最低，私有css属性将覆盖继承的属性。
    • 同一个元素被不同选择器筛选，又无!important修饰时优先级别计算公式
      • ID选择符个数*100+类选择符个数*10+标签选择符个数

web（八）CSS选择器的更多相关文章

  1. web前端----css选择器样式

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  2. 简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用

    这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法 ...

  3. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  4. WEB学习-CSS基础选择器

    基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...

  5. PHP全栈开发（八）：CSS Ⅰ 选择器

    直到目前为止,我们把从HTML中的数据是如何通过PHP到服务器端,然后又通过PHP到数据库,然后从数据库中出来,通过PHP到HTML的整个过程通过一个案例过了一遍. 可以说,这些才刚刚开始.下面我们开 ...

  6. CSS选择器（二）

    五.属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title ...

  7. CSS选择器、标签，div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...

  8. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  9. 你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

  10. HTML 学习笔记 CSS(选择器3)

    CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...

随机推荐

  1. rman copy相关

    1.db_file_name_convert备份保持原来文件名一致 backup as copy db_file_name_convert=('/u01/app/oracle/oradata/slnn ...

  2. 论文笔记：Dynamic Multimodal Instance Segmentation Guided by Natural Language Queries

    Dynamic Multimodal Instance Segmentation Guided by Natural Language Queries 2018-09-18 09:58:50 Pape ...

  3. idea热部署+自动编译

    https://blog.csdn.net/z15732621582/article/details/79439359

  4. vue extend 的基本使用

    vue.extend 局部注册 的应用2 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例.所以他不能直接在new Vue中这样使用: new Vue({components: f ...

  5. English trip EM2-PE-5A Plan a dinner party Teacher:Lamb

    课上内容(Lesson) # Appetizer   ['æpə'taɪzɚ]  n. 开胃物,开胃食品 spinach salad  菠菜沙拉  # "p" 发b音 gazpac ...

  6. arch Linux（一）

    制作启动盘 将U盘插入待装主机,设置U盘启动,重启进入系统安装界面 设置root密码 root@archiso~ # passwd 启动允许远程连接 root@archiso~ # systemctl ...

  7. ranch流程处理图

    ranch是开发服务端管理模板,这个模板不大,写的很经典,方便并发管理,而且性能很优秀~~ 其中比较优秀的就有cowboy~~ 看了一下ranch的源码(版本v1.2.1 下载链接https://gi ...

  8. 覃超：Facebook的项目开发流程和工程师的绩效管理机制

    覃超:Facebook的项目开发流程和工程师的绩效管理机制 http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650992350&am ...

  9. mysql 5.7版本的安装（非解压版）

    这次的开发项目数据库方面要用到mysql,为了更好的学习,就在本地安装了一个mysql 一:下载安装步骤: https://blog.csdn.net/qq_34952973/article/deta ...

  10. 使用ssm（spring+springMVC+mybatis）创建一个简单的查询实例（一）

    梳理下使用spring+springMVC+mybatis 整合后的一个简单实例:输入用户的 ID,之后显示用户的信息(此次由于篇幅问题,会分几次进行说明,此次是工程的创建,逆向生成文件以及这个简单查 ...