CSS筛选器简单实例1
1.通配符
<!--筛选器---通配符实例-->
<!--支持IE7+ -->
<style type="text/css">
*.all {
font-size: 20px;
color: green;
border: 1px solid blue;
} *[title=showOne] {
border: 1px solid red;
margin: 50px;
}
</style>
<div class="all">
all--one
</div>
<span class="all">all--one
</span>
<div class="one" title="showOne">
one
</div>
显示:
2.标签选择器
<!---筛选器---类型选择符(标签选择符)-->
<!--支持IE7+-->
<style type="text/css">
a {
text-decoration: underline;
color: blue;
} div {
margin: 10px;
border: 1px solid gray;
} a:hover {
font-size: 15px;
} a[class=bye]:hover {
color: red;
}
</style>
<div>
<a href="#">百度</a>
</div>
<div>
<a href="#">腾讯</a>
</div>
<div>
<a href="#" class="bye">阿里巴巴</a>
</div>
3.ID选择器和类选择器
<!-- 筛选器---ID选择器--类选择器---->
<!--支持IE7+-->
<style type="text/css">
#red {
color: red;
border: 1px solid red;
padding: 10px;
} .green {
color: green;
border: 1px dashed green;
margin: 10px;
} div.green {
font-size: 20px;
}
</style>
<div id="red">
red
</div>
<div class="green">
green
</div>
4.属性选择器
<!--筛选器--属性选择符-->
<!--支持IE7+(使用的时候最好对value加引号)-->
<style type="text/css">
div.name1 {
color: red;
} div[title=name2] {
color: green;
} div[title='name2'] {
font-size: 30px;
} div[data-id='1'] {
color: blue;
}
</style>
<div class="name1">
12341234
</div>
<div title="name2">asdfasdf</div>
<div data-id="1">First</div>
5.包含选择器、子对象选择器、分组选择器
<!--筛选器---包含选择器--子对象选择器--分组选择器-->
<!-- 支持IE7+ -->
<style type="text/css">
/*包含选择器*/
div a {
text-decoration: underline;
} .green a:hover {
font-size: 20px;
}
/*子对象选择器(直接子Dom)*/
.outer > a {
color: green;
border: 1px dashed gray;
display: inline-block;
padding: 5px;
} .outer > a:hover {
font-size: 20px;
} /*分组选择器*/
.blue, .green {
border: 1px solid gray;
margin: 20px 0px;
}
</style>
<div class="outer">
<a href="#">淘宝超链接</a>
<span class="red">中国红
</span>
<div class="blue">
深沉蓝
</div>
<div class="green">
<a href="#">百度链接</a>
</div>
</div>
6.伪类及伪对象选择器
<!--筛选器--伪类及伪对象选择器-->
<!--支持IE7+-->
<style type="text/css">
/*伪类对象*/
.one {
border: 1px solid gray;
margin: 10px;
} .one:first-line {
color: green;
} div.one:first-letter {
color: red;
font-size: 30px;
} /*伪类---*/
.linkDiv {
border: 1px solid green;
margin: 10px;
} .linkDiv span:first-child {
font-size: 20px;
} .linkDiv span:hover {
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
<div class="one">
中文教程
<br />
英文教程
<br />
asdfasdf
</div> <div class="linkDiv">
<span class="superLink">淘宝</span>
<br />
<span class="superLink">百度</span>
<br />
<span class="superLink">腾讯</span>
<br />
</div>
CSS筛选器简单实例1的更多相关文章
- 【WCF】自定义地址头的筛选器
前面的文章中,老周已向大伙伴们介绍了如何在终结点上使用地址头,只要服务是沿着该终结点调用的,那么每一次调用都会自动把地址头插入到SOAP消息的Header列表中. 而通过前一篇文章中的示例,大家也看到 ...
- mvc 筛选器
之前公司中,运用ActionFilterAttribute特性实现用户登录信息的验证,没事看了看,留下点东西备忘. 好的,瞅这玩意一眼就大概能猜到这货是干嘛的了吧,没错,action过滤器.其实就是A ...
- jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- ISAPI筛选器及对ASP源文件的保护
ISAPI筛选器及对ASP源文件的保护 2009-04-21 01:45:57 标签:ISAPI 筛选器 ASP 源文件 保护 摘要:本文介绍了利用ISAPI筛选器保护ASP源文件的方法,并给出一个实 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- 表示层设计模式:Intercepting Filter(截取筛选器)模式
上下文 问题 影响因素 解决方案 变体 示例 结果上下文 相关模式 致谢 上下文 对于任何一个曾经从头建立 Web 应用程序的人来说,他们都会有这样的体会:这项任务所需要的独立完成 ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
随机推荐
- Ubuntu + hadoop2.6.0下安装Hive
第一步:准备hive和mysql安装包 下载hive 1.1.1 地址:http://www.eu.apache.org/dist/hive/ 下载Mysql JDBC 5.1.38驱动:http:/ ...
- 原创:2016.4.25-2016.5.1 C# informal essay and tittle_tattle
1.Some tips of the Time in C sharp (1) How to define the category of the "Datetime"? date ...
- MFC软件工程架构模型-模式窗口-非模式窗口
1. SDI单文档界面: MDI多文档界面.有多个"关闭-最大化-最小化"等这样的窗口嵌套 基于对话框的软件模型 2.模式对话框和非模式对话框 模式对话框:使用DoMoel(),弹 ...
- No2_2.接口继承多态_Java学习笔记_继承
***类的继承***1.继承的实现extends2.[修饰符] class 子类名 extends 父类名{}3.修饰符一般为:public abstract final4.重写是指父子类之间的关系, ...
- 运行一个Hadoop Job所需要指定的属性
1.设置job的基础属性 Job job = new Job(); job.setJarByClass(***.class); job.setJobName("job name") ...
- cobbler之ks文件示例
#platform=x86, AMD64, or Intel EM64T #version=DEVEL # Firewall configuration,关闭防火墙 firewall --disabl ...
- Log4net从下载到使用例子
一.首先下载log4net.dll http://pan.baidu.com/s/1gdigrwJ 二.添加log4net引用 三.代码: using System; using System.C ...
- [bzoj1002][FJOI2007 轮状病毒] (生成树计数+递推+高精度)
Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下图 ...
- gulp编译less简单demo
写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
- 正则匹配<img src="xxxxxx" alt="" />标签的相关写法
1.(<img\ssrc[^>]*>) 2.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*&g ...