北京专业制作网站公司,企业信息填报官网,游戏软件开发培训学校,视频优化是什么意思举例形象让你学会#xff0c;不搞官方话css所有的选择器相邻兄弟选择器后续兄弟选择器后代选择器子代选择器并集选择器(多重选择器)属性选择器伪类选择器伪元素选择器class选择器#xff08;类选择器#xff09;id选择器*选择器#xff08;通配符选择器#xff09;标签选择…
举例形象让你学会不搞官方话css所有的选择器相邻兄弟选择器后续兄弟选择器后代选择器子代选择器并集选择器(多重选择器)属性选择器伪类选择器伪元素选择器class选择器类选择器id选择器*选择器通配符选择器标签选择器组合选择器css选择器权重排名css所有的选择器
相邻兄弟选择器 以分隔开前后选择器 用于选择与指定元素在同一层级且后一个相邻元素的元素 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle#eg pp {background-color: blue;}/style/headbodydiv idegp你好/pdivp吃了吗/pp吃的啥/pdiv好吃不/div p太美味啦/p/div/div/body
/html 这里面的#eg pp表示 id为eg的元素里紧接着p元素的第一个p元素。符合这个条件的只有 p吃的啥/p 如果结构是这样 div ideg p你好/p divp吃了吗/pp吃的啥/pp1/pp2/pp3/pdiv好吃不/divp太美味啦/p /div/div 那么符合条件的就是 p吃的啥/pp1/pp2/pp3/p 后续兄弟选择器 以~分隔开前后选择器 用于选择与指定元素在同一层级且在它后面的所有相邻元素 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle#eg p~p{background-color: blue;}/style/headbodydiv idegp你好/pdivp吃了吗/pp吃的啥/pdiv好吃不/divp太美味啦/pp1/pp2/pp3/p/div/div/body
/html 这里面的#eg p~p表示 id为eg的元素里紧接着p元素的所有p元素。符合条件的 p吃的啥/p p太美味啦/pp1/pp2/pp3/p 后代选择器
以 分隔开前后选择器空格 #eg p{background-color: blue;}这里的#eg p表示 id为eg的元素里所有的p元素背景颜色为蓝色哪怕嵌套一百层p标签也还是蓝色。 你的儿子你你爸都是你爷爷的后代所以你爷爷都可以管你们 子代选择器
以分隔开前后选择器 #egp{background-color: blue;}这里的#egp表示 id为eg的元素里面的第一代所有p元素背景颜色为蓝色 在这个选择器里关系是这样的 你爸爸是你爷爷的儿子所以你爷爷可以管你爸爸 你是你儿子的爸爸所以你可以管你儿子 但是你爷爷管不了你管不了你儿子只能管邻近的子代也就是只能管你爸爸 并集选择器(多重选择器)
以分隔开前后选择器
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestylep,span,#ad {background-color: blue;}/style/headbodyp你好/pdiv我的朋友/divspan你吃了吗/spanspan柯南/spandiv idad我的朋友/div/body
/html这里的pspan#ad表示 所有的p标签和所有的span标签和id名字为ad的标签背景颜色为蓝色 属性选择器
根据元素的属性值来选择元素 !DOCTYPE html
htmlheadstylediv[title~add] {color: aqua;font-size: 2em;}/style/headbodydiv titleadd张三/divdiv titleaff add李四/divdiv titlehaha王五/divdiv titleadd赵六/div/body
/html 这里的div[title~add]表示 所有div里满足title属性里有add的设置字体颜色为青色大小为2em 如果是这样 div[titleadd] {color: aqua;font-size: 2em; } ’ 则表示 所有div里满足title属性里只有add的设置字体颜色为青色大小为2em 伪类选择器
用来选取元素的特殊状态 如:hover :active :visited :first-child :last-child
!DOCTYPE html
htmlheadstyledivp:nth-child(3):hover{color: aqua;font-size: 2em;}/style/headbodydivp张三/pp李四/pp王五/pp赵六/p/div/body
/html 这里的divp:nth-child(3):hover表示 div元素里的第三个p元素设置悬停效果当鼠标悬停在这个元素上改变样式 伪元素选择器
用来选取元素的某个部分 如::before ::after
!DOCTYPE html
htmlheadstylep:nth-child(2)::before{content: ;}p:nth-child(3)::after{content: ;}/style/headbodydivp张三/pp李四/pp王五/pp赵六/p/div/body
/html这里的 before指的是给第二个p元素前面加符号 after指的是给第三个p元素后面加符号 content‘添加的元素’ 这是固定语法 class选择器类选择器
用.来获取元素
!DOCTYPE html
htmlheadstyle.aaa{color: red;}/style/headbodydivp classaaa张三/pp classaaa李四/pp王五/pp赵六/p/div/body
/html 这里的.aaa表示所有名字为aaa的元素改变其字体颜色为红色 class选择器也叫类选择器相当于定义某些元素为一类直接选取这一类元素 id选择器
用#来获取元素
!DOCTYPE html
htmlheadstyle#aaa{color: red;}/style/headbodydivp idaaa张三/pp李四/pp王五/pp赵六/p/div/body
/html这里的#aaa表示名字为aaa的元素改变其字体颜色为红色 id选择器的权重比类选择器更高这意味着如果一个元素同时有id和class属性并且这两个属性都有样式规则那么id选择器的样式规则将被应用 *选择器通配符选择器
用*设置所有元素的样式 *{color: red;}*表示全部上面代码的意思是页面中所有元素的字体颜色都为红色 标签选择器
用标签名字选择元素 div{color: red;}上面代码表示的意思是页面所有div元素的字体都为红色 组合选择器 为了应对各种布局样式各种dom元素的复杂结构就有了组合选择器。 组合选择器就是将各种基本选择器通过一定规则连接起来变成一个复杂的多功能选择器 基本的单一的选择器相当于你会不同的法术。 组合选择器相当于你把所有法术有机结合战斗力更猛。 组合选择器除了用在css中对于js的dom操作网络爬虫的html解析时都非常有用。 常规的css就是把这些规则应用到selector指定的元素上组合选择器可以实现很多比较高级的功能。 css选择器权重排名 在CSS中不同的选择器有不同的权重当多个样式规则应用到同一个元素时CSS会按照权重的高低来决定最终的样式。 CSS选择器权重的排名为 !important声明权重最高通常不建议使用因为它会破坏CSS的层叠性可能会引起样式冲突和难以维护的问题。内联样式在HTML元素中直接定义样式也就是使用style属性。它的权重高于其他选择器但不如!important声明。ID选择器使用#符号定义每个ID只能在文档中出现一次。它的权重高于类选择器和属性选择器。类选择器、伪类选择器、属性选择器它们的权重相等都是一般选择器。类选择器使用.符号定义属性选择器使用[]符号定义伪类选择器使用:符号定义。元素选择器伪元素选择器它们的权重最低都是基本选择器。元素选择器使用标签名定义伪元素选择器使用::符号定义。 需要注意的是当多个选择器权重相同时CSS会采用就近原则选择最后出现的样式规则应用到元素上。因此在编写CSS样式时需要注意选择器的权重和规则的顺序以确保样式的正确应用。 这里要说明一下 伪类选择器的权重与类选择器和属性选择器相等都是一般选择器。它们的权重比元素选择器低但比伪元素选择器高 !DOCTYPE html
htmlheadstyle#box{color: red;}#box{color: blue;}/style/headbodydivp idbox张三/pp李四/pp王五/pp赵六/p/div/body
/html因为同一个元素给设置了不同的样式都应用选择权重更高的样式 如果是id和class选择器选择同一元素则应用id选择器下的样式 如果是id和id选择器选择同一元素则应用最后设置的样式 如果在样式末尾加了important 则不管什么选择器选择了同一元素都会被important无视 上面的例子如果改成这样 #box{color: red !important;}#box{color: blue;}那一定只会显示红色这就是css选择器的权重优先级
