认识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. Docker镜像构建的两种方式

    关于Docker里面的几个主要概念 这里用个不太恰当的比方来说明. 大家肯定安装过ghost系统,镜像就像是ghost文件,容器就像是ghost系统.你可以拿别人的ghost文件安装系统(使用镜像运行 ...

  2. Pandas数据处理实战：福布斯全球上市企业排行榜数据整理

    手头现在有一份福布斯2016年全球上市企业2000强排行榜的数据,但原始数据并不规范,需要处理后才能进一步使用. 本文通过实例操作来介绍用pandas进行数据整理. 照例先说下我的运行环境,如下: w ...

  3. Socket异步通信及心跳包同时响应逻辑分析。

    有段时间没有更博了,刚好最近在做Socket通信的项目,原理大致内容:[二维码-(加logo)]-->提供主机地址和端口号信息(直接使用[ThoughtWorks.QRCode.dll]比较简单 ...

  4. 谈谈final, finally, finalize的区别

    final 修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为final的.将变量或方法声明为fi ...

  5. ServerSocket简单例题

    ServerSocket 简单例题: package com.kaige123.net; /* *凯哥 */ import java.io.FileInputStream; import java.i ...

  6. Java-认识变量、注释并能及时发现错误

    package com;//变量的演示public class VarDemo { public static void main(String[] args) { /* * 1)题目不用抄 2)注释 ...

  7. Objective-C AVPlayer播放视频的使用与封装

    大致效果 不要介意.界面有点丑... 界面搭建 看下成员变量就知道我怎么搭建的了,这里我将video播放层的size作为参照量,对所有控件的size按照其video的size宽高进行比例缩放 @int ...

  8. Opencv-2017-7-18

    橘子薄皮只吃瓤,可以称之为过滤,意思是只要我们需要的东西,去除不需要的. 图像灰度级的分布及变化. 空间域(分布)和频域(变化). 低频(变化小),高频,水平/垂直,(高/低通滤波器). 低频-类似模 ...

  9. HDOJ2001-两点坐标的距离

    Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离.   Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1,y1,x2,y2 ...

  10. Hadoop常用命令集合

    查看安全模式 bin/hadoop dfsadmin -safemode enter | leave | get | wait