标签选择器

　　使用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. URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

    今天搭建antd的项目结构,本来项目是一个基础react项目,结果执行 yarn create umi yarn yarn start 项目启动后访问突然报错URIError: Failed to d ...

  2. socket实现文件传输

    server:===========================================import socketimport structimport jsonsk = socket.s ...

  3. 补充一下 sizeof

    sizeof是一个运算符,给出某个类型或变量在内存中所占据的字节数 sizeof(int) //告诉你int占据几个字节 sizeof(i) //告诉你i这个变量占据几个字节 注:sizeof是静态运 ...

  4. 《温故而知新》JAVA基础七

    抽象类 定义:抽象类前面使用abstract关键字修饰(只用语被继承) 应用场景: 在父类中写一些子类中即将实现的方法,具体的实现在子类中写,也可以将多种特征相同的类抽离出来 使用规则 abstrac ...

  5. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  6. rabbitMQ 的三种Exchange

    rabbitMQ 的Exchange有3种路由方式:  direct.fanout.topic ,以下为详细说明 1.  Direct Exchange 处理路由键.需要将一个队列绑定到交换机上,要求 ...

  7. 第 8 章 容器网络 - 069 - Calico 的默认连通性

    相同calico 网络之间的连通性 测试一下 bbox1 与 bbox2 的连通性: ping 成功,数据包流向如下图所示. 1)根据 bbox1 的路由表,将数据包从 cal0 发出. 2)数据经过 ...

  8. caffe生成deploy.prototxt文件

    参考: http://blog.csdn.net/cham_3/article/details/52682479 以caffe工程自带的mnist数据集,lenet网络为例: 将lenet_train ...

  9. CentOS7.5下安装、配置mariadb --CentOS7.5

    1.安装mariadb [root@VM_39_157_centos bin]# yum -y install mariadb-server 2.启动mariadb服务 [root@VM_39_157 ...

  10. style.width与offsetWidth的区别

    1. style.width只能读取内联样式,offsetWidth都可以读取: 2. style.width读取的值带“px”单位,offsetWidth读取纯数值: 3. style.width获 ...