CSS3 选择器

html-css07

CSS3 选择器,第1张

css3中,追加了三个属性选择器分别为:

结构性伪类选择器由两部分构成,一是伪类选择器,一是伪元素选择器。

伪类选择器 ,要注意命名不要与系统定义好的选择器重名,例如link、hover

伪元素选择器 中包含 first-line、first-letter、before、after。

当root和body起冲突时,body就对内容区域生效,在内容区外则是root生效。

格式:not(selector)

1. first-child 对一个父元素中的 第一个 子元素进行样式的指定

2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定

3. nth-child(positon) 对一个父元素中的 指定序号 的子元素进行样式的指定

4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定

2)使用nth-of-type(odd)和nth-of-type(even)

1)使用nth-child

2)使用nth-child(an+b),a表示每次循环中,包括几种样式,b表示指定的样式在循环中所处的位置。

only-child选择器,在元素只有一个子元素时,可以代替使用 nth-child(1)/nth-last-child(1) 。

在css3选择器中,除了结构性伪类选择器外,还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用,在默认状态下不起作用。

通过js改变输入框的可输入和不可输入状态,通过css样式改变输入框可输入和不可输入状态时的背景颜色。

用来位于同一个父元素之下的,给与一个子元素平级的另一个子元素设定样式

x{width100%} 所有的x标签的宽度为100%

.x{width100%} 所有class属性值为x的标签的宽度为100%

#x{width100%} 所有id属性值为x的标签的宽度为100%

##x{width100%} 错误的写法,不排除某一些浏览器也支持这种写法。

css定义背景图:

--------------------------------------------------------------------------------------

background:背景颜色 url(背景图片路径及名字) 重复方式 对齐方式或精确位置

--------------------------------------------------------------------------------------

1.背景色:#123456、rgb(128,230,30)、red、blue,省略不写则为transparent(无背景色透明);

2.url():里面写 背景图片路径及名字,如:images/test.gif;可省略直接写为:

background:red(指定红色为背景色,没有图片背景)

3.重复方式:

no-repeat(任何方向都不重复)

repeat(x、y横竖方向都重复)

repeat-x(横向重复)

repeat-y(竖着重复);

不带此以上参数直接写作:

background:url(bg.jpg)

则上句效果等于下句:

background:url(bg.jpg) repeat

4.对齐方式:

用left、top、right、bottom、center定义背景图在元素中的显示位置;

一旦定义了url()背景图,该图片默认为在区块的左、上位置开始显示,即:

background:url(bg.jpg)等于 background:url(bg.jpg) left top

例子:

background:url(bg.jpg) no-repeat center bottom

上一行的意思是:背景图不重复,在元素横向的中间及竖向的底部开始显示

还有直接写数字方法精确定位背景图位置:

background:url(bg.jpg) no-repeat 10px 10px

意思是定一个背景图,不重复,从元素的0坐标(左上角)开始,横竖方向各位移10像素后开始显示

更多例子:

--------------------------------------------------------------------------------

background:url(bg.jpg)

什么参数都没跟,这个背景图会从左上角开始往横竖两个方向不断重复平铺显示

background:url(bg.jpg) no-repeat

加了no-repeat,意思是这张背景图不往任何方向重复重复,位置在左上角,等于:

background:url(bg.jpg) no-repeat left top

background:url(bg.jpg) no-repeat right bottom

背景图不重复,出现位置在区块的右边、底部

背景默认是出现在左边、顶部:

background:url(bg.jpg) no-repeat相当于:background:url(bg.jpg) no-repeat left top

background:url(bg.jpg) repeat-y

背景图y方向重复。即竖着重复,横向不重复

background:url(bg.jpg) repeat-x

跟上面相反,x横向重复,竖向不重复

background:url(bg.jpg) repeat

后面没跟-x或-y,就是横竖都重复,等同于默认情况:background:url(bg.jpg)

background:url(bg.jpg) repeat-y right

竖向重复,横向不重复,靠右对齐

明白了么:no-repeat right 不等于 repeat-y right

一个是背景图不重复,从右上角开始显示对齐

一个是背景图竖着重复,从右上角开始显示对齐