CSS3

CSS3

一,      css3可以做什么

1,         边框圆角

2,         盒阴影

3,         旋转

4,         渐变

5,         ……

二,      CSS3的属性选择器

CSS中追加了三个属性选择器:[att*=val][att^=val][att$=val]

1[att*=val]属性选择器

如果元素用att表示的属性的值中包含用val指定的字符,那么该元素使用这个样式。

2[att^=val]属性选择器

如果用att表示的属性的属性开头字符为用val指定的字符的话,那么该元素使用这个值。

3[att$=val] 属性选择器

如果元素用att表示的属性的属性值的结尾字符为用val指定的字符,那么该元素使用这个样式。

<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3中的属性选择器</title>
    <style>
        /*[id*= section1]{*/
            /*background: green;*/
        /*}*/
        /*[id*= section2]{*/
        /*background: #ff6600;*/
        /*}*/
        /*[id*=section1-1]{*/
            /*background: goldenrod;*/
        /*}*/
        /*[id*=section]{*/
            /*background: #000;*/
        /*}*/
        /*[id^=s]{*/
            /*background: cornflowerblue;*/
        /*}*/
        /*[id^=b]{*/
            /*background: hotpink;*/
        /*}*/
        [id$=c]{
            background: green;
        }
        [id$=\-1]{
        background: saddlebrown;
        }
        [id$=\_2]{
            background: red;
        }
    </style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">sectiona</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_2">section2-2</div>
<div id="section2_3">section2-2</div>
</body>
</html>

三,      结构性伪类选择器

1,         类选择器

css中可以用类选择器把相同的元素定义成不同的样式。比如:

p.left{text-align:left}

p.right{text-align:right}

      2,   伪类选择器

           类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意其名。

最常见的伪类选择器

a:link{color:#ff6600} /*未被访问的链接*/

a:visited{color:#87b291}/*已被访问的链接*/

a:hover{volor:#6535b2}/*鼠标指针移动到链接上*/

      3,   伪元素选择器

      伪元素选择器,针对于CSS中已经定义好的伪元素使用的选择器。

使用方法:

选择器:伪元素{属性:值}

与类配合使用

选择器.类名:伪元素{属性:值}

4,     CSS中,主要有四个伪元素选择器

1)         first-line伪元素选择器

第一行文字

2)         first-letter伪元素选择器

first-letter伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或者是日文等汉子)使用样式

3)         before伪元素选择器

before伪元素选择器用于在某个元素之前插入一些内容

4)         after伪元素选择器

after伪元素选择器用于在某个元素之后插入内容

5,         结构性伪类选择器rootnotemptytarget

1)         root 选择器

root选择器将样式绑定到页面的根元素中。

2)         not选择器

相对某个结构元素使用样式,但是想拍出这个结构元素下面的子结构元素,让它不使用这个样式时,我们就可以使用not选择器。

3)         empty选择器

empty选择器指定当元素中内容为空白时使用的样式。

4)         target选择器

target选择器对页面中某个target元素指定样式,该样式只在用户点击了页面找那个的超链接,并跳转到target元素后起作用。

6,         选择器first-childlast-childnth-childnth-last-child

1)         first-child选择器

first-child单独指定第一个子元素的样式。

2)         last-child选择器

last-child单独指定最后一个子元素的样式

3)         nth-child选择器

nth-child(n)选择器匹配正数下来第N个子元素

nth-child(odd)选择器匹配正数下来第奇数个子元素

nth-child(even)选择器匹配正数下来第偶数个子元素

4)         nth-last-child选择器

nth-last-child(n)选择器匹配倒数数下来第N个子元素

nth-child(odd)选择器匹配倒数下来第奇数个子元素

nth-child(even)选择器匹配倒数下来第偶数个子元素

      7,   选择器nth-of-typenth-last-of-type

1)         在使用nth-childnth-last-child时产生的问题

在案例中指定奇数文章的标题背景为黄色,偶数文章的标题为绿色。

      2)  使用nth-of-typenth-last-of-type

Nth-of-typenth-last-of-typecss3中就是用来避免上面这类问题的发生,在统计的时候就只针对同类型的子元素进行计算。

nth-of-type正数

nth-last-of-type倒数

      兼容性:

Nth-of-typenth-last-of-type都是CSS3开始提供需要在IE8以上的浏览才会被支持,chrome浏览器、Firefox浏览器、opera浏览器、Safari浏览器都支持!

8,         循环使用样式

nth-childAn+BA表示每次循环中共包括几种样式,B表示指定的样式在循环中所处的位置。

9,         Only-child选择器

Only-child选择器,只对唯一的子元素起作用

 

 



回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置