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. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  2. WCF中的流

    https://msdn.microsoft.com/zh-cn/library/ms733742.aspx

  3. 20161106PM-接口

    使用网址:http://apistore.baidu.com apikey:1f1d014aee0adeddbe33a6e1f55f7925 Composer GET http://apis.baid ...

  4. sql-ASCII函数运用

    declare @a int = ASCII('A') declare @b int = ASCII('F') declare @c int = 1 while(@a <= @b) begin ...

  5. final finally finalize

    final  //如果不是final 的话,我可以在checkInt方法内部把i的值改变(有意或无意的,       //虽然不会改变实际调用处的值),特别是无意的,可能会引用一些难以发现的BUG   ...

  6. VS.Net 2015 Update3 学习(2) jquery-form, jquery-validation，jquery-validation-unobtrusive一起用

    我觉DataAnnotations非常酷的一个功能.但是教程中的@ajaxform的却不怎么优雅,需要全局的onSucces等函数.因此我使用jquery-form做ajax提交. function ...

  7. Strus2第一次课：dom4j解析xml文档

    xml文本标记语言: 常用于交换数据:独立于操作系统.编程语言数据存储:xml数据配置:灵活性强,可读性高可以使用css样式改变xml样式 xml解析技术:dom解析xml技术: sax解析xml技术 ...

  8. 【IOS 开发】Object - C 入门 之 数据类型详解

    1. 数据类型简介及输出() http://www.把下面的替换我.com/html/topnews201408/79/1279.htm csdn123

  9. IntrospectorCleanupListener作用

    <!--web.xml--><listener> <listener-class>org.springframework.web.util.Introspector ...

  10. windows字符串

    CString在win32环境下最大的有效长度应该是INT_MAX-1 一般小于这个长度的文件,处理字符串都没问题. TCHAR字符串数组没有处理子串的相关函数,strchr(_tcschr)只是处理 ...