<!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>
权重值的相加