Css 选择器总结
2016-02-20 15:24
459 查看
选择器
div{}
对应的标签
div,p{}
所有的div和p
[lang|=en]//|=以...开头
lang规定了元素的语言。|=选取以en开头的相应的元素。|=之后跟的是单词,通常应用于lang。
p:lang(en)//lang选择器
选择lang属性以en开头的p元素。
.class
类对应的元素。#id
相应的id元素。*
所有元素div{}
对应的标签div,p{}
所有的div和pdiv p{}
div下所有的p标签div>p{}
div下的第一代子标签。div+p{}
只作用于div后一个p,如果后一个不是p则没有作用效果。p~ul{}
选取同一个父元素的p之后所有的ul。a[target]
作用于所有带target属性的a标签。a[target=_blank]
作用于所有target属性值为_blank的元素。[title*=flower]
匹配title中包含flower的元素,应用范围更广。[title~=flower]
title中包含flower的相应元素。强调一整个的单词。a[src$=".pdf"]
匹配属性src以.pdf结尾的a标签。[lang^=en]
匹配以en开头的元素,不一定是单词,应用更广,比如en遇到enn匹配成功,但是lang|=则不成功。[lang|=en]//|=以...开头
lang规定了元素的语言。|=选取以en开头的相应的元素。|=之后跟的是单词,通常应用于lang。p:lang(en)//lang选择器
选择lang属性以en开头的p元素。a:link
:link用于选取未访问过的链接的元素。a:visited
:visited用于选取访问过的链接的元素。a:active
:active选取活动链接时的状态,活动链接指的是点击后即为活动,可以按下鼠标不松开查看效果。a:hover
:hover适用于所有元素,设置鼠标浮动在上面时的效果。input:focus
当获得焦点时的状态,即点击输入框要用键盘输入时。p:first-letter
为段落中的首字母设置效果。p:first-line
为段落中的首行设置效果。p:first-of-type
选取身份为父元素的首个p元素。p:last-of-type
选取身份为父元素的最后一个p元素。p:only-of-type
如果作为唯一的p子元素,则触发状态。p:nth-of-type(2)
第二个p元素。p:nth-last-of-type(2)
与上同理,倒着数。p:first-child
选取身份为父元素的首个子元素的p标签。p:last-child
最后一个子元素,且为p标签。p:only-child
作为唯一的子元素。p:nth-child(2)
作为父元素的第二个子元素,是p标签,则触发。p:nth-last-child(2)
与上同理,从最后一个元素开始计数。p:before
在每个p元素前插入内容。p:after
在每个p元素之后插入内容。:root
设置根元素,即html文档的属性。p:empty
没有子元素的p元素。:target
当前活动的锚,锚是本页面跳转的链接,活动的猫指的是点击锚点转到时被转到的地方被认为是活动的。:enabled
指示已启用的,常用于表单上。:disabled
指示未启用的,同上。:not(p)
除了p元素的所有元素::selection{}
为页面上已选中的文字等设置样式。相关文章推荐
- CSS基础笔记
- 7个CSS单位
- CSS sprite注意事项
- CSS 设置导航菜单文字内容垂直居中
- CSS部分要点
- PHP判断客户端是手机还是电脑自动调用加载对应的CSS样式
- 清除浮动的几种方式
- css中长度尺寸的一些总结
- css
- 解读CSS布局之-水平垂直居中
- css+div制作圆角矩形的四种方法
- CSS中编写省略号代码片段
- CSS中编写省略号代码片段
- CSS3立体文字最佳实践
- DIV布局和放大
- CSS 透明度 设置 兼容IE FF
- 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页
- 前端试题-cssText?
- 【css】table
- 性能优化--JS、CSS压缩合并