目录

  1. 通用选择器
  2. 高级选择器

通用选择器

通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示。

语法:

* { property1: value; property2: value; }

示例:

* { margin:; padding:;}

这行代码可以删除每个元素在浏览器中margin和padding的默认值。不同的浏览器对元素的默认margin和padding可能不同,用通用选择器把所有元素的margin和padding都设置为0方便我们精确地控制元素的margin和padding。

此处我们以IE11为例看一下实际效果:

当我们想要h1距离下一个元素的距离为20(此处假设下一个元素的margin-top, padding-top和border-weight都是0),可以通过设置padding-bottom为20px来实现,但观察效果却发现h1距离下一个元素远不止20px,这是由于IE11对h1有一个默认的margin值(可以观察到其实body也是有默认margin的),可以通过通用选择器来修复这个问题:

子选择器

后代选择器选择一个元素的所有后代,而子选择器只选择元素的直接后来,即后代的后代不会受影响。

语法:

selector > child { property1: value; property2: value; }

示例:

<html>
<head>
<style type="text/css">
#test>li{padding-left:30px;}
</style>
</head>
<body>
<ul id="test">
<li>A</li>
<li>B</li>
<li>C
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
<li>D</li>
</ul>
</body>
</html>

效果图:

#test>li{padding-left:30px;}

这行代码选择了id为test的子元素li,并将padding-left设置为30px,可以看到 li 标签内部的无序列表项目没有发生变化。若将以上代码改为

#test li{padding-left:30px;}

再来看一下效果图:

li中无序列表项的padding也发生了相应改变。

Note: 只有IE7机器更高版本浏览器才支持子选择器。

相邻兄弟选择器

相邻兄弟选择器可以选择同一个父元素下某个元素之后的元素,并对其应用样式。

示例:

<html>
<head>
<style type="text/css">
h1+p{color:Red;}
</style>
</head>
<body>
<h1>小胖搞IT</h1>
<p>一个胖子从楼上掉下来...</p>
<p>然后............</p>
<p>奇迹发生了!</p>
<p>他弹了起来!</p>
</body>
</html>

效果图:

h1+p{color:Red;} 

这行代码选择了h1元素的下一个元素p,并将其设置为红色。

Note: 只有IE7机器更高版本浏览器才支持子选择器。

一个子选择器和相邻兄弟选择器结合使用的例子:

<html>
<head>
<style type="text/css">
#test > h1 + p {color:Red;}
</style>
</head>
<body>
<div id="test">
<h1>小胖搞IT</h1>
<p>一个胖子从楼上掉下来...</p>
<p>然后............</p>
<p>奇迹发生了!</p>
<p>他弹了起来!</p>
<div>
<h1>瘦子搞IT</h1>
<p>一个瘦子从楼上掉下来...</p>
<p>然后............</p>
<p>奇迹没有发生!</p>
<p>他摔死了!</p>
</div>
</div>
</body>
</html>

效果图:

#test > h1 + p {color:Red;}

这行代码选择了id为test的元素的h1子元素,再找到它的下一个兄弟元素p,并设置为红色, <h1>瘦子搞IT</h1> 不是id为test的div的子元素,故没有变化。

属性选择器

属性选择器可以根据某个属性是否存在或根据属性的值来寻找元素,并对其使用样式。

语法:

示例:

<html>
<head>
<style type="text/css">
a[title]{font-size:30px;}
a[title="Fatty"]{color:Red;}
a[title~="Fatty"] {font-weight:bold;}
a[title|="FattyDoIT"] {font-style:italic;}
a[title^="F"]{text-decoration:line-through; }
a[title$="IT"]::before {content:url(star.png);}
a[title*="Do"]::after {content:url(heart.png);}
</style>
</head>
<body>
<a href="http://www.cnblogs.com/fattydoit/">小胖搞IT</a><br>
<a href="http://www.cnblogs.com/fattydoit/" title="FattyDoIT">小胖搞IT</a><br>
<a href="http://www.cnblogs.com/fattydoit/" title="Fatty">小胖搞IT</a><br>
<a href="http://www.cnblogs.com/fattydoit/" title="Fatty Do IT">小胖搞IT</a>
</body>
</html>

