CSS 3 选择器
css3叫做样式表 对页面的布局,字体,颜色,背景和其他效果做更精确的布置
支持的浏览器有 chrome safari firfox opera 甚至360都开始支持360用的是别的内核 IE10 之后也开始支持
不通过的浏览器需要不同的前缀 表示浏览器尚未成为w3c标准的一部分是浏览器的私有属性,虽然现在较新的浏览器都不需要前缀,但是为拉更好的向前兼容前缀还是少不了的
引入, link标签引入 在html中style标签内嵌 在body的标签中直接内联
属性选择器
div标签中属性为id的结尾有x的值 全部被选中
所有div标签中带有id属性的,属性值中包含box的,全部被选中
所有div标签中带有id属性的, 属性值中以box为开头的全部被选中
所有div标签中带有id属性的, 属性值必须等于box
结构性选择器
匹配文档的根元素,一般都是指的html
相邻兄弟选择器,向下查找同级的第一个span标签
:first-child第一个子元素
:last-child最后一个子元素
选取列表中的奇数偶数个
div向下所有兄弟标签为span的必须是同级
li中第5个子元素 冒号前面不能有空格
选择倍数 4*n+1 是5的倍数
否定伪类选择器 除啦id=box以外的其他的 全部选中
匹配没有任何元的的
:first-of-type:相同类型中的第一个li元素
:last-of-type相同类型中的最后一个li元素
:only-of-type唯一一个同级兄弟元素
:nth-of-type(n)第几个
UI选择器
很少一部分浏览器支持
用鼠标选中的部分进行改变
用户界面上处于禁用状态的,不可以点击和选中的
匹配用户页面状态上可用的状态,可以点击选中和输入的
伪对象选择器
部分选择器的兼容性还不是很完善
前缀兼容:浏览器自身能支持才行, 部分属性和选择器浏览器就不支持加前缀也没有效果
1,不加前缀 用双冒号单冒号都行
2,-moz-火狐中加前缀可以使用
3,欧朋不支持,加前缀也不支持-O-
总结
CSS 3 选择器的更多相关文章
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- css后代选择器(div.class中间不带空格)
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS 类选择器
在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
随机推荐
- 引入RequireJS(一)
例子 http://www.utlcenter.com/user/index.aspx 一.文件引用 <script src="Js/require.js" defer as ...
- 小试牛刀3之JavaScript基础题
JavaScript基础题 1.让用户输入两个数字,然后输出相加的结果. *prompt() 方法用于显示可提示用户进行输入的对话框. 语法: prompt(text,defaultText) 说明: ...
- iOS:最详细的创建CocoaPods私有库教程
一.感慨 说实话,创建这个CocoaPods私有库,我愣是搞了两个星期,创建的过程中,自己的感情波动是这样的:激情四射---->有点困惑----->极度困惑----->有点失望--- ...
- NGINX: 405 Not Allowed
近期做一个手机端静态网站,在wcm上网站预览的时候显示正常,网站数据发布到nginx网站服务上后,发现页面有部分不显示: 正常页面: 错误页面: 进入谷歌浏览器的Developer Tools(F12 ...
- jQuery 中 attr() 和 prop() 方法的区别
前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...
- Vcenter server 5.5上传ISO镜像
1.摘要 --- 浏览要上传的硬盘. 2.创建一个文件夹专业门存放ISO镜像. 3.选择上传文件. 4.选择文件上传即可.
- ios每日一发--仿侧边抽屉效果
效果图如下 代码实现以及思路下面分析: 代码创建导航控制器 Appdelegate.m中 #import "AppDelegate.h" #import "ViewCon ...
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- 【Selenium】4.创建你的第一个Selenium IDE脚本
http://newtours.demoaut.com/ 这个网站将会用来作为我们测试的网址. 通过录制来创建一个脚本 让我们来用最普遍的方法——录制来创建一个脚本.然后,我们将会用回放的功能来执行录 ...
- SharpZipLib 文件/文件夹压缩
一.ZipFile ZipFile类用于选择文件或文件夹进行压缩生成压缩包. 常用属性: 属性 说明 Count 文件数目(注意是在ComitUpdat之后才有) Password 压缩包密码 Siz ...