选择器及优先级
一、选择器
1. 基本选择器
① 元素选择器（标签）
② ID选择器（唯一性 ）
③ 类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /* 元素选择器 */ p{ color: red; } /* ID选择器 */ #poem{ color: green; } /* 类选择器 */ .line{ color: blue; } /* 字体颜色为绿色，涉及优先级问题 */ </style> </head> <body> <p id="poem" class="line">春宵一刻值千金，花有清香月有阴。</p> </body> </html>
2. 复合选择器
① 交集选择器
② 并集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复合选择器</title> <style> /* 交集选择器 */ p.line{ font-size: 20px; } /* 并集选择器 */ h5,p{ color: green; } </style> </head> <body> <h5>春宵</h5> <p id="poem" class="line">春宵一刻值千金，花有清香月有阴。</p> <p>歌管楼台声细细，秋千院落夜沉沉。</p> </body> </html>
3. 关系选择器
① 子元素选择器
② 后代选择器
③ 兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关系选择器</title> <style> /* 子元素选择器 */ div > span{ color: red; /* 只有div下的直接子元素span的字体为红色 */ } /* 后代选择器 */ div span{ color: green; /* span字体都为绿色 */ } /* 兄弟选择器 */ p + span{ color: purple; /* 标签p的下一个兄弟span元素的字体为紫色 */ } p ~ span{ color: blue; /* 标签p的所有兄弟span元素的字体为蓝色 */ } </style> </head> <body> <div> <p>春宵</p> <p><span>唐</span>苏轼</p> <span>春宵一刻值千金，花有清香月有阴。</span> <br> <span>歌管楼台声细细，秋千院落夜沉沉。</span> </div> </body> </html>
4. 属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* [属性名] 选择含有指定属性的元素 [属性名 = 属性值] 选择含有指定属性和属性值的元素 [属性名 ^= 属性值] 选择以属性值开头的元素 [属性名 $= 属性值] 选择以属性值结尾的元素 [属性名 *= 属性值] 选择含有属性值的元素 */ /* p[title]{ color: red; } p[title = abc]{ color: green; } p[title ^= abc]{ color: blue; } p[title $= de]{ color: yellow; } p[title *= cd]{ color: pink; } */ </style> </head> <body> <div> <p title="abc">春宵</p> <p title="abcde"><span>唐</span>苏轼</p> <p title="cde">春宵一刻值千金，花有清香月有阴。</p> <p title="cd">歌管楼台声细细，秋千院落夜沉沉。</p> </div> </body> </html>
5. 伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 伪类（不存在的类，特殊的类） - 伪类用来描述一个元素的特殊状态 伪类的声明 - :开头 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个子元素 特殊值： n n的范围：0~正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素 - 以上的这些伪类是在所有子元素中进行排序 :first-of-type :last-of-type :nth-of-type() - 用法与上述类似，不同：在同类元素中进行排序 */ /* ul > li:first-child{ color: red; /*ul下的直接子元素中第一个元素不是li，则字体颜色没有发生改变*/ } ul > li:last-child{ color: red; } ul > li:nth-child(2){ color: red; /* ul直接子元素中，所有子元素的第一个元素为li时，字体颜色为红色 */ } ul > li:nth-of-type(2){ color: red; /* ul直接子元素中，同类元素li的第二个li */ } */ </style> </head> <body> <ul> <span>古诗</span> <li>春宵</li> <li>苏轼</li> <li>春宵一刻值千金，花有清香月有阴。</li> <li>歌管楼台声细细，秋千院落夜沉沉。</li> </div> </body> </html>
二、伪元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素</title> <style> /* 伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置） 伪元素的声明： - ::开头 ::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的内容 ::before 元素的开始 ::after 元素的最后 - before 和 after 必须结合content属性来使用 */ p::first-letter{ font-size: 40px; } /* p::first-line{ background-color: blue; } */ p::selection{ background-color: yellow; } h3::before{ content: '“'; } h3::after{ content: '”'; } </style> </head> <body> <div> <h3>尘封在沙漏里的友谊</h3> <p>曾经我们坚信海誓山bai盟过后沉淀的必定是坚贞不移、此生不离；曾经我们坚信彼此的心圈在一个核里哪怕时光穿梭也毫无芥蒂；曾经你赠我沙漏与我互定永久告诉我亘古不变天荒地老的情谊。那些曾经在我最灿烂的年华里伴我左右。</p> <p>然而，所有的事，由平淡开始，终究归于平淡。如你，亦如我 。那些曾经我们牵手一起走过的小巷如今留与我一人独步；那些曾经我们欢笑的地方如今留与我含泪目睹；那些曾经我们惦念的往昔如今在记忆里残存过渡。只是那些幻影，那么不小心掉进了我的回忆里。</p> <p>你说，我温柔得会被蚊子咬死。我说，你的心脆弱得比玻璃易 碎。可是，我们都那么倔强，连性格仿佛都摹刻在一个雕版里，以至于以后的岁月里争吵不断。</p> <p>你说，我们上辈子是不是仇人，于是，我们会心地一笑。那么多年过去，那么争吵过来，我却一直未曾告诉过你，我们的情谊，一直在我的心里，占据主体。只是，我们用自己冷漠的心，掘了一条无法跨越的鸿沟。</p> <p>这些年来，那么快，不知不觉，过来那么久，我却依旧寻不到当年那个模样的沙漏。你送我的沙漏，如同我们的友谊，无法复制，不可摹刻。</p> <p>你说，我的世界关得太紧，让人无法走进。这一句的辛酸被我悄悄藏在了心底。我世界的门一直敞开，而你早已住进了我的心里。只是，你却毫无知觉。</p> <p>如今，你的身边是否有知己，代替我陪你走？她知不知道你的倔强？她理解不理解你倔强的外表下柔弱的心？她会不会和你肆无忌惮大笑时安抚你实际悲痛的心伤？我们都要幸福。</p> </div> </body> </html>
2.1 <a>标签的伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a元素的伪类</title> <style> /* :link 用来表示没访问过的链接（正常链接） */ a:link{ color: red; } /* :visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接颜色 */ a:link{ color: orange; /* font-size: 50px; */ } /* :hover 用来表示鼠标移入的状态 */ a:hover{ color: purple; font-size: 50px; } /* :active 用来表示鼠标点击 */ a:active{ color: yellowgreen; } </style> </head> <body> <a href="http://www.baidu.com">访问过的链接</a> <a href="http://www.taobao.com">没访问过的链接</a> </body> </html>
三、选择器的权重（解决样式冲突）
| 内联样式 | 1000 |
css样式的三种方式： ① 内联样式/行内样式 ② 内部样式表 ③ 外部样式表 - 优先选择，理由：加载后可暂时缓存在浏览器里，再次应用可以不再加载，直接使用 |
| id选择器 | 100 | |
| 类和伪类选择器 | 10 | |
| 元素选择器 | 1 | |
| 通配符选择器 | 0 | |
| 继承的样式 | 没有优先级 | |
|
优先级的比较：通过所有选择器的优先级进行相加获得。 若优先级计算相同，则使用就近原则。 |
||
|
可以在某一个样式后添加 !important ,则此时样式权重最高，甚至超过内联样式。（慎用） |
||
