认识css中所有的选择器

什么是选择器

每一条样式申明（定义）由两部分组成

选择器{

样式；    }

标签选择器

p{

　　font-size：12px；

　　　  line-height:1.6em;     }

类选择器

.类选择器的名称{

　　　　css样式代码；   }

需要注意的是

　　1、英文圆点开头

　　 2、其中类选择器可以任意起名（不用中文）

使用方法

　　1、使用合适的标签把修饰的内容标记起来.

　　　　<span>OA</span>

　　2、使用class="类选择器的名称"为标签设置一个类.

　　　　<span class="stre">OA系统</span>

　　3、设置类选择器css的样式.

　　　　如下：将"公开课"设置为红色<span class=setRed>公开课</span>然后再<head>标签里输入setRed{color:green}

Id选择器

　　1、为标签设置id="Id名称"，而不是class="类名称"

　　2、id选择器前面是#而不是英文圆点

　　　　在<head>标签里输入

　　　　　　#setRed{

　　　　　　　　color:red; } 在具体编辑里<span id="setRed">公开课</span>

需要注意的是

　1、Id选择器只能在文档使用一次，而且仅一次，而类选择器可以使用多次

子选择器

用于选择指定标签的第一代子元素

.food>li{

　　　　　　border:1px solid red  }   这里会为food下的子元素的li加入红色实线边框

包含选择器

即加入空格，用于选择器指定标签元素下的后辈元素

　.first  span{

　　　　　　color:red;}  子选择器仅指它的直接后代，或理解为子元素的第一代后代，而后代选择器用于所有后代，后代选择器用空格来实现.

通用选择器

是功能强大的选择器，作用于html所有标签中

　*{

　　　color:red  }

伪类选择器

给不存在的标签设置样式，如给html中的一个标签元素的鼠标滑过的装袋设置字体颜色

　a:hover{

　　　color:red }

分组选择器

当你为多个标签设置同一个样式时可以使用分组选择器（，）

　h1,span{

　　　color:red;  }它相当于 h1{ color:red;}和span{ color:red;}

css中所有的选择器的更多相关文章

  1. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  2. css3笔记系列-3.css中的各种选择器详解，不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  3. CSS 中常用的选择器（选择符）

    一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:l ...

  4. CSS中的各类选择器

    属性选择器 结构性伪类选择器 UI状态伪类选择器 CSS其他选择器

  5. css中常用的选择器和选择器优先级

    css常用的选择器:类选择器,id选择器,元素选择器,伪类选择器,伪元素选择器,属性选择器. 选择器的优先级由四个部分组成:0,0,0,0 一个选择器的具体优先级如下规则确定: ID选择器 加 0,1 ...

  6. CSS中的关系选择器

    关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格.>.~,还 有+等,这些都是非常常用的选择器. 后代选择器:选择所有合乎规则的后代元素.空格连接. 相邻后代选择器:仅仅选择 ...

  7. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  8. css中选择器

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

  9. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

随机推荐

  1. React 实践项目 （一）

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 项目代码地址:https: ...

  2. 微信iOS消息拦截插件教程－Tweak HelloWorld

    微信iOS消息拦截插件教程-Tweak HelloWorld 标签(空格分隔): 越狱开发教程 1.环境准备 准备一台越狱的手机,具体参照上一篇教程 搭建Theos越狱开发环境 2.开发过程 新建一个 ...

  3. 将git版本号编译进程序

    问题的提出 不管是什么版本管理工具,每一条提交记录都会有一个对应的版本号,一般是一个整数,git是一个hash字符串.不管怎样,这个版本号是唯一的,有时候我们在程序运行的时候会在日志里面输出程序的版本 ...

  4. Python基础之模块、数据类型及数据类型转换

    一.模块 1.标准库 不需要安装,直接调入使用的模块. import sys模块: import sys print(sys.path) #打印环境变量绝对路径 print(sys.argv) #打印 ...

  5. nyoj_83:迷宫寻宝（二）（计算几何）

    题目链接 枚举所有墙的2n个端点与宝物的位置作为一条线段(墙的端点必定与边界重合), 求出与之相交的最少线段数(判断线段相交时用跨立实验的方法),+1即为结果. #include<bits/st ...

  6. 对于mariadb安装后可以默认使用无密码登录的问题解决方案

    mariadb安装后默认可以无密码登录 所以首先我们要设置root用户的密码 mysqladmin -u root -p password 密码 [遇到enter直接enter就行,注意,如果是重新设 ...

  7. 笔记evernote

    8542-1090-0308-5951 2786-2836-1103-4104 6835-5846-6090-5388 5443-4068-2394-0845

  8. web前端开发面试题（未完待续）

    一.HTML与XHTML的不同:1)XHTML元素必须被正确地嵌套 2)元素必须被关闭   如:<h1>--</h1>关闭 3)标签名必须用小写字母 4)XHTML文档必须有根 ...

  9. Java 9 揭秘（19. 平台和JVM日志）

    Tips 做一个终身学习的人. 在这章中,主要介绍以下内容: 新的平台日志(logging)API JVM日志的命令行选项 JDK 9已经对平台类(JDK类)和JVM组件的日志系统进行了大整. 有一个 ...

  10. [PS相关]DAS,NAS,SAN三种存储技术比较

    随着数据量一直在快速增长,存储技术也在快速的更新以满足需求和推动创新.当存储被提到的时候,它不仅仅局限于存储容量,还有其他的需求比如数据保护,数据备份,数据访问速度等等. NAS-网络存储设备(Net ...