效果图:

a[title]{font-size:30px;}

这行代码选择了所有具有title属性的a元素,并将字体大小设置为30px;

a[title="Fatty"]{color:Red;}

这行代码选择title值为Fatty的a元素,并将字体颜色设置为红色;

a[title~="Fatty"] {font-weight:bold;}

这行代码选择title所有属性值中包含Fatty的a元素,并将字体加粗;

a[title|="FattyDoIT"] {font-style:italic;}

这行代码选择title值以FattyDoIT开头且是一个单词的a元素,并将字体改为斜体;

a[title^="F"]{text-decoration:line-through; }

这行代码选择title属性值以F开头的所有a元素,并设置text-decoration为line-through;

a[title$="IT"]::before {content:url(star.png);}

这行代码选择title属性值以IT结尾的所有a元素,并在之前放置一张图片;

a[title*="Do"]::after {content:url(heart.png);}

这行代码选择title属性值中包含Do的所有a元素,并在之后放置一张图片。

Note: 只有IE7机器更高版本浏览器才支持子选择器。

参考资料:

CSS选择器详解(二)通用选择器和高级选择器的更多相关文章

  1. CSS系列(8) CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  2. web前端学习(三)css学习笔记部分(6)-- 选择器详解

    9.选择器详解 9.1  属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概 ...

  3. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  4. web前端学习(三)css学习笔记部分(4)-- CSS选择器详解

    4.  元素选择器详解 4.1  元素选择器 4.2  选择器分组 用英文逗号","相连,使用相同的样式表 使用通配符对所有元素进行通用设定. 4.3  类选择器详解 4.3.1. ...

  5. css 10-CSS3选择器详解

    10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...

  6. CSS3 基础(1)——选择器详解

    CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...

  7. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  8. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  9. pika详解(二) BlockingConnection

    pika详解(二) BlockingConnection   本文链接:https://blog.csdn.net/comprel/article/details/94592348 版权 Blocki ...

  10. Shiro 安全框架详解二(概念+权限案例实现)

    Shiro 安全框架详解二 总结内容 一.登录认证 二.Shiro 授权 1. 概念 2. 授权流程图 三.基于 ini 的授权认证案例实现 1. 实现原理图 2. 实现代码 2.1 添加 maven ...

随机推荐

  1. XML--修改XML数据

    DECLARE @xmlDoc XMLset @xmlDoc='<root> <book id="0001"> <title>C# Progra ...

  2. C# 调用Delphi dll

    delphi dll 源码: library dllres; type char10 = ..] of char; TMydata = packed record id: Integer; name: ...

  3. 目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto

    “浏览器内核”主要指渲染引擎(Rendering Engine),负责解析网页语法(如HTML.JavaScript)并渲染.展示网页.因此,所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎,渲染引 ...

  4. Thread类

    Thread类相对于线程池中的线程,使用者有更多的控制权.该类允许创建前台线程,设置线程优先级等.Thread类的构造函数重载为接受ThreadStart和ParameterizedThreadSta ...

  5. 解决ie img标签内存泄漏

    代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  6. Schema validation found non-datatype errors

    Private Sub UpdateClaim(ByVal Status As String, ByVal Request As String) '======================' Im ...

  7. Android 多图,大图内存优化

    策略: 1. 图片压缩 如果所需尺寸大于图片原始尺寸,可以压缩图片节省内存. 2. 图片缓存 每个图片加载时都会生成一个 Bitmap.把这些 Bitmap 缓存起来以重用相同的图片,避免重复创建. ...

  8. HTTP调用接口方法

    1.创建接口调用方法类 package cn.com.victorysoft.sjzx.Message; import java.io.BufferedReader; import java.io.I ...

  9. SUBSET

    DESCRIPTION:一开始你有一个空集,集合可以出现重复元素,然后有Q 个操作1. add s在集合中加入数字s.2. del s在集合中删除数字s.保证s 存在3. cnt s查询满足a& ...

  10. P4211[BZOJ 3626] [LNOI2014]LCA

    题目描述 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. 设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先. 有q次询问,每 ...