阅读:5224回复:0
CSS3提供的各种选择器 — 让代码更简洁
CSS3选择器:
CSS3字符串匹配属性选择器: 元素名[属性="值"] , 全匹配 元素名[属性^="值"], 表示以“值”开头的元素 元素名[属性$="值"], 表示以“值”结尾的元素 元素名[属性*="值"], 表示匹配包含“值”的元素 目标伪类选择器: 选择器[type="chekcbox"]:checked{ } //选中状态下的样式设置 选择器[type="text"]:disabled{ } //禁用状态下的样式设置 选择器[type="text"]:read-only{ } //只读状态下的样式设置 not伪选择器: #div:not(){ } //只要不是(可以跟任何条件)都会被选中 结构性伪类选择器: 原理: 必须以父类为选择基准,并且符合以下两个要求: 1. 必须是指定元素 2. 必须是该父元素下所指定的位置(会考虑Body内所有的元素) 父选择器 p :nth-child(2) /* 第二个子元素 且元素为P */ 父选择器 p: first-child{ } /* 第一个子元素 且元素 为p */ 父选择器 p: last-child{ } /* 最一个子元素 且 元素为p */ 原理: 必须以父类为选择基准,该父元素指定位置的该元素排序,与其他元素无关 父选择器 p:nth-of-type(2) /* 第二个标签为P 的子元素 */ 父选择器 p:nth-last-of-type(2) /* 倒数第二标签为P 的子元素 */ 父选择器 i: only-child{ } /* 当父元素内,有且仅有唯一的指定元素的时候才有用 */ 兄弟素选择器 #p3~span{ } /*指定元素之后的所有相同标签的弟弟元素被选中*/ #p3+span {} /*指定元素的相邻弟弟元素,且为span*/ 子选择选择器 /* 子选择器,只能一级级的找,不能跨代 */ #div1>p /*指定元素的子元素为P的,不能跨代*/ |
|
|