4. 元素选择器详解
4.1 元素选择器
4.2 选择器分组
用英文逗号","相连，使用相同的样式表
使用通配符对所有元素进行通用设定。
4.3 类选择器详解
4.3.1. 类选择器允许以一种独立于文档元素的方式来指定样式
.class{}
4.3.2. 结合元素选择器
a.class{} (只指定a标签内的class类)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> a.div{ color:red; } /*只改变a标签下类为div的元素样式*/ </style> </head> <body> <div class="div"> hello world! </div> <a href="#" class="div"> hello world! </a> </body> </html>
4.3.3 多类选择器
.class.class{} (设置两个类的共同的独有的特性)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p1{ color:blue; } .p2{ font-size:30px; } .p1.p2{ font-style:italic; } </style> </head> <body> <p class="p1"> p1p1p1p1p1p1p1 </p> <p class="p2"> p2p2p22p2p2p2p2 </p> <p class="p1 p2"> p3p3p33p3p33p3p </p> </body> </html>
4.4 id选择器详解
4.4.1. ID选择器类似于类选择器，不过也有一些重要差别
例如：#id{}
4.4.2. ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js的时候，需要使用到id
4.5 属性选择器详解
4.5.1 简单属性选择
[title]{}
4.5.2 根据具体属性进行选择
4.5.3 属性和属性值必须完全匹配
4.5.4 根据部分属性值选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [title]{ color:aqua; } /*title不指定具体的值就是默认 让所有的title元素都是用这个样式表 */ [href="http://www.baidu.com"]{ font-size: 30px; } [title~="hello"]{ font-size: 50px; } /*~=符号是用来进行模糊选择的，只要类名中有提供的字眼就可以。*/ </style> </head> <body> <p title="hello"> hello; </p> <p title="hel"> hello; </p> <p title="world hello"> hello; </p> <p title="hello"> hello; </p> <a href="http://www.baidu.com">百度</a> </body> </html>
4.6 后代选择器
后代选择器可以选择作为某元素后代的元素
在4.7中查看代码
4.7 子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
后代选择器不能隔代选择元素，只能一代挨着一代选择
例如：h1>strong{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> p strong{ color:red; } p strong i{ color:aqua; } /*后代选择器可以隔代选择元素*/ p>b{ color: deepskyblue; } /* p>strong>b{ color: deepskyblue; } 子元素选择器必须这样写才可以实现效果 子元素选择器不能隔代选择元素 */ </style> </head> <body> <p><strong> p strong后代选择器； </strong></p> <p> <strong> <i> p，strong，i后代选择器； </i> </strong> </p> <p> <strong> <b> p，strong，i后代选择器设置蓝色不起作用； </b> </strong> </p> </body> </html>
4.8 相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同的父元素
例：h1+p{};
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li+li{ font-size: 50px; color:blanchedalmond; } /*让同一父元素之下的第一个li标签下的其他li标签样式更改。 最终效果是两个列表下的除了第一个的li其他的li样式都会更改。 */ </style> </head> <body> <div> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <ol> <li>item11</li> <li>item22</li> <li>item33</li> </ol> </div> </body> </html>