CSS复合选择器 后代选择器 概念 后代选择器又叫做包含选择器,是可以选择父元素里面的所有符合条件的子元素 语法 元素1 元素2 {CSS 样式}; 元素1代表父元素、元素2代表子元素 元素1 和 元素2 之间要用空格隔开 元素2可以是儿子也可以是孙子 元素1和元素2可以是任意类型的选择器 子选择器 概念 子选择器只能选择某个父元素最近的一级子元素,简单理解就是只能选择亲儿子,不能选择孙子或者重孙等等。 语法 元素1 > 元素2 {css 样式代码} 表示选择元素1 里面最近的一级 元素2 并集选择器 概念 并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明 并集选择器是各组选择器通过英文的逗号连接而成,任何形式的选择器都可以作为并集选择器的一部分 伪类选择器 概念 伪类选择器是附加在其他选择器之上的一种选择器,可以来添加特殊的效果,比如给链接标签添加鼠标悬浮效果等。 语法 用:来进行表示 比如:hover :first-child。 链接伪类选择器 因为伪类选择器比较多,链接伪类的使用是最频繁的。 :hover a:hover 选择鼠标指针悬浮到链接上 :link a:link 选择所有未被访问过的链接 :active a:active 选择活动链接,当鼠标按下链接时 :visited a:visited 选择所有已访问过的链接 注意点 向选择器添加伪类选择器是,首先应该保证选择器具有对应的伪类状态,否则不能使用。 焦点伪类选择器 :focus 焦点伪类选择器用于选取获得焦点的元素,因为一般只有表单元素才会获取焦点,所以对于input类的表单元素使用的较多,焦点就是光标。 伪类选择器的总结 为了选择器和css类选择器一样,可以附加在其他的选择器上 向选择器添加伪类选择器的时候,必须保证这个选择器支持这种伪类状态 CSS的元素显示模式 什么是CSS的元素显示模式 块元素 行内元素 行内块元素 总结 元素的显示模式转换 CSS的背景属性 背景颜色 背景图片 背景平铺 背景图片定位 背景图片滚动 背景的复合写法 背景半透明 背景缩放 二.Css Mubu 幕布精选 CSS02 CSS的三大特性 层叠性 如果选择器相同,设置了相同的样式,就会出现样式冲突的问题 层叠性原则 样式冲突,遵循的原则就是就近原则,哪个样式距离结构近,就用哪个 样式不冲突,不会层叠。 继承性 CSS中的继承:子元素会继承父元素的某些样式,比如文本属性,字体属性等等。 子元素可以继承的属性:font-、text-、line-、color等。 优先级(权重) 当同一个元素被指定了多个选择器,就会出现优先级的问题 选择器相同,执行层叠性。 选择器不同,就执行优先级 不同的选择器权重如下 代码演示 优先级的注意点 权重是由四组数字构成的,但是不会有进位(如:元素选择器永远不会比类选择器的权重高) 如果遇到复合选择器,那么要将他们的权重进行相加后进行比较。 权重叠加 div ul li a ---> 0,0,0,4 .nav a:hover ---> 0,0,2,1 .header ul li a:hover ---> 0,0,2,3 #song .nav ul a:hover -->0,1,2,2 继承的权重是0,如果该元素没有被直接选中,不管父元素的权重是多高,子元素得到的样式权重都是0
|