css3中的挑选器品种有很多,下面介绍的是5种常见的根本挑选器:通配挑选器,类挑选器,元素挑选器,ID挑选器和群组挑选器。
打造全网web前端全栈资料库(总目录)看完学的更快,掌握的愈加结实,你值得具有(继续更新)
1.通配符挑选器(一切浏览器支撑)
通用挑选器用*来表明,用来挑选一切元素,,也能够挑选某个元素下的一切元素;
*{marigin:0;
padding:0;
font-size:14px;
}
上面代码咱们在reset款式文件中看到的肯定不少,他所表明的是,一切元素的margin和padding都设置为0,字体大小都设置为14px,别的一种便是挑选某个元素下的一切元素:
通配符挑选器
1
2
3
效果图:
咱们能够看到在demo元素里的三个子元素div,p,span都是分别没有设置css款式的,但只要咱们设置了demo元素下的一切元素的统一款式,那么demo元素里的三个子元素div,p,span就会呈现款式。
2.类挑选器(一切浏览器都支撑类挑选器,但多类挑选器(.className1.className2)不被ie6支撑。)
类挑选器依据类名来挑选,前面以”.”来标志,是以一独立于文档元素的方式来指定款式,运用类挑选器之前需求在html元素上定义类名,换句话说需求保证类名在html符号中存在。
类挑选器
类挑选器
效果图:
3.元素挑选器(一切浏览器支撑)
元素挑选器(标签名挑选器),是css3挑选器中最常见并且最根本的挑选器。元素挑选器其实便是文档的元素,如html,body,p,div等等下下面例子中挑选了span元素,并设置了字体颜色为红色。
元素挑选器
这儿运用元素挑选器改动了款式
效果图:
4.ID挑选器(一切浏览器都支撑)
ID挑选器和上面说的类挑选器是很类似的,在运用ID挑选器之前也需求先在html文档中加注ID名称,这样在款式挑选器中才能找到相对应的元素,不同的是ID挑选器是一个页面中仅有的值,咱们在类运用时是在相对应的类名前加上一个“.”号(.className)而id挑选器是在名称前运用”#”如(#demo)。
ID挑选器
ID挑选器
效果图:
ID挑选器有几个当地需求特别注意:
第一:一个文档中一个id挑选器只充许运用一次,因为id在页面中是仅有的;
第二,id挑选器不能像类挑选器相同多个合并运用,一个元素只能命名一个id名;
第三,能够在不同的文档中运用相同的id名,比如说在“test.html”中给h1定了“#important”,也可给“test1.html”中定义p的id为”#important”,但条件是不管在test.html仍是test1.html中只充许有一个id叫”#important”的存在。
5.群组挑选器(一切浏览器都支撑)
当几个元素款式属性相同时,能够共同调用一个声明,元素之间用逗号分隔。群组挑选器是将具有相同款式的元素分组在一起,每个挑选器之间运用逗号“,”离隔,这个逗号告诉浏览器,规则中包含多个不同的挑选器,假如不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了咱们前面所说的子孙挑选器,这一点咱们在运用中千万要小心加小心。
群组挑选器
这儿是一个阶段!
列表
链接一
文字文字!

css3

css3选择器有哪些

一、通配符挑选器(*)
通配符挑选器是用来挑选一切元素,,也能够挑选某个元素下的一切元素。
二、元素挑选器(E)
元素挑选器,是css挑选器中最常见并且最基本的挑选器。
三、类挑选器(.className)
类挑选器是以一独立于文档元素的方式来指定款式,运用类挑选器之前需要在html元素上定义类名
四、id挑选器(#ID)
ID挑选器和上面说的类挑选器是很相似的,在运用ID挑选器之前也需要先在html文档中加注ID称号,这样在款式挑选器中才干找到相对应的元素,不同的是ID挑选器是一个页面中唯一的值,咱们在类运用时是在相对应的类名前加上一个“.”号(.className)而id挑选器是在称号前运用"#"如(#id),
五、子孙挑选器(EF)
子孙挑选器也被称作包含挑选器,所起作用便是能够挑选某元素的子孙元素,比如说:E
F,前面E为先人元素,F为子孙元素,所表达的意思便是挑选了E元素的一切子孙F元素,请注意他们之间需要一个空格离隔。
六、子元素挑选器(E>F)
子元素挑选器只能挑选某元素的子元素,其间E为父元素,而F为子元素,其间E>F所表示的是挑选了E元素下的一切子元素F。这和子孙挑选器(E
F)不一样,在子孙挑选器中F是E的子孙元素,而子元素挑选器E>F,其间F仅仅是E的子元素而以。
七、相邻兄弟元素挑选器(E+F)
相邻兄弟挑选器能够挑选紧接在另一元素后的元素,并且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,并且F元素在E元素后面,并且相邻,这样咱们就能够运用相邻兄弟元素挑选器来挑选F元素。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注