标签选择器

　　使用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. YII1 增、删、改、查数据库操作

    增 //注意插入的时候 是用的new Post $objectPost = new Post; $objectPost->username = $username; $objectPost-&g ...

  2. java面试题汇总（有的题无视即可，没什么实际用途）

    相关概念 面向对象的三个特征 封装,继承,多态,这个应该是人人皆知,有时候也会加上抽象. 多态的好处 允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不同的行为方式(发送消 ...

  3. Docker Kubernetes 健康检查

    Docker Kubernetes 健康检查 提供Probe探测机制,有以下两种类型: livenessProbe:如果检查失败,将杀死容器,然后根据Pod的重启策略来决定是否重启. readines ...

  4. Java的集合框架（第一次小结）

    知识点一.集合框架Java集合框架提供了一套性能优良.使用方便的接口和类,它们位于java.util包中二.集合框架的结构Collection:集合接口Map:键值对接口List:有序不唯一列表接口S ...

  5. inotify+rsync架构实现实时同步

    前序 使用inotify+rsync架构实现(文件夹/文件)实时同步, 双机之间需要ssh免密码配置(两步完成ssh免密码登录) 环境 客户端:192.168.137.176 (rsync + ino ...

  6. vue elementui报错总结

    1.  错误: TypeError: _self.$scopedSlots.default is not a function 原因:这是因为在v-for/v-if切换标签时,原本这些标签每一个都是独 ...

  7. opencv学习之路（27）、轮廓查找与绘制（六）——外接圆、椭圆拟合、逼近多边形曲线、计算轮廓面积及长度、提取不规则轮廓

    一.最小外接圆 #include "opencv2/opencv.hpp" #include<iostream> using namespace std; using ...

  8. 3、基于多播、安全认证的corosync集群(VIP、Httpd、Filesystem)

    Messaging Layer --> CRM --> RA systemd:/usr/lib/systemd/system     systemd有一个特性,即便一个服务开机启动,但是在 ...

  9. 腾讯云CentOS7.4服务器添加swap分区

    自己的腾讯云服务器搭建的zabbix监控中,提示Lack of free swap space 腾讯的官方说明在这: https://cloud.tencent.com/document/produc ...

  10. scala模式匹配及样本类

    样本类 1.带有case关键字的类被称为样本类: 例如:abstract class Expr case class Var(name: String) extends Expr case class ...