认识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. ABP入门系列（20）——使用后台作业和工作者

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1.引言 说到后台作业,你可能条件反射的想到BackgroundWorker,但后台作业并非是后台 ...

  2. dashDB - Creating a table with CLOB column type

    In order to create a table with clob column type, the table has to be created with "ORGANIZE BY ...

  3. 函数的上下文就是函数里面的this是谁

    规律1:函数用圆括号调用,函数的上下文是window对象 比如小题目: function fun(){ var a = 888; alert(this.a); //实际上访问的是window.a } ...

  4. Unity-Shader-镜面高光Phong&BlinnPhong-油腻的师姐在哪里

    [旧博客转移 - 2016年4月4日 13:13 ] 油腻的师姐: 以前玩过一款很火热的端游<剑灵>,剑灵刚出来的时候,某网页游戏广告视频中有句台词:"我不断的在寻找,有你的世界 ...

  5. JAVA金额按比例分摊，零头处理

    金额精确计算,必须使用BigDecimal; 平均分摊,分摊的零头,一般都是由数据"精度"和分摊系数决定的: 主要是如何对零头进行处理,保证尽可能的平均分配. 1.按户均摊 /** ...

  6. 学习java窗口基本操作时无聊写的

    学习java窗口基本操作时无聊写的 就当记录 代码如下: package day08; import java.awt.BorderLayout;import java.awt.Color;impor ...

  7. 计算总和及平均值u

    代码如下: package ClassDemo; import java.util.Scanner; public class ScannerTest { public static void mai ...

  8. 【无旋式treap】例题

    [bzoj3223]文艺平衡树 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[ ...

  9. LeetCode-Interleaving String[dp]

    Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. Fo ...

  10. java线程数过高原因分析

    作者:鹿丸不会多项式  出处:http://www.cnblogs.com/hechao123   转载请先与我联系. 一.问题描述 前阵子我们因为B机房故障,将所有的流量切到了A机房,在经历了推送+ ...