css3新增伪类（css3新增的属性有哪些）

本文目录

• css3新增的属性有哪些
• 如何使用 CSS3 伪类
• css伪类选择器有哪些
• css3 新增选择器有哪些
• html 5 的CSS3新增的伪类选择器还包括哪些

css3新增的属性有哪些

css3新属性：

一、RGBA和透明度

RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。

二、background属性

• background-image：设置元素的背景图像。

• background-origin：规定背景图片的定位区域。

• background-size ：规定背景图片的尺寸。

• background-repeat：设置是否及如何重复背景图像。

三、word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。

注：所有主流浏览器都支持 word-wrap 属性。

基础语法：

• word-wrap: normal|break-word;

四、text-shadow属性

text-shadow 属性：向文本设置阴影。

text-shadow基础语法：

• text-shadow： 5px 5px 5px #FF0000;

参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；

五、font-face属性

font-face属性：定义自己的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

六、border-radius属性

border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。

基础语法：

• border-radius: 1-4 length|% / 1-4 length|%;

注：该属性允许您为元素添加圆角边框！

七、border-image属性

border-image：将图片规定为包围 div 元素的边框

border-image基础语法：

• border-image: url(border.png) 30 30 round

八、box-shadow属性

box-shadow属性：向框添加一个或多个阴影。（盒阴影）

box-shadow基础语法：

• box-shadow: 10px 10px 5px #888888

九、媒体查询

媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。

如何使用 CSS3 伪类

伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器备注：为了更好的区分伪类和伪元素，书写上CSS做了区分。例如，伪类 :first-child；伪元素 在下面的示例中：div 》 p:only-child{color:red; //不变红}div 》 p:only-of-type{color:red; //变红}《div》《p》test1《/p》《span》test2《/span》《/div》ul 》 li:nth-child(2){color:red; //选择该元素所有子元素的第二个子元素}ul 》 li:nth-last-child(2){color:red; //选择该元素所有子元素的倒数第二个子元素}ul 》 li:nth-of-type(2){color:red; //选择该元素所有该类型子元素的第二个子元素}ul 》 li:nth-last-of-type(2){color:red; //选择该元素所有该类型子元素的倒数第二个子元素}:target{color:red; //定位到锚点，选择此元素}//锚点的定位：首先在HTML元素中定义一个ID属性值，例如《p id=“test“》asd《/p》然后在浏览器地址栏，在URL最后加上#test，便可以定位到该锚点了。锚点的使用：可以用来将一篇很长的文章分段，eg.《a href=“#02“》跳转到《/a》《p id=“02“》……《/p》其实锚点只需name就可以可，加id是为了让它兼容性更好所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome 不支持ie8E:focus 支持firefox、safari、Opera、ie8、chrome -------------E:enabled 支持firefox、safari、Opera、chrome 不支持ie8E:disabled 支持firefox、safari、Opera、chrome 不支持ie8E:read-only 支持firefox、Opera 不支持ie8、safari、chromeE:read-write 支持firefox、Opera 不支持ie8、safari、chromeE:checked 支持firefox、safari、Opera、chrome 不支持ie8E::selection 支持firefox、safari、Opera、chrome 不支持ie8E:default 只支持firefox ------------E:indeterminate 只支持chrome ------------E:invalid 支持firefox、safari、Opera、chrome 不支持ie8E:valid 支持firefox、safari、Opera、chrome 不支持ie8E:required 支持firefox、safari、Opera、chrome 不支持ie8E:optional 支持firefox、safari、Opera、chrome 不支持ie8E:in-range 支持firefox、safari、Opera、chrome 不支持ie8E:out-of-rang 支持firefox、safari、Opera、chrome 不支持ie8下面就其使用做详细的说明;1、选择器E:hover、E:active和E:focus1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式使用方法：《元素》:hover{CSS样式}我们可以在“《元素》”中添加元素的type属性。例：input[type=“text“]:hover{CSS样式}2)、E:active选择器被用来指定元素被激活时使用的样式3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。例如：[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》选择器E:hover、E:active和E:focus《/title》 《style》 input[type=“text“]:hover{ background: green; } input[type=“text“]:focus{ background: #ff6600; color: #fff; } input[type=“text“]:active{ background: blue; } input[type=“password“]:hover{ background: red; } 《/style》 《/head》 《body》 《h1》选择器E:hover、E:active和E:focus《/h1》 《form》 姓名：《input type=“text“ placeholder=“请输入姓名“》 《br/》 《br/》 密码：《input type=“password“ placeholder=“请输入密码“》 《/form》 《/body》 《/html》 2、E:enabled伪类选择器与E:disabled伪类选择器1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。例如：[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》E:enabled伪类选择器与E:disabled伪类选择器《/title》 《style》 input[type=“text“]:enabled{ background: green; color: #ffffff; } input[type=“text“]:disabled{ background: #727272; } 《/style》 《/head》 《body》 《h1》E:enabled伪类选择器与E:disabled伪类选择器《/h1》 《form》 姓名：《input type=“text“ placeholder=“请输入姓名“ disabled》 《br/》 《br/》 学校：《input type=“text“ placeholder=“请输入学校“》 《/form》 《/body》 《/html》 3、E:read-only伪类选择器与E:read-write伪类选择器1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》read-only伪类选择器与E:read-write伪类选择器《/title》 《style》 input[type=“text“]:read-only{ background: #000; color: green; } input[type=“text“]:read-write{ color: #ff6600; } 《/style》 《/head》 《body》 《h1》read-only伪类选择器与E:read-write伪类选择器《/h1》 《form》 姓名：《input type=“text“ placeholder=“请输入姓名“ value=“winson“ readonly》 《br/》 《br/》 学校：《input type=“text“ placeholder=“请输入学校“》 《/form》 《/body》 《/html》 4、伪类选择器E:checked、E:default和indeterminate1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》checked伪类选择器《/title》 《style》 input[type=“checkbox“]:checked{ outline: 2px solid green; } 《/style》 《/head》 《body》 《h1》checked伪类选择器《/h1》 《form》 房屋状态： 《input type=“checkbox“》水 《input type=“checkbox“》电 《input type=“checkbox“》天然气 《input type=“checkbox“》宽带 《/form》 《/body》 《/html》 默认的选择项[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》default伪类选择器《/title》 《style》 input[type=“checkbox“]:default{ outline: 2px solid green; } 《/style》 《/head》 《body》 《h1》default伪类选择器《/h1》 《form》 房屋状态： 《input type=“checkbox“ checked》水 《input type=“checkbox“》电 《input type=“checkbox“》天然气 《input type=“checkbox“》宽带 《/form》 《/body》 《/html》 [html] view plain copy 《h1 style=“color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;“》indeterminate伪类选择器《/h1》《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》indeterminate伪类选择器《/title》 《style》 input[type=“radio“]:indeterminate{ outline: 2px solid green; } 《/style》 《/head》 《body》 《h1》indeterminate伪类选择器《/h1》 《form》 性别： 《input type=“radio“》男 《input type=“radio“》女 《/form》 《/body》 《/html》 5、伪类选择器E::selection1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。例如[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》伪类选择器E::selection《/title》 《style》 ::selection{ background: green; color: #ffffff; } input[type=“text“]::selection{ background: #ff6600; color: #ffffff; } 《/style》 《/head》 《body》 《h1》伪类选择器E::selection《/h1》 《p》今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！《/p》 《input type=“text“ placeholder=“文本“》 《/body》 《/html》 6、E:invalid伪类选择器与E:valid伪类选择器1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。例如[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》E:invalid伪类选择器与E:valid伪类选择器《/title》 《style》 input[type=“email“]:invalid{ color: red; } input[type=“email“]:valid{ color: green; } 《/style》 《/head》 《body》 《h1》E:invalid伪类选择器与E:valid伪类选择器《/h1》 《form》 《input type=“email“ placeholder=“请输入邮箱“》 《/form》 《/body》 《/html》 7、E:required伪类选择器与E:optional伪类选择器1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》E:required伪类选择器与E:optional伪类选择器《/title》 《style》 input[type=“text“]:required{ background: red; color: #ffffff; } input[type=“text“]:optional{ background: green; color: #ffffff; } 《/style》 《/head》 《body》 《h1》E:required伪类选择器与E:optional伪类选择器《/h1》 《form》 姓名：《input type=“text“ placeholder=“请输入姓名“ required》 《br/》 《br/》 学校：《input type=“text“ placeholder=“请输入学校“》 《/form》 《/body》 《/html》 8、E:in-range伪类选择器与E:out-of-range伪类选择器1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。例如[html] view plain copy 《!DOCTYPE html》 《html》 《head lang=“en“》 《meta charset=“UTF-8“》 《title》E:in-range伪类选择器与E:out-of-range伪类选择器《/title》 《style》 input[type=“number“]:in-range{ color: #ffffff; background: green; } input[type=“number“]:out-of-range{ background: red; color: #ffffff; } 《/style》 《/head》 《body》 《h1》E:in-range伪类选择器与E:out-of-range伪类选择器《/h1》 《input type=“number“ min=“0“ max=“100“ value=“0“》 《/body》 《/html》

css伪类选择器有哪些

1、动态伪类选择器

不同的状态，使用不同的样式。

• E: link

• E: visited

• E: active

• E: hover

• E: focus

2、目标伪类选择器

用来匹配页面的URI中某个标识符的目标元素。

• E: target

选择匹配E的所有元素，且匹配元素被相关URL指向。

3、语言伪类选择器

用来匹配使用指定语言的元素。

• E: lang(language)

4、元素状态伪类选择器

当元素处于某种状态下时，才起作用，在默认状态下不起作用。

• E: checked

• eg: input[type=“checkbox“]:checked{}

• E: enabled

• eg: input[type=“text“]:checked{}

• E: disabled

• eg: input[type=“text“]:disabled{}

5、结构伪类选择器

这个就比较多了，平时用的也比较频繁。

• : nth-child

• : nth-last-child

• : nth-of-type

• : nth-last-of-type

• : first-child

• : last-child

• : only-child

• : first-of-type

• : last-of-type

• : only-of-type

• : root 匹配元素所有在文档的根元素

• : empty 选择没有子元素的元素，且不包含节点

6、否定伪类选择器

• E: not(F) 匹配所有除F外的E元素

css3 新增选择器有哪些

一、css3之前的选择器

• ID选择器，#

• 类选择器，.

• 包含选择器(E F)

• 伪类选择器（:link,visited,hover,active,focus,first-child）

• 伪元素选择器（::first-line,first-letter,before,after）

• 通配选择器(.)

• 属性选择器(foo[name=’martin’])

• 子包含选择器(E》F)

• 相邻兄弟选择器(E+F)

二、css3新增选择器

新增属性选择器：

• E[foo^=’bar’] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头

• E[foo$=’bar’] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾

• E[foo*=’bar’] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串

新增结构伪类选择器：

• E:root 匹配文档所在的根元素

• E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）

• E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素

• E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)

