认识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. 浅入深出之Java集合框架（中）

    Java中的集合框架(中) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...

  2. TCP 连接重置漏洞 - CVE-2004-0230讲解

    TCP 连接重置漏洞 - CVE-2004-0230: IPv6 实施中存在一个拒绝服务漏洞,该漏洞可能允许攻击者向受影响系统发送特制的 TCP 消息. 成功利用此漏洞的攻击者可能会导致受影响系统重置 ...

  3. java IO之 编码 （码表 编码 解码 转换流）

    编码 什么是编码? 计算机中存储的都是二进制,但是要显示的时候,就是我们看到的却可以有中国 ,a  1 等字符 计算机中是没有存储字符的,但是我们却看到了.计算机在存储这些信息的时候,根据一个有规 则 ...

  4. 面向对象15.3String类-常见功能-判断

    /*3.判断 * 3.1两个字符串内容是否相同? * boolean equals(Object obj)(参数是Object,不是String,因为equals是覆盖Object里面的equals方 ...

  5. ASP.NET MVC HttpPostedFileBase文件上传

    HttpPostedFileBase文件上传,支持多文件一次上传,如有图片,则支持略缩图保存 文件传输信息封装 /// <summary> /// 文件生成方式 /// </summ ...

  6. 20170713_js闭包/匿名函数/作用域

    js:闭包 var getNum; function getCounter() { var n = 1; var inner = function () {return n++; } console. ...

  7. CC攻击网站和游戏如何针对性预防？

    1:CC攻击原理 CC = Challenge Collapsar,其前身名为Fatboy攻击,是利用不断对网站发送连接请求致 使形成拒绝服务的目的, CC攻击是DDOS(分布式拒绝服务)的一种,相比 ...

  8. 运行Jmeter.bat出错：Not able to find java executor or version. Please check your installation. errorlevel=2

    下载JMeter. 解压后运行Jmeter.bat竟然报错了. 解决办法整理: 方法1: 1.检查JDK环境变量配置: ①系统变量→新增JAVA_HOME. 变量值填写jdk的安装目录(本人是 E:\ ...

  9. （转）java之runnable jar与普通jar

    背景:项目中有时候需要导出相关的jar包,可是总是不能分清楚. 1 导出包 导出普通jar包(可作为第三方库,类似dll,so等) 在eclipse中右键选择except->java->j ...

  10. javac.exe、 java.exe、 java虚拟机三者之间的区别与联系

    JDK中 javac:Java编译器,将Java源代码换成字节代: java:Java解释器,直接从类文件执行Java应用程序代码: 先编译  *.java文件――――>*.class文件 运行 ...