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. python之RabbitMQ

    一.安装RabbitMQ 1. 安装erlang 1 2 3 4 tar xf otp_src_18.3.tar.gz cd otp_src_18.3 ./configure --prefix=/ma ...

  2. 在ubuntu 14.04上安装2.6的内核

    1.到http://www.kernel.org/pub/linux/kernel/v2.6/linux-2.6.32.tar.bz2这里下载最新的稳定版内核: 2.根据各自系统,安装如下软件:l b ...

  3. Android BinderService 过程

    步骤:建立服务器端服务,暴露接口 1.BinderService /** * @Title BinderService.java * @package cn.boxai.binderservice * ...

  4. centos6.6_64位操作系统安装时候出现kernel panic - not syncing: Attempted to kill init 解决办法

    最近在VM上安装centos时候经常被这个问题虐,后来进入单用户模式在   kernel /vmlinuz-XXXXro root=/dev/vogroup00/logvol00 rhgb quie  ...

  5. 一个简单的loading，纯属自娱自乐

    /// <reference path="/scripts/js/jquery.min.js" /> var zsw = { loading: function (im ...

  6. F12定义到元数据问题解决

    删除引用中的该dll,重新引用选择解决方案下的项目引用,下次F12就不会进入到元数据而是进入到源代码中方便调试

  7. JavaACOFramework的各个类介绍(part1 : Ant类)

    public abstract class Ant extends Observable implements Runnable { public static int ANT_ID = 1; // ...

  8. python实用小技巧自问自答系列(一)：查看类中函数文档doc的方法

    问题:如何查看某个类的方法文档说明或者是函数的参数列表情况? 答: 方法一:直接在需要查询的方法后面加上".__doc__"即可以打印出该方法的文档说明(需要先导入该方法所属模块) ...

  9. phpstorm 设置Utf8编码

    点击file 再点击setting 找到file Encoding gbk改成utf-8就ok了

  10. Java开发基础

    天数 课程 01 Java基础回顾 集合 泛型 IO流 多线程 Junit Properties   HTML   JavaScript   JavaScript   BOM编程   XML基础   ...