标签选择器

　　使用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. window 系统虚拟机安装mac系统

    前言: 我们用的是虚拟机,物理机安装一是复杂,二是兼容性实在太差,所以不推荐使用,除非你的电脑配置不够.这篇文章很长,如果想安装的话建议收藏,否则你有可能记不住步骤,我尽量缩减步骤,所以如果你想安装黑 ...

  2. Linux 系统开启随机端口数量 调优

    Linux系统随机端口 默认Linux系统开启的随机端口范围为 32768 ~ 65535.客户端连接服务监听端口需要使用到随机端口连接. Linux系统随机端口调优 1.添加内核配置参数:/etc/ ...

  3. Guitar Pro里的编谱方式怎么用？

    今天来教大家如何使用Guitar Pro中的编谱方式来让我们的乐谱更加美观整齐耐看,我们一起get起来吧! 相信我们每一个人在使用Guitar Pro进行编曲创作时,都会碰到这种情况,在乐谱上,会看到 ...

  4. Java内存可见性

    如果一个线程对共享变量的修改,能够被其它线程看到,那么就能说明共享变量在线程之间是可见的.如果一个变量在多个线程的工作内存中都存在副本,那么这个变量就是这几个线程的共享变量.Java内存模型(Java ...

  5. C# 图片缩略图

    /// <summary> /// 生成缩略图 /// </summary> /// <param name="sourceFile">原始图片 ...

  6. ES6的小知识（后半部分）

    一.iterator和for-of循环 在js里有数组和对象,es6又新出现了set和map这样js就有了四种数据集合,这样可以组合使用他们,比如数组里拥有对象,set等,这样就需要一个统一的 接口机 ...

  7. yii中通过HTTP post接收

    创建一个CURL.php的文件然后引用 1 <?php namespace frontend\models; class Curl { public function getCurl($url, ...

  8. [LeetCode]题15:3Sum

    第一次解: res = [] nums.sort() if len(nums)<3:return [] for i in range(len(nums)-2): left = i+1 right ...

  9. Flask框架整理

    Flask基础部分 Flask目录结构(蓝图) views中存放蓝图,每个蓝图也可以有自己的模板,用蓝图对不同功能的视图函数进行隔离,类似于django中的app pro_flask包的init.py ...

  10. Linux下更换jdk和配置环境变量

    目前Linux上安装的是jdk7的java环境,由于项目原因需要升级到jdk8,无需卸载掉原本的jdk7,按如下简单步骤即可: 参考了:https://www.cnblogs.com/jiu0821/ ...