认识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. Chrome浏览器扩展开发系列之九：Chrome浏览器的chrome.alarms.* API

    Chrome浏览器扩展程序通过chrome.alarms.* API,可以制定计划周期性地执行代码,或在指定时间执行代码. 要使用chrome.alarms.* API,首先需要在manifest.j ...

  2. getResources提取资源文件

    String pxsize = context.getResources().getString(R.string.hello); 资源文件格式: <?xml version="1.0 ...

  3. 介绍一个全局最优化的方法：随机游走算法(Random Walk)

    1. 关于全局最优化求解   全局最优化是一个非常复杂的问题,目前还没有一个通用的办法可以对任意复杂函数求解全局最优值.上一篇文章讲解了一个求解局部极小值的方法--梯度下降法.这种方法对于求解精度不高 ...

  4. nodejs之url模块

    鄙人初步学习nodejs,目前在读<nodejs入门>这一本书,书很小,但是让我知道了如何用nodejs创建一个简单的小项目.例如如何创建一个服务器啦,例如http.createServe ...

  5. Codeforces_776B: Sherlock and his girlfriend（素数筛）

    题目链接 题意:对2~n+1染色,一个数不能与其素因子同色. 故而只需两种颜色即可,素数染1,合数染2便可满足条件 #include<bits/stdc++.h> using namesp ...

  6. Python面向对象编程（二）

    1.继承与派生 上文我们已经说过,Python中一切皆对象.我们从对象中抽取了共同特征和技能,得到了类的概念.类与类之间也有共同特征,我们可以从有共同特征和技能的类中提取共同的技能和特征,叫做父类. ...

  7. GIT - 代码管理工具之命令集

    GIT 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系统提供了高级操作和完全访问.它会把你的每次提交的文件的全部内容都会记录下来. GIT特点 速度 简单的设计 对非线性开发 ...

  8. ARM开发（1） 基于STM32的LED跑马灯

    一 跑马灯原理:  1.1 本实验实现2个led的跑马灯效果,即2个led交替闪烁.  1.2 实验思路:根据电路图原理,给led相关引脚赋予高低电平,实现电路的导通,使led灯发光.  1.3 开发 ...

  9. (转)目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  10. ASP.NET WebAPI Get和Post 传参总结

    这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jque ...