-
元素选择器
作用:选中页面中所有的指定元素。
语法:标签名{} -
id选择器
通过元素的id属性值选中唯一的一个元素。
语法:#id属性值{} -
类选择器
通过元素的class属性值选中一组元素。
语法:.class属性值{}
我们可以为元素设置class属性,class属性和id属性类似,只不过class属性可以重复。
可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开。<p class="p1 p2">
-
选择器分组(并集选择器)
通过选择器分组可以同时选中过多个选择器对应的元素。
语法:选择器1,选择器2,选择器N{} -
通配选择器
他可以用来选中页面中所有的元素。
语法:*{} -
复合选择器(交集选择器)
可以选中同时满足多个选择器的元素。
语法:-选择器1选择器2选择器N{}
对id选择器来说,不建议使用复合选择器。 -
元素之间的关系
父元素:之间包含子元素的元素。
子元素:直接被父元素包含的元素。
祖先元素:直接或间接包含后代元素的元素。
后代元素:直接或间接被祖先元素包含的元素。
兄弟元素:拥有相同父元素的元素。 -
后代元素选择器
选中指定元素的指定后代元素。
语法:祖先元素 后代元素1 后代元素1的后代元素{} -
子元素选择器
选中指定父元素的指定子元素。
语法:父元素>子元素
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child(even) 可以选中任意位置的子元素,该选择器后边可以指定一个参数,指定要选中第几个子元素。
even表示偶数位置的子元素,odd表示奇数位置的子元素。
:first-of-type
:last-of-type
:nth-of-type
和:first-child非常相似,只不过child是在所有的子元素中排列,而type是在当前类型的子元素中排列。
IE6及以下的浏览器不支持子元素选择器。 -
伪类选择器
伪类专门用来表示元素的一种特殊的状态。比如:访问过的链接,比如普通的超链接,比如获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类。
:link 正常链接(没访问过的链接)
:visited(只能定义字体颜色) 访问过的链接
:hover 鼠标滑过的链接
:active 正在点击的链接
这四个选择器的优先级是一样的,注意顺序,lvha。
浏览器是通过历史记录来判断链接是否访问过。
由于涉及到了用户隐私,所以使用visited伪类只能设定字体颜色。
:hover和:active也可以为其他元素设置。
IE6中不支持对超链接以外的元素设置:hover和:active。
input可以创建一个文本框。
:focus 获取焦点
::selection 选中的元素
注意:::selection这个伪类在火狐中需要采用另一种方式编写::-moz-selection(只支持火狐)。 -
伪元素
使用伪元素来表示元素中的一些特殊位置。
:first-letter 第一个字符
:first-line 第一行
:before 元素最前边的部分
:after 元素最后边的部分。
一般before都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容。
p:before{
content:"";
color:red;
}
-
属性选择器
-
可以根据元素中的属性或属性值来选取指定元素。
title属性,这个属性可以给任何标签指定,当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示。
语法:[属性名] 选取含有指定属性的元素
[属性名=“属性值”] 选取含有指定属性值的元素
[属性名^=“属性值”] 选取属性值以指定内容开头的元素
[属性名$=“属性值”] 选取属性值以指定内容结尾的元素
[属性名*=“属性值”] 选取属性值以包含指定内容的元素 -
兄弟元素选择器
①后一个兄弟元素选择器
可以选中一个元素后紧挨着的指定兄弟元素。
语法:前一个+后一个
②选中后边的所有兄弟元素
语法:前一个~后边所有 -
否定伪类
可以从已选中的元素中剔除出某些元素。
语法::not(选择器) -
样式的继承
在css中,祖先元素的样式,也会被他的后代元素所继承。
利用继承,可以将一些基本的样式设置给祖先元素,这样所有后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承,比如:背景相关的样式、边框相关的样式、定位相关的样式都不会被继承。 -
选择器的优先级
当使用不同的选择器,选中同一个元素时并且设置相同的样式时,采用哪个选择器定义的样式,由选择器的优先级(权重)决定。
内联样式,优先级1000
id选择器(#p),优先级100
类和伪类(.p),优先级10
元素选择器(p),优先级1
通配(*),优先级0
继承的样式,没有优先级
当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较。但是注意,选择器的优先级计算不会超过他的最大数量级。
如果选择器的优先级一样,则使用靠后的样式。
并集选择器的优先级是单独计算。
可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式甚至超过内联样式。但是在开发中尽量避免使用!important。
p{
color:red !important;
}