css选择器
标签选择器
用标签名来定义的
作用： 当前页面中，所有叫这个名字的标签，全部都绑定上样式
代码示例：
div{
width: 200px;
height: 200px;
background-color: yellow;
}
class选择器：
用 . 来标示自身
自定义名称(名字符合见名知意即可)
命名时： 可以包含字母数字下划线，但是不能以数字开头
具有重用性，可以给多个标签使用
使用时； 使用给对应的标签进行绑定 例如 <div class=".box"></div>
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 .如果子级不需要，单独调整子级即可
hover伪类
.box{
width: 200px;
height: 200px;
/*background-color: red;*/
/*边框*/
border: 2px solid black;
/*过渡：当样式发生改变的样式
值1： 所有的属性
值2： 改变所用的时间 单位 s 秒
*/
transition: all 2s;`在这里插入代码片`
}
hover: 鼠标伪类
作用： 鼠标移入移出的时候触发指定样式
鼠标移入时； 触发 hover的样式
鼠标移出时： 回到 初始样式。 整个hover中的代码，都不会被加载
代码示例：
.box:hover>p{
width: 500px;
border-radius: 20%;
background-color: yellow;
}
标签：示例,color,标签,代码,样式,选择器,css 来源： https://blog.csdn.net/m0_55339949/article/details/113814008
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。