css是英文Cascading Style Sheets的缩写。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。我们再将html比喻为树干的时候,css比喻为叶子,花。那要控制这些样式,则要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

  css的选择器可分为:1、id选择器;2、class类别选择器;3、元素选择器;4、属性选择器;5、伪类选择器;6、伪元素选择器;7、通用选择器。

  id选择器是根据元素id来选择元素,具有唯一性,前面以”#”号来标志。

  class类别选择器是根据类名来选择,前面以”.”来标志,在HTML中,元素可以定义一个class的属性。注意id是唯一的,class可以重复。如p,h1等

  元素选择器:也为标签选择器,一个完整的HTML页面是有很多不同的标签组成,标签选择器则是决定哪些标签采用相应的CSS样式。

属性选择器:对HTML中某一属性进行选择。比如对于input或有text、email、password等属性,对其某属性进行控制样式

  伪类选择器::link、:hover、:action、visited。

  伪元素选择器:如before、after、first等

  通用选择器:以*表示,控制整篇网页。

  为了更好的控制HTML的元素样式,我们要灵活运用css选择器,一般不要超过三重。

css中选择器的使用的更多相关文章

  1. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  2. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  3. 关于css中选择器的小归纳(一)

    关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...

  4. css中选择器

    css中常用的选择器有: 1.元素选择器:h1{}  如<h1></h1> 2.类选择器:.test{}或者h1.test{} 如<h1 class="test ...

  5. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  6. 层叠机制和继承的概念以及CSS中选择器的优先级

    层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...

  7. 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

  8. css中选择器的使用技巧

    td:first-child{选择第一个} td:last-child{选择最后一个} td:nth-child(3){选择第3个} 一个简单的选择方法,很方便

  9. CSS常用选择器的认识

    ---恢复内容开始--- 前言:在CSS中选择器的种类有很多很多,但是在实际的工作中,我们经常会用到的分为两大类:基础选择器和复合选择器这两个大类,学习选择器的目的就是为了在复杂的页面中能够快速定位到 ...

随机推荐

  1. Oracle使用经验总结

    oracle数据库是一种大型数据库系统,一般应用于商业,政府部门,它的功能很强大,能够处理大批量的数据,在网络方面也用的非常多.Oracle数据库管理系统是一个以关系型和面向对象为中心管理数据的数据库 ...

  2. SQL SERVER建库&用户赋权限

    create database ServiceDB on primary ( name='ServiceDB_data', -- 主数据文件的逻辑名称 filename='D:\WebRoot\DB\ ...

  3. 《BI项目笔记》基于雪花模型的维度设计

    GBGradeCode 外键关系: 1 烟叶等级 T_GBGradeCode.I_DistinctionID=T_Distinction.I_DistinctionID 烟叶等级分为:上等烟.中等烟. ...

  4. java练习题:输出100以内与7有关的数、百马百担、打分(去掉最高、最低分)、二分法查找数据

    1.输出100以内与7有关的数 注: 这些数分为三类:(1)7的倍数,(2)个位数字是7的数,(3)十位数字是7的数 int i=1; System.out.println("输出100以内 ...

  5. spring aop搭建redis缓存

    SpringAOP与Redis搭建缓存 近期项目查询数据库太慢,持久层也没有开启二级缓存,现希望采用Redis作为缓存.为了不改写原来代码,在此采用AOP+Redis实现. 目前由于项目需要,只需要做 ...

  6. 聊天界面之进度条cell(一)

    ProgressCell用于显示文件传输的进度,困难点在于根据下载进度更新cell的进度条,先后尝试了几种方法: 1.有新的下载进度时,直接调用reloadData() 2.使用reloadRowsA ...

  7. theano + gpu

    Teano安装测试 1. Anaconda 安装 Anaconda是一个科学计算环境,自带的包管理器conda很强大.之所以选择它是因为它内置了python,以及numpy.scipy两个必要库和一些 ...

  8. es6箭头函数中this

    普通函数: $scope.$on('$stateChangeSuccess',function(){this.list = this.getList();}); 箭头函数: $scope.$on('$ ...

  9. 模拟系列(一)——数字电路

    要求 简要模拟数字电路的运行过程,及电位(简化为L和H),用C# WinForm实现. 思路 逻辑部分 电路是一种图结构,基于C#的特性,设计Node类(结点)和Wire类(连线),且为泛型. 由于电 ...

  10. zookeeper学习系列:二、api实践

    上一章我们知道zookeeper的简介,启动,设置节点以及结构性能.本小节我们来玩玩api,获取下数据. php版本: http://anykoro.sinaapp.com/2013/04/05/%E ...