湖北手机版建站系统信息,wordpress 分类目录 404,跨国采购网外贸论坛,公司网站建设及维护CSS3 新特性
专栏持续更新中
在前面我们已经学习了元素选择器、id 选择器和类选择器#xff0c;我们可以通过标签名、id 名、类名给指定元素设置样式。 现在我们继续选择器之旅#xff0c;学习 CSS3 中新增的三类选择器#xff0c;分别是#xff1a; • 属性选择器 • 子…CSS3 新特性
专栏持续更新中
在前面我们已经学习了元素选择器、id 选择器和类选择器我们可以通过标签名、id 名、类名给指定元素设置样式。 现在我们继续选择器之旅学习 CSS3 中新增的三类选择器分别是 • 属性选择器 • 子元素伪类选择器 • UI 伪类选择器
新增属性选择器
属性选择器就是通过正则的方式去匹配指定属性的元素为其设置样式。 在 CSS3 中新增了三种属性选择器如下所示
选择器描述E[attr^“xx”]选择元素 E其中 E 元素的 attr 属性是以 xx 开头的任何字符。E[attr$“xx”]选择元素 E其中 E 元素的 attr 属性是以 xx 结尾的任何字符。E[attr*“xx”]选择元素 E其中 E 元素的 attr 属性是包含 xx 的任何字符。
新建一个 index.html 文件在其中写入以下内容。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylea[href^#] {color: rgb(179, 255, 0);}a[href$org] {color: rgb(195, 0, 255);}a[href*un] {background-color: rgb(0, 255, 149);color: white;}/style/headbodyullia href#本地链接/a/lilia hrefhttps://www.baidu.com百度/a/lilia hrefhttps://developer.mozilla.orgMDN/a/lilia hrefhttps://unsplash.comUnsplash/a/li/ul/body
/html• 在上面代码中我们使用 a[href^“#”] 去匹配 a 标签中 href 属性值以 # 开头的元素。 • 使用 a[href$“org”] 去匹配 a 标签中 href 属性值以 org 结尾的元素。 • 使用 a[href*“un”] 去匹配 a 标签中 href 属性值包含 un 的元素。
子元素伪类选择器
子元素伪类选择器就是选择某元素的子元素的一种选择器。 在 CSS3 中有以下几种子元素伪类选择器
选择器描述E:first-child选择元素 E 的第一个子元素。E:last-child选择元素 E 的最后一个子元素。E:nth-child(n)选择元素 E 的第 n 个子元素n 有三种取值数字、odd 和 even。注意第一个子元素的下标是 1。E:only-child选择元素 E 下唯一的子元素。E:first-of-type选择父元素下第一个 E 类型的子元素。E:last-of-type选择父元素下最后一个 E 类型的子元素。E:nth-of-type(n)选择父元素下第 n 个 E 类型的子元素n 有三种取值数字、odd 和 even。E:only-of-type选择父元素唯一的 E 类型的子元素。E:nth-last-child(n)选择所有 E 元素倒数的第 n 个子元素。E:nth-last-of-type(n)选择所有 E 元素倒数的第 n 个为 E 的子元素。
新建一个 index1.html 文件在其中写入以下内容。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylediv {width: 100px;height: 100px;margin-top: 10px;background-color: rgb(0, 255, 242);}div:nth-child(2) {background-color: rgb(0, 255, 128);}div:nth-of-type(4) {background-color: rgb(111, 0, 255);}/style/headbodydiv/divdiv/divdiv/divdiv/div/body
/html• 在代码中我们使用 div:nth-child(2) 给 div 的第 2 个子元素添加绿色背景颜色。 • 使用 div:nth-of-type(4) 给父元素下第 4 个 div 子元素添加紫色背景颜色。
UI 伪类选择器
UI 伪类选择器是通过元素的状态来选择的一种选择器。 在 CSS3 中有以下几种 UI 伪类选择器。
选择器描述:focus给获取焦点的元素设置样式。::selection给页面中被选中的文本内容设置样式。:checked给被选中的单选框或者复选框设置样式。:enabled给可用的表单设置样式。:disabled给不可用的表单设置样式。:read-only给只读表单设置样式。:read-write给可读写的表单元素设置样式。:valid验证有效。:invalid验证无效。
