<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*
选择器: 选择器的作用就是找到对应的数据进行样式化。 1.标签选择器: 就是找到所有指定的标签进行样式化。 格式:
标签名{
样式1;样式2....
} 例子:
div{
color:#F00;
font-size:24px;
}
2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值。 格式:
.class的属性值{
样式1;样式2...
} 例子:
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
} 类选择器要注意的事项:
1. html元素的class属性值一定不能以数字开头.
2. 类选择器的样式是要优先于标签选择器的样式。 3. ID选择器: 使用ID选择器首先要给html元素添加一个id的属性值。 ID选择器的格式: #id属性值{
样式1;样式2...
}
id选择器要注意的事项:
1. ID选择器的样式优先级是最高的,优先于类选择器与标签选择器。
2. ID的属性值也是不能以数字开头的。
3. ID的属性值在一个html页面中只能出现一次。 4. 交集选择器: 就是对选择器1中的选择器2里面的数据进行样式化。 选择器1 选择器2{
样式1,样式2....
} 例子:
.two span{
background-color:#999;
font-size:24px;
} 5. 并集选择器: 对指定的选择器进行统一的样式化。 格式:
选择器1,选择器2..{
样式1;样式2...
} span,a{
border-style:solid;
border-color:#F00;
}
6. 通过选择器: {
样式1;样式2...
} */ *{
text-decoration:line-through;
background-color:#CCC;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="one" class="two">这个是<span>第一个div标签</span>...</div>
<div id="one" class="two">这个是<span>第二个div标签</span>...</div>
<span>这个是一个span标签</span><br/>
<a class="two" href="#">新闻标题</a> </body>
</html>

Css详解之(选择器)的更多相关文章

  1. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  2. DIV+CSS详解

    DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...

  3. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  4. css详解background八大属性及其含义

    background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

  5. css详解3

    推荐学习链接:css盒模型 1.盒模型的常用属性 1.1.pading <html lang="en"> <head> <meta charset=& ...

  6. jquery的css详解(一)

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  7. JavaWeb之CSS详解

    CSS的简介 1.CSS概述及作用 CSS:Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强 ...

  8. Css详解之(伪类选择器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS之详解:active选择器

    Active的一段话 active的英文解释为"积极的",表现在鼠标上就是点击的意思.关于active选择器最多的示例恐怕就是应用在链接上面的,然而打开链接是一个一瞬间的动作,这不 ...

随机推荐

  1. 一个任务:(小甲鱼python视频第29讲) 代码整理与总结

    任务:将文件(record.txt)中的数据进行分割,并安装以下规则保存起来.  1.小甲鱼的对话单独保存为boy_*.txt的文件(去掉"小甲鱼:")  2.小客服的对话单独保存 ...

  2. PHP XML 函数

    PHP XML Parser 简介 XML 函数允许您解析 XML 文档,但无法对其进行验证. XML 是一种用于标准结构化文档交换的数据格式.您可以在我们的 XML 教程 中找到更多有关 XML 的 ...

  3. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  4. 百度地图JS 搜索悬浮窗功能

    这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的.文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular 效果图 ...

  5. 20160216.CCPP体系详解(0026天)

    程序片段(01):01.MemCpy.c 内容概要:内存拷贝 #include <stdio.h> #include <stdlib.h> #include <memor ...

  6. Docker学习笔记4: Docker-Compose—简化复杂容器应用的利器

    本文转载自http://www.tuicool.com/articles/AnIVJn. 因Python语言,个人也没学过,不是太熟悉,这篇文章的代码格式排版不准确爆了很多错,让我走了好多坑,不过还是 ...

  7. Android 多窗口

    随着手机屏幕越来越大,单手操作手机越来越难,所以一些大厂早就开始研究多窗口,如iphone.samsung的单手模式,作为一个发展趋势google肯定也不会不考虑用户的体验,所以在android N中 ...

  8. 【mybatis深度历险系列】mybatis中的动态sql

    最近一直做项目,博文很长时间没有更新了,今天抽空,学习了一下mybatis,并且总结一下.在前面的博文中,小编主要简单的介绍了mybatis中的输入和输出映射,并且通过demo简单的介绍了输入映射和输 ...

  9. CountDownLatch使用

    分享牛原创,CountDownLatch类的使用,CountDownLatch是一个工具类,运行主线程开启子线程的时候,子线程还没有结束的时候,主线程可以一直等待,直到初始化的现成的计数器count为 ...

  10. 初识gd库

    必备基础 开启GD拓展 列表使用 获取图片信息代码 图片详细信息 特效函数 示例 运行结果 分析 获取图片基本信息 获取图片宽度 获取图片高度 获取图片后缀名 获取图片mime类型 操作图片 添加文字 ...