css选择器作用

可以同时给多个标签加相同的样式

标签选择器

格式：标签名{ 属性名：属性值； } 比如 所有标签都可以用标签选择器

h3{ background: red; text-align: center; } span{ background: black; text-align:left; } </style> 小编就不每个都举例子啦，总之所有标签都可以哦~

类选择器

div{ background: yellow; } .box{ background: red; } </style> <div class="box">div1</div> <div>div2</div> <!--div2也可以用class 可以重复的-->

class命名规范

不能以数字作为开头不要用中文用单词命名尽量不要用缩写，除非一看就明白的单词可以用多个单词命名 比如 student_info student-info studentInfo不要用a1 a2 a3最好用小写

id选择器

一个id名在同一个文件只能出现一次，唯一性，一般用在js中

格式：

<style> #div3 { color: red; background: blue; } </style> <div id="div3">div3</div>

通配符选择器：

他可以选择全部的标签 <style> *{ padding: 0; /*内边距*/ margin: 0; /*外边距*/ } </style>

小编给大家总结下，其实我们可以把标签选择器当作是姓名中的姓氏，而类选择器就是姓名中的名，id选择器呢就是我们的身份证，只可以有一次，不可以重复哦！

下面来认识下CSS其他选择器

后代选择器 最常用

可以选择隔代 每个选择器之前用空格隔开 里面可以加类选择器给标签加样式

<style> ul li{ color: pink; } ul .text{ color:red; } </style>

子代选择器

只能选择下一级，不能选择隔代的 有限制 每个选择器之前用>隔开 也可以用空格 也可以用类标签

<style> div>p>span{ background: blue; } </style>

交集选择器

选择的同一个元素 增加权重 标签名写在最前面 每个小选择器之间不要加空格

<style> li{ /*1*/ color:blue; } .list1{ /*10*/ color:red; } li.list1{ /*1+10=11*/ color:yellow; } </style> <ul> <li class="list1">选项一</li> <li>选项二</li> <li>选项三</li> </ul>

并集选择器

可以同时选择多个元素，设置相同样式 逗号两边的选择器没有任何关系

<style> 第一种方法 div{ color: red; background: lavenderblush; } span{ color: red; background: lavenderblush; } 第二种方法 div,span{ color: red; background: lavenderblush; } </style> <div>div</div> <span>span</span>

类选择器

一般用在表单里面 比如文本框密码框按钮 给这些标签加样式

<style> input[type=test]{ width: 300px; height: 200px; border-color: blue; } input[type=password]{ width: 300px; height: 200px; border-color: blue; } </style> <input type="text"/> <input type="password"/>

伪类选择器

:hover 鼠标经过时的样式

<style> a:hover{ /*鼠标经过a标签的样式*/ color: red; text-decoration: none; /*去掉下划线*/ } </style> <a href="##">我是一个a链接</a>