html5群组选择器,HTML5(H5)CSS选择器

css选择器

使用css选择器基本流程：

1.制作所需的选择器，并在其中写入样式

2.将选择器绑定到指定的html标签上

标签选择器：

用标签名来定义

作用：当前页面中，所有叫这个名字的标签，全部都绑定上样式

代码示例：

div{

width： 200px；

height： 200px；

background-color：yellow；

}

class选择器：

用 . 来表示自身

自定义名称(名称符合见明之意即可)

命名时：可以包含数字字母下划线，但是不能以数字开头，具有重用性，可以给多个标签使用

使用时：使用给对应的标签进行绑定，例如

class的优先级高于标签选择器

代码示例：

.box{

width: 500px;

color: red;

}

id选择器：

用#来标示

自定义名称(名字符合见名知意即可)

命名时：可以包含字母数字下划线，但是不能以数字开头

id选择器不具有重用性， 具有唯一性

如果多个标签同时使用，会造成不可预知的错误

id选择器要比class选择器的高

代码示例：

#div1{

width: 100px;

height: 100px;

background-color: pink;

font-size: 30px;

}

群组选择器：

只能用于大批量的样式，如果需要给个别标签去写样式，使用Class或id

代码示例：

p,span,div,li{

color: blue;

}

子代选择器：

>前 是指定的父级

>后 是指定的子级

子代选择器，只对指定的父级向下一层寻找目标

代码示例：

.list2>li{

color: red;

}

后代选择器：

空格前是指定的父级

空格后是指定的子级

后代选择器，对指定的父级下所有的层级寻找目标

代码示例：

.list2 li{

color: #ccc;

}

特殊的选择器：

交叉选择器

两个条件必须同时满足，才可以绑定样式

条件1:  p

条件2:  .p1

注意：两个条件之间没有特殊字符也没有空格，无缝连接

代码示例：

p.p1{

color: red;

}

CSS样式存在继承性：

1.父级的样式会继承给子级

2.如果子级不需要，单独调整子级即可