本文详细介绍了CSS中的选择器，包括标签选择器、类选择器、ID选择器、通配符选择器以及包含选择器。此外，还讨论了伪类选择器，如`:link`、`:visited`、`:hover`和`:active`。文章强调了选择器的权重值，解释了如何根据权重确定样式生效。内容还包括样式规则的基本语法，如文本规则、背景规则、边框规则，并讨论了样式覆盖规则以及如何通过CSS实现文本的加粗、倾斜、对齐方式、修饰线、垂直居中等效果。最后，文章提到了列表修饰的CSS属性和边框规则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
1.选择器
标签选择器：标签名字作为选择器：div，p，h1，h2
类选择器：通过给元素起类名查找元素
id选择器：通过id的名字查找元素
通配符选择器：通过通配符查找页面的元素
问题：多个选择器修饰同一个元素的时候实现的是何种样式？
选择器的权重值的问题
w3c====规定死了：通配符选择器的权重值最低：0
标签和类对比：标签<类
类和id对比：类<id
标签和id对比：标签<id
不同的选择器在进行修饰时与先后顺序无关，与权重值有关
对比：(行内样式表)>id>类>标签>通配符
得出结论：行内样式修饰>id>类>标签>通配符的样式修饰
最终结论：！important>行内样式修饰>id>类>标签>通配符
2.包含选择器
包含选择器中其实有两种情况
1）父子关系
只能查找儿子辈分的元素=====子代选择器
2）爷孙关系
通过当前元素里面包含的所有内容去查找元素，除了能找到儿子辈分的选择器还能查找孙子辈分，重孙子辈分等等=========后代选择器
子代选择器
使用符号>
ol>li
后代选择器
使用符号空格
ol li
匹配数量一致的情况下
ol li{
border:5px solid yellowgreen
}
3.伪类选择器的概念
:本身元素不具有一种动态的效果，需要通过鼠标的事件去触发未完成对应的改变
伪类选择器经常使用在超链接里面
：link========超链接访问之前的状态
：visited=====超链接访问后的状态
：hover=======超链接悬停时候的装填
：active======超链接激活的状态
书写的时候一定要遵循以上顺序，不能点到顺序，点到顺序之后实现不了 冒号前后没有任何的空格之说
鼠标悬停可以应用在任何一个元素上面
<style>
ol>li{
border: 2px solid yellowgreen;
}
ol:hover li{ 放在ol上面就会发生变化
background-color: thistle;
}
ol>li:hover{ 放在li上面才会发生改变
background-color: tomato;
}
</style>
权重值的相加
最低0.47元/天 解锁文章
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
