CSS选择器之复合选择器的简单使用 |
您所在的位置:网站首页 › id选择器的调用 › CSS选择器之复合选择器的简单使用 |
参考:https://www.w3school.com.cn/,immoc Rosen的UI专栏 后代选择器用空格分隔的多个选择器组合,语法形式就是:“选择器 A 选择器 B”,表示在A 选择器的后代元素中找到 B 选择器所指的元素(这个范围内的所有后台) 我是第二层的span 我是第二层的span 我是第二层的span 我是第一层的span // CSS: .root span{ color: red }上面的后代选择器就会把 class 为 root元素里面的所有span 元素的字体都改成 红色 TIps: 后台选择器可以叠加使用,如只想让第二层的span变成红色 .root .first-child-dev span { color: red } 子元素选择器子元素选择器和后代选择器类似,也是为选择器限定范围。不同的是子元素选择器只找子元素,而不会把所有的后代都找一遍。它的语法是 “选择器 A> 选择器 B” 我是第二层的span 我是第二层的span 我是第二层的span 我是第一层的span // CSS: .root > span{ color: red }用 “…root > span” 这个选择器就会把 .root元素里面的 .first-child-span元素的字体变成灰色,但不会对 .first-child-dev元素下的 span 元素产生影响。 Tips:子元素选择器也是可以叠加使用,还按上面的例子,如只想对first-child-dev中的span起作用 .root > .first-child-dev span{ color: red } 兄弟选择器在 CSS 中,还有一种选择器是用来选取同级元素的,叫做兄弟选择器。兄弟选择器有两种,一种是相邻兄弟选择器,另外一种是通用兄弟选择器 1.相邻兄弟选择器 相邻兄弟选择器是用来选取某个元素向下紧邻的兄弟元素,它的语法是 “选择器 A + 选择器 B”,其实就是对选择器 B 加上 “紧邻着选择器 A” 的限制 我是第二层的span 我是第二层的h1 我是第二层的span 我是第二层的span 我是第一层的span // CSS: h1 + span { color: red }这样只会让紧邻h1下面的一个span变成红色,上面的span不会起作用 补充一个例子: List item 1 List item 2 List item 3 List item 1 List item 2 List item 3 li + li {font-weight:bold;}上面这个选择器只会把列表中的itme2和item3列表项变为粗体。第一个列表项不受影响。 item2: item1向下紧邻的item2 item3: item2向下紧邻的item3 通用兄弟选择器会匹配选择器 A 指定元素后面的所有符合选择器 B 规则的元素,它的语法是 "选择器 A ~ 选择器 B" 我是第二层的span 我是第二层的h1 我是第二层的span 我是第二层的span 我是第一层的span // CSS: h1 + span { color: red }上面的选择器会选中和 h1 元素同级且在 h1 元素后面出现的 span 元素表现成红色字体的样式 结合其他选择器 html > body table + ul {margin-top:20px;}这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。 TIps:兄弟选择器(包括相邻兄弟选择器和通用兄弟选择器)中都是只能向后选择,如果需要向前选择,就只能给前面的元素指定上 class,再用类选择器来实现了 交集选择器交集选择器是为了找两个或多个选择器的交集,用法就是把两个选择器放在一起,形式如 “选择器 A 选择器 B”,中间不需要加空格或者其他符号。交集选择器最主要的作用是在限定范围内标识特殊的样式。比如: 菜单1 菜单2 菜单3 菜单4 // CSS .menu-item{ background: #ccc; color: #000; } .menu-item.active{ background: #aaa; color: #fff; }通过 .menu-item 给所有菜单元素一个基础样式,然后通过交集选择器 .menu-item.active 给当前活跃的菜单选项一个特殊的标记 并集选择器并集选择器是把选择器不同但样式相同的 CSS 语法块做合并,它的语法是 “选择器 A, 选择器 B”,表示该样式对选择器 A 和选择器 B 所选择的元素都生效 // CSS h1{ margin: 0; padding: 0; } h2{ margin: 0; padding: 0; } h3{ margin: 0; padding: 0; }这种写法会占用很多 CSS 代码量,但是可以通过并集选择器来进行简化 h1, h2, h3{ margin: 0; padding: 0; } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |