标签选择器

　　使用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. dart字符串处理

    1.字符串创建(1)使用单引号,双引号创建字符串(2)使用三个引号或双引号创建多行字符串(3)使用r创建原始raw字符串(转义字符等特殊字符会输出出来,而不会自动被转义) (1)例如:String s ...

  2. URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

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

  3. iOS开发 -------- Block技术中的weak - strong

    一 Block是什么? 我们使用^运算符来声明一个Block变量,而且在声明完一个Block变量后要像声明普通变量一样,后面要加; 声明Block变量 int (^block)(int) = NULL ...

  4. python 获取文件目录位置

    test.py import os print('***获取当前目录***') print(os.getcwd()) print(os.path.abspath(os.path.dirname(__f ...

  5. MySQL5.5安装教程

                                          登录MySQL:mysql -uroot -p密码 退出MySQL:exit | quit 查看数据库:show datab ...

  6. box-sizing 和 dom width

    refer : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions ...

  7. ADC配置成定时器触发的启发

    百度文库:https://wenku.baidu.com/view/99d39413f78a6529647d5344.html STM32关于使用定时器触发ADC转换的解决办法和详细说明 本人在使用S ...

  8. linux存储管理之基本分区

    基本分区管理 ====================================================================================基本分区(MBR| ...

  9. git branch 不显示的原因

    转自:https://blog.csdn.net/qq_39671159/article/details/81261049 必须使用git init命令创建仓库,执行git add . 和git co ...

  10. zzw_rsync命令中的/的作用

    [root@sv0379 rsync]# rsync -vzrtopg  --password-file=/usr/local/rsync/rsync.passwd  /opt/aspire/prod ...