CSS04.选择器 | 您所在的位置:网站首页 › id选择器用什么定义 › CSS04.选择器 |
选择器
选择器作用:帮助你精准的选中想要的元素\找到特定的HTML页面元素 1.简单选择器 1.1 ID选择器(JavaScript使用)(不推荐使用)选中的是对应id值的元素 id选择器使用#进行标识,后面紧跟id名 其基本语法格式如下: id选择器 #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签 元素的id值是唯一的,只能对应于文档中某一个具体的元素 用法基本和类选择器相同 id选择器和类选择器区别W3C标准规定,在同一个页面内,不允许有相同的id对象出现,但是允许相同名字的class。 类选择器(class)好比人的名字,是可以多次重复使用的,比如 张伟 张三 李四 李伟 id选择器 好比人的身份证号码,全中国是唯一的,不得重复。只能使用一次。 id选择器和类选择器最大的不同在于 使用次数上 总结: 类选择器我们在修改样式中,用的最多。 id选择器一般用于页面唯一性的元素身上,经常和我们后面学习的JavaScript搭配使用。 例: #test { color: coral; } Lorem ipsum dolor sit amet.1.2元素(标签)选择器(较多使用) 概念: 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。 语法: 标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }作用: 标签选择器可以把某一类标签全部选择出来 比如所有的p标签、div标签和所有的span标签 例: p { color: blue; }和p有关的元素都被选中 优点: 是能快速为页面中同类型的标签统一样式 缺点: 不能设计差异化样式 类选择器特殊用法-多类名 我们可以给标签指定多个类名,中间用空格隔开,从而达到更多的选择目的。 例: G1.3类选择器(非常多使用) 类选择器使用“.”(英文点号)进行标识,后面紧跟类名. 语法: 类名选择器 .类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}标签 优点: 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签 注意: 类选择器使用“.”(英文点号)进行标识,后面紧跟类名.(自定义,我们自己命名的 ) 长名称或词组可以使用中横线来为选择器命名 不要纯数字、中文等命名,尽量使用英文字母来表示
只要是class类名后面的都会被选中,想删掉时就直接去掉元素中的类名即可 class后面可以应用多个类选择器,用空格隔开即可 1.4通配符选择器(不推荐使用) *,选中所有元素都为相同样式(test1) 概念 通配符选择器用*(✳)号表示,✳就是选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。 其基本语法如下: * {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边框。 * { margin:0; /*定义外边距*/ padding:0; /*定义内边距*/}注意: 会匹配所有的元素,降低页面响应速度,不建议随便使用 注: 不使用无具体语义定义的标签选择器div 、span 1.5 属性选择器(少用) 根据属性名和属性值选中元素(test2) 1.6 伪元素选择器(用法看test4)before after 2.CSS复合选择器并且(不加任何元素直接写到一起)(test5) 后代选择器:后代元素 —— 空格(用的最多)(可以精准的选择我们想要的元素)(test6) 子元素选择器:子元素 —— > (把后代元素的空格改成">",只能选中子元素不能选子元素的子元素)(test7) 相邻兄弟元素 —— + (test8) (后面出现的所有兄弟元素)兄弟元素 —— ~ (test9) 2.1 后代选择器(重点) 概念: 后代选择器又称为包含选择器 作用: 用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,再写儿子孙子 父级 子级{属性:属性值; 属性:属性值;}语法: .class h3{color:red;font-size:16px;}当标签发生嵌套时,内层标签就成为外层标签的后代。 子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。 2.2 子代(元素)选择器 作用: 子元素选择器只能选择作为某元素子元素(亲儿子)的元素(只选亲儿子) 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个“>”进行连接 语法: .class>h3 {color: red; font-size: 14px;}这里的子指的是亲儿子 不包含孙子重孙子之类。 2.3 交集选择器 语法 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special 记忆技巧: 交集选择器是并且的意思,即...又...的意思 比如: p.one 选择的是:类名为.one 的段落标签用的比较少,不太建议使用 2.4 并集选择器(重点) 应用: 如果某些选择器定义的相同样式,就可以利用并集选择器,可以以让代码更简洁。 并集选择器(CSS选择器分组)是各个选择器通过“,”连接而成的,通常用于集体声明。 语法:
任何形式的选择器(包括标签选择器、class类选择器和id选择器等),都可以作为并集选择器的一部分。 记忆技巧: 并集选择器通常用于集体声明,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为 和的意思。 p,span,.div { color: red;} 2.5 链接伪类选择器(重点)(多用) 伪类选择器: 类选择器是一个点 比如.demo{} 而我们的伪类 用 2个点 就是 冒号 比如:link{} 作用: 用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素 因为伪类选择器很多,比如链接伪类,结构伪类等等。我们这里先给大家讲解链接伪类选择器
选中某些元素的某种状态(test3)(要写的话要按照下面的顺序) 1)a:link:超链接未访问时的状态 2)a:visited:超链接访问过的状态 3)a:hover:鼠标悬停状态 4)a:active:激活状态,鼠标按下状态 3.复合选择器总结 选择器作用特征使用情况隔开符号及用法 后代选择器 用来选择后代 是选择所有的子孙后代 较多 符号是空格 .nav a 子代选择器 选择最近一级元素 只选亲儿子 较少 符号是> .nav>p 交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one 并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header 链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法 |
CopyRight 2018-2019 实验室设备网 版权所有 |