1、常用选择器
-
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
-
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
-
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
class 是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
-
通配选择器
作用：选中页面中的所有元素
语法: *
<h1 class="blue abc">我是标题</h1> <p>少小离家老大回</p> <p>乡音无改鬓毛衰</p> <p id="red">儿童相见不相识</p> <p>笑问客从何处来</p> <!-- class 是一个标签的属性，它和id类似，不同的是class可以重复使用 可以通过class属性来为元素分组 可以同时为一个元素指定多个class属性 --> <p class="blue">秋水共长天一色</p> <p class="blue">落霞与孤鹜齐飞</p>*{ color: red; }2、复合选择器
-
<style> /* 将class为red的元素设置为红色（字体） */ .red{ color: red; } /* 将class为red的div字体大小设置为30px */ /* 交集选择器 作用：选中同时复合多个条件的元素 语法：选择器1选择器2选择器3选择器n{} 注意点： 交集选择器中如果有元素选择器，必须使用元素选择器开头 */ div.red{ font-size: 30px; } .a.b.c{ color: blue } /* div#box1{} */ /* 选择器分组（并集选择器） 作用：同时选择多个选择器对应的元素 语法：选择器1,选择器2,选择器3,选择器n{} #b1,.p1,h1,span,div.red{} */ h1, span{ color: green } </style> </head> <body> <div class="red">我是div</div> <p class="red">我是p元素</p> <div class="red2 a b c">我是div2</div> <h1>标题</h1> <span>哈哈</span> </body>3、关系选择器
-
<style> /* 为div的子元素span设置一个字体颜色红色 （为div直接包含的span设置一个字体颜色） 子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素 > 子元素 */ /* div.box > span{ color: orange; } */ /* 后代元素选择器： 作用：选中指定元素内的指定后代元素 语法：祖先 后代 */ /* div span{ color: skyblue } */ /* div > p > span{ color: red; } */ /* 选择下一个兄弟 语法：前一个 + 下一个 选择下边所有的兄弟 语法：兄 ~ 弟 */ p + span{ color: red; } p ~ span{ color: red; } </style> </head> <body> <!-- 父元素 - 直接包含子元素的元素叫做父元素 子元素 - 直接被父元素包含的元素是子元素 祖先元素 - 直接或间接包含后代元素的元素叫做祖先元素 - 一个元素的父元素也是它的祖先元素 后代元素 - 直接或间接被祖先元素包含的元素叫做后代元素 - 子元素也是后代元素 兄弟元素 - 拥有相同父元素的元素是兄弟元素 --> <div class="box"> 我是一个div <p> 我是div中的p元素 <span>我是p元素中的span</span> </p> <div></div> <span>我是div中的span元素</span> <span>我是div中的span元素</span> <span>我是div中的span元素</span> <span>我是div中的span元素</span> </div> <span> 我是div外的span </span>4、属性选择器
-
<style> /* [属性名] 选择含有指定属性的元素 [属性名=属性值] 选择含有指定属性和属性值的元素 [属性名^=属性值] 选择属性值以指定值开头的元素 [属性名$=属性值] 选择属性值以指定值结尾的元素 [属性名*=属性值] 选择属性值中含有某值的元素的元素 */ /* p[title]{ */ /* p[title=abc]{ */ /* p[title^=abc]{ */ /* p[title$=abc]{ */ p[title*=e]{ color: orange; } </style> </head> <body> <p title="abc">少小离家老大回</p> <p title="abcdef">乡音无改鬓毛衰</p> <p title="helloabc">儿童相见不相识</p> <p>笑问客从何处来</p> <p>秋水共长天一色</p> <p>落霞与孤鹜齐飞</p> </body>5、伪类选择器
-
<style> /* 将ul里的第一个li设置为红色 */ /* 伪类（不存在的类，特殊的类） - 伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素... - 伪类一般情况下都是使用:开头 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个子元素 特殊值： n 第n个 n的范围0到正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素 - 以上这些伪类都是根据所有的子元素进行排序 :first-of-type :last-of-type :nth-of-type() - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序 - :not() 否定伪类 - 将符合条件的元素从选择器中去除 */ /* ul > li:first-child{ color: red; } */ /* ul > li:last-child{ color: red; } */ /* ul > li:nth-child(2n+1){ color: red; } */ /* ul > li:nth-child(even){ color: red; } */ /* ul > li:first-of-type{ color: red; } */ ul > li:not(:nth-of-type(3)){ color: yellowgreen; } </style> </head> <body> <ul> <span>我是一个span</span> <li>第〇个</li> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul>