随笔分类 -  第十章 CSS选择器

课时82.选择器练习
摘要：现在，我有一个需求，我要求将div中的两个p标签设置为红色，要求用前面所有学过的选择器来做这个练习。 1.标签选择器 2.id选择器 3.类选择器 4.后代选择器 5.子元素选择器 6.交集选择器 7.并集选择器 8.通用兄弟选择器 9.序选择器 先找到同类型的p，n从0开始，先选中同级别同类型的第 阅读全文
posted @ 2018-06-12 08:40 双双双双 阅读(205) 评论(0) 推荐(0)
课时81.通配符选择器（理解）
摘要：1.什么是通配符选择器？ 作用：给当前界面上所有标签设置属性 格式 *{ 属性：值; } 注意点： 由于通配符选择器是设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器。 阅读全文
posted @ 2018-06-11 19:43 双双双双 阅读(397) 评论(0) 推荐(0)
课时80.属性选择器下（理解）
摘要：1.属性选择器的取值是以什么开头的 [attirbute|=value] CSS2 [attribute^=value] CSS3 |怎么输出呢？按住shift键，再按住回车上面的键子 ^怎么输出呢？按住shift键，再按住数字6的键子 先找到所有的img标签，再找到img标签中有alt属性，并且a 阅读全文
posted @ 2018-06-11 19:26 双双双双 阅读(197) 评论(0) 推荐(0)
课时79.属性选择器上（理解）
摘要：1.什么是属性选择器？ 作用：根据指定的属性名称找到对应的标签，然后设置属性。 格式 [attribute] 作用：根据指定的属性名称找到对应的标签，然后设置属性。 如下实例 [attribute=value] 作用：找到指定属性，并且属性的取值等于value的标签，然后设置属性。 最常见的应用场景 阅读全文
posted @ 2018-06-11 17:32 双双双双 阅读(271) 评论(0) 推荐(0)
课时78.序选择器下（掌握）
摘要：:nth-child(odd)选中同级别中的所有奇数 :nth-child(even)选中同级别中的所有偶数 :nth-of-type(odd)选中同级别中的所有奇数 :nth-of-type(even)选中同级别中的所有偶数 如果从中还有一些其它的标签，我们可以用这个选择器 :nth-child( 阅读全文
posted @ 2018-06-11 16:48 双双双双 阅读(201) 评论(0) 推荐(0)
课时77.序选择器（掌握）
摘要：CSS3中新增的选择器最具代表性的就是序选择器。 1.同级别的第几个 1. :first-child 选中同级别中的第一个标签 注意点：不区分类型 但是我们这里有一个注意点，如果我们在第一个p之前加一个h1，则第一个p就不变红了，因为我们是选中同级别中的第一个标签，在我们这个界面中，h1，p，div 阅读全文
posted @ 2018-06-11 15:48 双双双双 阅读(274) 评论(0) 推荐(0)
课时76.兄弟选择器（掌握）
摘要：我们先来明确一点，什么是兄弟？ 比如，head和body是兄弟，必须是同级关系，如果是嵌套关系，儿子，孙子则不可以。 1.相邻兄弟选择器 CSS2 作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性 格式： 选择器1+选择器2{ 属性：值; } 我们将两个紧跟在h1之后的p标签都设置成了红色， 阅读全文
posted @ 2018-06-11 13:41 双双双双 阅读(304) 评论(0) 推荐(0)
课时75.并集选择器（掌握）
摘要：1.什么是并集选择器？ 首先我们来了解什么是并集？ 在数学中，这就是并集 作用：结合所有选择器选中的标签设置属性 格式： 选择器1，选择器2{ 属性：值； } 注意点： 1.并集选择器必须使用，来连接 我们先来看一个例子： 我们想给两个类名设置颜色 1.第一种方法，我们可以分别给两个类设置颜色 2. 阅读全文
posted @ 2018-06-11 12:59 双双双双 阅读(620) 评论(0) 推荐(0)
课时74.交集选择器（理解）
摘要：1.什么是交集选择器？ 我们首先了解一下什么是交集 以前学数学的时候学过交集，其实这里也是一样 两个集合有重复的部分就叫做交集 作用：给所有选择器选中的标签中，相交的那部分标签设置属性 格式： 选择器1选择器2{ 属性：值; } 注意点： 1.选择器和选择器之间没有任何连接符号 来看一个案例： 先找 阅读全文
posted @ 2018-06-10 22:16 双双双双 阅读(1664) 评论(0) 推荐(0)
课时73.后代选择器和子元素选择器（理解）
摘要：1.后代选择器和子元素选择器之间的区别？ 1.1后代选择器使用空格作为连接符号 子元素选择器使用>作为连接符号 1.2后代选择器会选中指定标签中，所有的特定后代标签，也就是会选中儿子/孙子.....，只要是被放到指定标签中的特定标签都会被选中。 子元素只会选中指定标签中，所有的特定的直接标签，也就是 阅读全文
posted @ 2018-06-10 21:50 双双双双 阅读(341) 评论(0) 推荐(0)
课时72.子元素选择器（掌握）
摘要：1.什么是子元素选择器？ 作用：找到指定标签中所有特定的直接子元素，然后设置属性。 格式： 标签名称1>标签名称2{ 属性：值； } 先找到名称叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标准名称2”的元素 注意点： 1.子元素选择器只会查找儿子，不会查找其它被嵌套的标签 阅读全文
posted @ 2018-06-10 21:27 双双双双 阅读(231) 评论(0) 推荐(0)
课时71.后代选择器（掌握）
摘要：1.什么是后代选择器？ 作用：找到指定标签的所有后代标签，设置属性。 首先你要明确什么是后代？ 你的儿子，孙子，重孙子等，只要有你的血脉的，都是你的后代。 我们先来举个例子 我们想让div中的标签变红 1.用标签选择器可以做吗？ 不可以，它会选中页面上的所有p，包括div以外的 2.用id选择器可以 阅读全文
posted @ 2018-06-10 20:48 双双双双 阅读(346) 评论(0) 推荐(0)
课时70.id选择器和类选择器（理解）
摘要：1.id和class的区别？ id相当于人的身份证不可以重复 class相当于人的名称可以重复 1.2 一个HTML标签只能绑定一个id名称 一个HTML标签可以绑定多个class名称 2.id选择器和class选择器的区别？ id选择器是以#开头 class选择器是以.开头 3.在企业开发中到底用 阅读全文
posted @ 2018-06-10 19:37 双双双双 阅读(229) 评论(0) 推荐(0)
课时69.类选择器（掌握）
摘要：id选择器和标签选择器一样，都有一些缺陷，它有什么缺陷呢？ 1.设置样式不会使用id，因为如果学到js，就会发现，js通过id拿到标签，再进行一些后续都操作 2.id有一个特点，同一个界面中id不能重复，如果以后给企业开发，同一个界面可能有上千个标签，如果给每一个标签都起一个名字可能要起上千个名字， 阅读全文
posted @ 2018-06-10 18:52 双双双双 阅读(163) 评论(0) 推荐(0)
课时68.id选择器（掌握）
摘要：1.什么是id选择器？ 作用：根据指定的id名称找到对应的标签，然后设置属性 格式： #id名称{ 属性：值; } 注意点： 1.每个html标签都有一个属性叫做id，也就是说每个标签都可以设置id 2.在同一个界面中id的名称是不可以重复的 3.在编写id选择器时一定要在id名称前加# 如果不加# 阅读全文
posted @ 2018-06-10 18:20 双双双双 阅读(286) 评论(0) 推荐(0)
课时67.标签选择器（掌握）
摘要：通过上节课的学习我们明白了如何通过十六进制来表示颜色 例如：红色的几种表示方法 我们发现在学习CSS当中的一些属性的时候，它都有一些套路 只要知道属性的名称，属性有什么作用，它有哪些取值，这个属性有什么注意点 那这个时候，这个属性我们就学完了。 我们在后面学习CSS其它的一些属性时也是这样的，我们只 阅读全文
posted @ 2018-06-10 17:50 双双双双 阅读(229) 评论(0) 推荐(0)