一、CSS权重概念
CSS权重概念：指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
二、权重的等级
- 2.1、权重的等级划分
- 1、
!important，加在样式属性值后，权重值为 10000 - 2、内联样式，如：
style=""，权重值为1000 - 3、ID选择器，如：#content，权重值为100
- 4、类，伪类和属性选择器，如： content、:hover 权重值为10
- 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
- 2.2、权重的计算实例一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3权重</title> <style type="text/css"> div{ color:red !important; } </style> </head> <body> <div style="color:blue">这是一个div元素</div> </body> </html>
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，所以文字的最终颜色为red
- 2.3、权重的计算实例二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3权重计算2</title> <style type="text/css"> #content div.main_content h2{ color:red; } #content .main_content h2{ color:blue; } </style> </head> <body> <div id="content"> <div class="main_content"> <h2>这是一个h2标题</h2> </div> </div> </body> </html>
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2 标题的最终颜色为red
- 最后提示：权重的和越大，样式的优先级越高！
三、CSS3新增选择器
- 3.1、E:nth-child(n)：匹配元素类型为E(标签的名字，如：div,p,span等等)且是父元素的第n个子元素，如下的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3新增选择器</title> <style type="text/css"> .list{ width: 200px; height: 200px; background-color: green; } .list div{ width: 100px; height: 30px; background-color: brown; margin: 10px; } .list div:nth-child(2){ background-color: yellow; } </style> </head> <body> <div class="list"> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </body> </html>
提示：
.list div:nth-child(2)其中的2代表list里面的第2个div
- 3.2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
- 3.3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
- 3.4、E > F E元素下面第一层子集
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS新增选择器2</title> <style type="text/css"> .list{ width: 200px; height: 230px; background-color: green; } .list div{ width: 100px; height: 30px; background-color: brown; margin: 10px; } .list div>h1{ width: 50px; height: 20px; background-color: yellow; font-size: 12px; } </style> </head> <body> <div class="list"> <div> <h1>第1个h1</h1> </div> <div> <h1>第2个h1</h1> </div> <div>4</div> <div>5</div> <h1>第3个h1</h1> </div> </body> </html>
- 3.5、
E + F紧挨着的后面的兄弟元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS新增选择器3</title> <style type="text/css"> .list{ width: 200px; height: 330px; background-color: green; } .list div{ width: 100px; height: 30px; background-color: brown; margin: 10px; } .list h1{ width: 80px; height: 20px; font-size: 10px; background-color: brown; margin: 10px; } /* E + F 紧挨着的后面的兄弟元素 */ .list div+h1{ background-color: yellow; } </style> </head> <body> <div class="list"> <div>1</div> <h1>第1个h1</h1> <h1>第2个h1</h1> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
- 3.6、
E ~ FE元素后面的兄弟元素
、
四、属性选择器
- 4.1、
E[attr]含有attr属性的元素或者E[attr='ok']含有attr属性的元素且它的值为“ok”,如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器1</title> <style type="text/css"> div{ color: brown; } div[data-attr='ok']{ color:red; } </style> </head> <body> <div data-attr="ok">这是1个div元素</div> <div>这是2个div元素</div> </body> </html>
- 4.2、
E[attr^='ok']含有attr属性的元素且它的值的开头含有“ok”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器2</title> <style type="text/css"> div{ color: brown; } div[data-attr^='ok']{ color:red; } </style> </head> <body> <div data-attr="ok123">这是1个div元素</div> <div>这是2个div元素</div> </body> </html>
- 4.3、
E[attr$='ok']含有attr属性的元素且它的值的结尾含有“ok”
4.4、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”
