E>F：子选择符，选择所有作为E元素的子元素F。
<style type="text/css">
li>a {color: #ccc;}
</style>
</head>
<body>
<li><a href="">项目列表一</a>
<ul>
<li>列表1</li>
<li>列表2</li>
</li>
</ul>
<li><a href="">项目列表二</a>
<ul>
<li>列表1</li>
<li>列表2</li>
</li>
</ul>
选择li元素下所有a链接。

E+F：相邻选择符，选择选择紧贴在E元素之后F元素。
<style type="text/css">
h1+p {color:red;}
</style>
</head>
<body>
<h1><p>这是一个标签</p></h1>
<p>这是一个标签</p>
<h2><p>这是一个标签</p></h2>
选择h1之后的p元素

E~F：兄弟选择符，选择E元素所有兄弟元素F。
<style type="text/css">
h1~p {color:red;}
</style>
</head>
<body>
<h1>这是一个标签</h1>
<p>样式</p>
<b>这是一个标签</b>
<p>样式</p>
<p>样式</p>
选择h1后所有的p元素

伪类选择符：
E:link 设置超链接a在未被访问前的样式。
E:visited 设置超链接a在其链接地址已被访问过时的样式。
E:hover 设置元素在其鼠标悬停时的样式。
E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

<style type="text/css">
a:link { text-decoration: none;color: black;}
a:visited {color: orange;}
a:hover {color: purple;}
a:active {background-color: green;color: red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">a链接</a>
</body>

E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。

<style type="text/css">
input:focus {outline: 1px solid blue;}
</style>
</head>
<body>
<input type="search" autofocus />
</body>

E:lang(fr) 匹配使用特殊语言的E元素。
E:not(s) 匹配不含有s选择符的元素E。
E:root 匹配E元素在文档的根元素。常指html元素
E:first-child 匹配父元素的第一个子元素E。
E:last-child 匹配父元素的最后一个子元素E。
E:only-child 匹配父元素仅有的一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty 匹配没有任何子元素（包括text节点）的元素E。
E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target 匹配相关URL指向的E元素。

css选择符的更多相关文章

  1. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  2. CSS选择符详解

    一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} ...

  3. 编写高效的CSS选择符（节选）

    最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. ...

  4. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  5. CSS选择符详解之关系选择符篇

    原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...

  6. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  7. [css选择器]总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  8. css选择符权重

    css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...

  9. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) ...

  10. CSS选择符——分门别类

    CSS选择符--分门别类 有时候,老是会对一些CSS选择器模模糊糊,傻傻分不清.今天花了点时间整理了一下,感觉世界清静了不少. 用XMIND做出了思维导图: 主要有11中选择器:元素.类ID.后代.子 ...

随机推荐

  1. 使用Xmanager远程访问Redhat Enterprise Linux 6.1

    使用Xmanager远程访问Redhat Enterprise Linux 6.1   在Linux服务器开启gdm 配置防火墙 配置selinux 使用xmanager连接linux服务器 在Lin ...

  2. oracle 锁表问题

    oracle执行表数据更新的时候,会遇到锁表问题,比方说,会遇到这样的问题,主要原因是这张表被其他人占用,修改数据没有提交.oracle为了避免脏数据的产生,在其安全机制下,锁住该表. 执行如下操作, ...

  3. Qt 设计师手册

    Qt设计师(Qt Designer)是使用Qt部件(Widgets)设计和使用图形用户界面(GUI)的工具.它允许我们以所见即所得的方式构建和定制自己的窗口(Windows)或对话框(Dialogs) ...

  4. less简单用法

    http://less.bootcss.comless工具:koala工具url:http://koala-app.com/index-zh.html// less import: // less 文 ...

  5. iframe布局

    代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  6. linux node安装

    安装node0.10.24版本,升级了两个版本/usr/local/src/node/0.10.24/usr/local/n/versions/node/4.4.7/usr/local/n/versi ...

  7. TestNG BeforeClass BeforeMethod Test AfterClass AfterMethod

    http://topmanopensource.iteye.com/blog/1983729 1.TestNG测试注解和Junit注解的不同以及生命周期: TestNG测试的一个方法的生命周期: @B ...

  8. AX2012单元格显示颜色 displayOption

    public void displayOption(HV_WMSLocationStatusHistory _record, FormRowDisplayOption _options){    #d ...

  9. ubuntu 跟xshell的问题

    有2个分析: 1:是windos的防火墙没有关闭 2:是虚拟机没有安装sshd服务器 ubuntu在CLI界面下输入:dpkg -l |grep ssh 因为是我安装过的sshd server   要 ...

  10. Unity脚本时间执行顺序

    1.Awake Awake用于脚本唤醒.此方法为系统执行的第一个方法,用于脚本的初始化,在脚本的生命周期中只执行一次. 2.Start Start方法在Awake之后执行,在脚本生命周期中只执行一次. ...