• E:last-child

• E:first-of-type

• E:last-of-type

• E:only-child

• E:only-of-type

• E:empty

另外，使用前要考虑浏览器版本，新增css3选择器存在兼容性问题。平时多多练习，多动手。

html 5 的CSS3新增的伪类选择器还包括哪些

:first-of-type p:first-of-type 选择属于其父元素的首个 《p》 元素的每个 《p》 元素。 :last-of-type p:last-of-type 选择属于其父元素的最后 《p》 元素的每个 《p》 元素。:only-of-type p:only-of-type 选择属于其父元素唯一的 《p》 元素的每个 《p》 元素。:only-child p:only-child 选择属于其父元素的唯一子元素的每个 《p》 元素。:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 《p》 元素。 :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 《p》 元素的每个 《p》 元素。 :nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 :last-child p:last-child 选择属于其父元素最后一个子元素每个 《p》 元素。 :root :root 选择文档的根元素。 :empty p:empty 选择没有子元素的每个 《p》 元素（包括文本节点）。 :target #news:target 选择当前活动的 #news 元素。:enabled input:enabled 选择每个启用的 《input》 元素。 :disabled input:disabled 选择每个禁用的 《input》 元素 :checked input:checked 选择每个被选中的 《input》 元素。 :not(selector) :not(p) 选择非 《p》 元素的每个元素。::selection ::selection 选择被用户选取的元素部分。