一、选择器分类css中选择器有简单选择器和复杂选择器1、简单选择器通配符选择器*匹配任何元素标签选择器标签指用HTML标签名称作为选择器类选择器class使用.(英文点号)进行标识后面紧跟类名。id选择器使用#进行标识后面紧跟id名2、复杂选择器1.属性选择器2.组合选择器选择器含义并集选择器A,B两个选择器之间逗号隔开的逗号可以理解为和的意思后代选择器A B把外层标签写在前面内层标签写在后面中间用「空格」分隔先写父亲再写儿子孙子。子元素选择器AB只能选择作为某元素子元素(亲儿子)的元素把父级标签写在前面子级标签写在后面中间跟一个 进行连接A B选中匹配 B 且为匹配 A 的元素的下一相邻元素A ~ B选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素交集选择器AB两个选择器之间不能有空格交集选择器与后代选择器的区别从格式上来看后代选择器两个选择器之间要有空格交集选择器两个选择器之间没有空格从内容上来看后代选择器后面一个标签/类选择器一定是前一个的后代也就是说嵌套交集选择器后面一个标签只是对前面的标签选择器进行横向的再次筛选交集选择器style div.b { background-color: aqua; } /style body div classb p我是一个屁/p span我是span/span span我是span/span span我是span/span /div /body3.伪类选择器选择器含义a:link匹配所有未被点击的链接a:visited匹配所有已被点击的链接a:hover匹配鼠标悬停其上的a元素a:active匹配鼠标已经其上按下、还没有释放的a元素E:first-child匹配父元素的第一个子元素EE:last-child匹配父元素的最后一个子元素EE:nth-child(n)匹配父元素的第n个子元素Eodd奇数even偶数nth-child与nth-of-type区别1. nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配若不匹配则不使用2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E . 然后再根据E找第n个孩子五、伪元素选择器选择器含义E::before在E元素内创建一个子元素插入生成的内容作为伪元素放在最前面E::after在E元素内创建一个子元素插入生成的内容作为伪元素放在最后面二、CSS三大特性「1. CSS 层叠性」「2. CSS 继承性」「3. CSS 优先级(CSS特殊性)」权重计算公式标签选择器计算权重公式继承或者 *0,0,0,0标签选择器0,0,0,1每个类伪类0,0,1,0每个ID0,1,0,0每个行内样式 style1,0,0,0每个!important 最重要的 div { color: pink !important; }∞ 无穷大权重叠加div ul li ------ 0,0,0,3 .nav ul li ------ 0,0,1,2 a:hover -----— 0,0,1,1 .nav a ------ 0,0,1,1三、less 中的 解释参考less 的 详解_hsany330的博客-CSDN博客_less中的什么意思 作用介绍内层选择器前面的 符号就表示对父选择器的引用。在一个内层选择器的前面如果没有 符号则它被解析为父选择器的后代如果有 符号它就被解析为父元素自身或父元素的伪类。同时用在选择器中的还可以反转嵌套的顺序并且可以应用到多个类名上1.当前选择器的伪类或者伪元素。如 :hover :focus :after :before等.demo { :after { content: .; display: block; background-color: aquamarine; } } /*被解释为*/ .demo:after { content: .; display: block; background-color: aquamarine; }2.作为内层选择器表示对父选择器的引用。交集选择器.demo { -title { text-align: center; } } /*被解释为*/ .demo-title { text-align: center; }3、后代选择器.demo { .demo-title { text-align: center; } } 被解释为 .demo .demo-title { text-align: center; }4、反转嵌套的顺序并且可以应用到多个类名上.demo-title { .demo { font-size: 20px; } } 被解释为 .demo .demo-title { font-size: 20px; }
