CSS3选择器
css3选择器主要分为:属性选择器和结构伪类选择器
属性选择器:
e[type="text"]{} 选择名字完全匹配的这个标签,eg:div[class="box"]{width:100px;}div中class等于box的宽度改为100px。
e[type*=""] {} *号选择的是包含的属性值
e[type^=""] {} ^号选择是以“”里面开头的标签
e[type&=""]{} &号:以“”里内容结尾的标签
结构性伪类选择器 div:first-child div:last-child div:nth-child(even)
目标伪类选择器 p:target{} UI
元素状态伪类选择器 :enabled :disabled :checked ::selection 语言伪类选择器 :lang(mingzi){}
否定伪类选择器 div :no
(标签) 动态伪类选择器 input:focus{}
通配符:标签[属性名=“value”] 匹配属性等于某特定值的元素
标签[属性名^="value"] 匹配属性包含以特定的值开头的元素 标签[属性名$="value"] 匹配属性包含以特定的值结尾的元素
标签[属性名*=“value”] 匹配属性包含含有特定的值的元素
伪对象:1):first-line伪元素选择器
2):first-letter伪元素选择器
3):before伪元素选择器
4):after伪元素选择器
结构性伪类选择器E:first-child 选择第一个子元素E ( E指的就是所要选择的标签)
E:last-child 选择最后一个子元素E
E:nth-child(n) 选择一个或多个特定的子元素 (第一个编号为1)
E:nth-last-child(n) 选择一个或多个特定的子元素,从最后一个子元素开始算
E:nth-of-type(n) 选择指定的元素,仅匹配使用同种标签的元素
E:nth-last-of-type(n) 选择指定的元素,从元素的最后一个开始计算,仅匹配使用同种标签的元素
Nth-of-type(odd)奇数 Nth-of-type(even)偶数
E:first-of-type 匹配父元素下使用同种标签的第一个子元素
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素
E:only-child 匹配父元素下仅有的一个子元素
E:only-of-type 匹配父元素下使用同种标签的唯一 一个子元素
E:empty 匹配一个不包含任何子元素的元素 ( 文本内容也被看作子元素 )
:not(e) 匹配不符合当前选择器的任何元素( 反选 )
目标伪类选择器
标签:target:匹配URl中锚点指定的元素,用此选择器可以给锚点指定的元素加样式 语法: Div:target{属性:属性值;}
UI元素状态伪类选择器E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
E::selection 用来改变浏览网页选中文本的默认效果 基本上只有 background 、color 有效果
语言伪类选择器
E:lang(language)表示选择匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language。
否定伪类选择器
:not(标签):不匹配选择符为 s 的元素。
动态伪类选择器
a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active{ color: #55b28e } /* 正在被点击的链接 */ a:active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了) input:focus用于元素成为焦点,这个经常用在表单元素上。
层级选择器
E>F,E+F,E~F