CSS篇-CSS3 选择器总结 及优先级

优先级问题

浏览器初始继承样式 优先级 最低 0 是出生的时候带的

选择器	优先级	权重
标签选择器	低	1
类 , 伪类选择器 , 属性选择器	低	10
id选择器	中	100
内联样式选择器	高	1000
!important	最高	大于 1000

常用的选择器总结

1. 通用选择器

选中dom页面中所有的元素

* {padding:0;margin:0}

2. 元素选择器 （以下以element来指代元素标签名

元素标签名称{ 样式声明 }      
选择所有的 元素标签 代表的元素
如下：选择所有的`<p>`元素标签

p {}

3. 类式选择器

.类名{ 样式声明 }
选择所有 class="className"的元素4

.className {}

4. id选择器

#id名称{ 样式声明 }
选择 id="id名称" 的元素

#idName {}

5. 组合选择器

element1,element2 { 样式声明 }
选择所有的 element1 和 element2 元素

div,p{/*选择所有的div 和 p 元素*/}

6. 后代选择器

element1 element2 { 样式声明 }
选择 element1 元素内的所有 element2元素

div p {/* 选择div元素内的所有p元素 */}

7. 子类选择器

element1 > element2 { 样式声明 }
选择所有父级元素是element1元素的 element2元素

div > p {/* 选择所有父级元素是 div 的 p 元素 */}

8. 兄弟选择器

element1 + element2 { 样式声明 }
选择所有紧接着element1元素之后的element2元素
element1 ~ element2 { 样式声明 }
选择element1元素后面所有的 element2元素

div + p {/* 选择所有紧接着 <div> 元素之后的 <p> 元素 */}
div ~ p {/* 选择 <div> 元素后面所有的 <p> 元素 */}

9. 属性选择器 暂时记录以下三种

9.1 [attriBute]
选择所有带有 某种属性的 元素

[target] {/* 选择所有带有target属性元素 */}

9.2 [attriBute=value]
属性等于指定值的元素

[target=name] {/* 选择带有target="_blank"属性的所有元素 */}

9.3 [attriBute~=value]
所有属性值中含有 value的元素

[target~=name] {/* target属性中包含单词 name 的所有元素 */ }

9.4 [attribute|=value]
选择attribute属性 值以value开头的所有元素

[lang|=en]	{ /* 选择 lang 属性值以 "en" 开头的所有元素。*/}

9.5 [attribute^=value]

a[href^="https"] { /* 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 */}

9.6 [attribute$=value]

a[href$=".pdf"]	{ /* 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。*/ }

9.7 [attribute*=value]

a[href*="abc"] { /* 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素 */ }

10. 伪类选择器

10.1 普通伪类选择器

a:link { /* 选择所有未访问过的链接。 */}
a:visited   { /* 选择所有 访问过 的链接 */ } 
a:hover   { /* 鼠标移上div上触发的样式，离开重新恢复 */ } 
a:active    { /* 选择所有的活动链接 */ }   
input:focus { /* 选择具有焦点的输入元素 */ } 

10.2 结构伪类选择器

p:first-of-type	{ /* 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。*/ }
p:first-child { /* 选择每个是其父级的第一个子元素的<p>元素 */}
p::first-letter	{ /* 选择每个 <p> 元素的首字母 */ }
p::first-line	{ /* 选择每个 <p> 元素的首行。 */ }
p:last-of-type	{ /* 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。*/ }
p:last-child { /* 选择每个是其父级最后一个子元素的<p>元素 */}
p:nth-child(2) {/* 选择每个 是其父级的 第二个 子元素的<p>元素 */}
p:nth-last-child(2)	{ /* 同上，从最后一个子元素开始计数 */ }
p:nth-of-type(2) { /* 选择属于其父元素第二个 <p> 元素的每个 <p> 元素 */ }
p:nth-last-of-type(2) { /* 同上，从最后一个子元素开始计数 */ }
p:only-of-type { /* 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。*/ }
p:only-child { /* 选择属于其父元素的唯一子元素的每个 <p> 元素。*/ }

10.3 伪类生成器选择器

div:after { content:"";display:block;}/*在每个 <div> 的内容之后插入内容。*/
div:before {content:"";display:block;}/*在每个 <div> 的内容之前插入内容。*/

11. 否定伪类选择器 :not(selector)

:not(p) { /* 选择每个并非p标签的元素 */ }