css选择符
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选择符的更多相关文章
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
- CSS选择符详解
一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} ...
- 编写高效的CSS选择符（节选）
最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. ...
- JQuery学习笔记【CSS选择符】--02
Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...
- CSS选择符详解之关系选择符篇
原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...
- 整理CSS选择符
1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...
- [css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- css选择符权重
css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...
- CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1) id选择器(# myid) ...
- CSS选择符——分门别类
CSS选择符--分门别类 有时候,老是会对一些CSS选择器模模糊糊,傻傻分不清.今天花了点时间整理了一下,感觉世界清静了不少. 用XMIND做出了思维导图: 主要有11中选择器:元素.类ID.后代.子 ...
随机推荐
- 据说年薪30万的Android程序员必须知道的帖子
Android中国开发精英 目前包括: Android开源项目第一篇--个性化控件(View)篇 包括ListView.ActionBar.Menu.ViewPager.Gallery.G ...
- 关于GDB使用
编译时要加上 -g 才可以提供给gdb符号信息. 启动: $gdb (target-program) 单步执行: $n 设断点: 1.程序入口 $break (functionname()) 2.行 ...
- jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
代码如下: setFocus=function(id){ var t=$("#"+id).val(); $("#"+id).val(""). ...
- 2014鸟人Birdman中文字幕文件下载
下载后,解压缩,会得到 Birdman.2014.1080p.WEB-DL.DD5.1.H264-RARBG.srt 文件,把这个文件放到视频文件(mkv文件)相同的文件夹里. 用暴风影音播放,如果没 ...
- C语言之实现函数返回一个数组，以及选择排序，还有折半查找。这是同学的一个作业。。。
作业的具体要求如下: 编写一个完整的程序,实现如下功能.(1) 输入10个无序的整数.(2) 用选择排序法将以上接收的10个无序整数按从大到小的顺序排序.(3) 要求任意输入一个整数 ...
- Q
- exel中合并一列相同的数据到一行
Sub 按钮1_Click() Application.ScreenUpdating = False arr = Range("a1:c" & [a65536].End(x ...
- Bootstrap使用初涉
在这里记录一下搭建Bootstrap的开发环境: 首先手头上的有Bootstrap的相关资料,这里用的是bootstrap-3.3.5-dist. 在开发一个Web项目的时候要将述的资料都导入到项目中 ...
- 命令行用sublime打开当前目录
执行 ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" subl 就可以在命令行用 ...
- Unity3d外包（北京）公司（长年承接U3D外包）
我们制作各类型严肃游戏,虚拟现实,增强现实项目! 品质保证,售后完备. 联系请加QQ:372900288 电话:13911652504 我们团队成立于2011年10月,是一个专业从事严肃游戏研发的团 ...