乐趣区

关于css:选择器的介绍

1. 元素选择器

 作用: 依据标签名来选中指定元素。语法: 标签名 {}。例子: p{},h1{},div{}。

2.id 选择器

 作用:依据元素的 id 属性选中一个元素。语法:#id 属性值 {}。例子:#red{}。

3. 类选择器

 作用:依据元素的 class 属性值选中一组元素。语法:.class 属性值。例子:.content{},.top{}。

4. 伪类(不存在的类,非凡的类)选择器

 作用:用来形容一个元素的非凡的状态,通过这种非凡的属性选中一个元素。比方,第一个 
子元素,被点击的元素,鼠标移入的元素....。语法:个别状况下都是应用:xxx。例子::first-child(第一个子元素),:last-child(最初一个子元素),:nth- 
child(n)(选中第 n 个子元素),其中写 n 表全选、2n 或 even 示意选中偶数位的元素、2n+ 1 或 odd 示意选中奇数位的元素。

5. 复合选择器:复合选择器是由两个或多个根底选择器,通过不同的形式组合而成的, 目标是为了能够抉择更精确更精密的指标元素标签。

 交加选择器:交加选择器由两个选择器形成,其中第一个为标签选择器,第二个为 class 选择器,两个选择器之间不能有空格,交加选择器 是 并且的意思。即... 又... 的意思。作用:选中同时合乎多个条件的元素。例子:div.red {} 抉择 class 为 red 的 div,用的相对来说比拟少,不太倡议应用。并集选择器:并集选择器是各个选择器通过逗号连贯而成的,任何模式的选择器(包含标签选择器、class 类选择器 id 选择器等),都能够作为并集选择器的一部分。如果某些选择器定义的款式齐全相 
同,或局部雷同,就能够利用并集选择器为它们定义雷同的 CSS 款式。就是说,只有逗号隔开的,所有选择器都会执行前面款式。作用:同时抉择多个选择器对应的元素。例子:.one, p , #id {},示意.one 和 p 和 #id 这三个选择器都会执行色彩为红色。通常用于个体申明。后辈选择器:后辈选择器又称为蕴含选择器,用来抉择元素或元素组的后辈,其写法就是把外层标签写在后面,内层标签写在前面,两头用空格分隔。当标签产生嵌套时,内层标签就成为外层标签的后 
代。子孙后代都能够这么抉择。或者说,它能抉择任何蕴含在内的标签。子元素选择器:子元素选择器只能抉择作为某一元素子元素的元素。其写法就是把父级标签写在后面,子级标签写在前面,两头跟一个 进行连贯,留神,符号左右两侧各保留一个空格。例子:ul > li {color: red;} 阐明 ul 元素蕴含着 li。

选择器的权重与优先级在之后的文章会总结进去!

退出移动版