CSS 交集选择器和并集选择器

（1）今天，我在做

（就是一点击下去变成红色的）的时候，我的代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style>#list li{list-style-type:none;width:100px;height:50px;line-height:50px;background-color:beige;text-align:center;float:left;}#list li .current{background-color:red;}#list li a{text-decoration:none;}</style></head><body><div id="menu"><ul id = "list"><li class="current"><a href="javascript:void(0)">首页</a></li><li><a href="javascript:void(0)">HTML</a></li><li><a href="javascript:void(0)">CSS</a></li><li><a href="javascript:void(0)">JavaScript</a></li><li><a href="javascript:void(0)">关于</a></li><li><a href="javascript:void(0)">帮助</a></li></ul></div><script>//获取所有的li标签var liObjs = document.getElementById('list').getElementsByTagName('li');//循环遍历，找到每个li中的a，注册点击事件for(var i=0;i<liObjs.length;i++){//每个li中的avar aObj = liObjs[i].firstElementChild;aObj.onclick = function(){//把这个a所在的li的所有的兄弟元素的类样式全部移除for(var j = 0;j <liObjs.length;j++){liObjs[j].removeAttribute('class');}//当前点击的a的父级元素li（点击的这个a所在的父级元素li），设置背景颜色this.parentNode.className = 'current';};}</script></body>
</html>

怎么都运行不出来，也不知道错误在哪？后一个同仁指出我的选择器有问题

多了一个空格。

（2）我所理解的交集和并集

交集区域就是我俩共同拥有的区域合并到一起执行某种样式，并集区域就是我有的你没有，你有的我没有的区域合并到一起执行某种样式。这两类区域各自合并到一起统一地达到某种目的，比如设置相同的颜色、字体或者别的样式。

（3）我查相关博客给出的解释：

1 交集选择器

给所有选择器选中的标签中相交的标签设置属性。

格式：选择器1选择器2...{属性1：属性值1；属性2：属性值2;...;}

标签连写。

注意：选择器和选择器之间使用没有任何符号、选择器可用使用标签名称、id名称、class名称、一般用的很少。

<!DOCTYPE html><html lang="en"> <head><style>div.a123a{color:red;}</style> </head> <body><div class="a123a">我是容器A</div><p class="a123a">我是容器A</p></body>
</html>

2 并集选择器

作用：给所有选择器中的标签设置属性

格式:选择器1，选择器2{

　　　　　　　　　　属性名称：属性值；

　　　　　　　　　　}

注意：必须使用逗号隔开、选择器可以使用标签名称、id名称、class名称

<!DOCTYPE html><html lang="en"><head><style>div, p, span{  逗号相当于 和，适合相同样式。            color:red;}</style>
</head>
<body><div>我是容器A</div><span>我是容器A</span><p>我是容器A</p>
</body>
</html>

我的问题应该是交集选择器之间不能出现任何符号，我多了一个空格。

CSS 交集选择器和并集选择器相关推荐

HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
CSS复合选择器建立在基础选择器上,对基本选择器进行组合形成的可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器一.后代选择器又称为包含选择器,可以选 ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
CSS第一章：3.交集选择器、并集选择器
总览 1.交集选择器:同时满足多个选择器筛选条件的才能被选中 2.并集选择器:只要满足其中一个筛选条件就能够被选中一.交集选择器 1.HTML代码: 2.CSS代码:(class值不使用任何东西隔开 ...
id选择器、标签选择器、类选择器、交集选择器、并集选择器
通过id选择器获取元素点击按钮显示效果 <!DOCTYPE html> <html lang="en"> <head><meta char ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
css案例学习之并集选择器
代码 <html> <head> <title>并集选择器</title> <style type="text/css"> ...
html并集选择器怎么写,css案例学习之并集选择器
代码并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
黑马程序员pink老师前端h5(html5)+css3(16)P94-P104伪类选择器上并集选择器子选择器后代选择器emmet语法生成标签快速格式化代码复合选择器简介
P94-emmet语法生成标签 Emmet语法 Zen codig他使用缩写,来提高htmlcss编写速度 div+p div class="nav" div id="b ...
html 并集选择器,CSS并集选择器
CSS并集选择器也叫群选择器,是由多个选择器通过逗号连接在一起的,这些选择器分别是:标签选择器.类选择器或id选择器等. 在声明各种CSS选择器时,如果某些选择器的风格完全相同,或者部分相同,便可以利 ...

CSS 交集选择器和并集选择器

CSS 交集选择器和并集选择器相关推荐

最新文章

热门文章