div,p | 元素选择器 | 选择所有 <div> 元素和所有 <p> 元素。 |
div p | 后代选择器 | 选择 <div> 元素内部的所有 <p> 元素。 |
div>p | 子元素选择器 | 选择父元素为 <div> 元素的所有 <p> 元素。 |
div+p | 同辈(级)元素选择器 | 选择紧接在 <div> 元素之后的所有 <p> 元素,此时的div和P元素是同一级别的,也就是所说的同辈元素 |
[attribute] | 属性选择器 | 为带有 某种 属性的任何元素设置样式,如,为带有href或者target属性的a的所有元素设置,格式:a[href]|a[target] |
[attribute=value] | 属性值等于选择器 | 为带有某种属性(attribute),且属性值是value(代表具体值)的所有元素设置样式 例如:a[href='www.baidu.com'],a[target='_blank'] |
[attribute~=value] | 属性包含选择器 |
为带有某种属性(attribute),且属性值包含value(代表具体值)的所有元素设置样式,此时的包含分为全包含和部分包含,举例说明: [title~=flower] //设置title属性包含flower内容的边框为5px且为黄色 { border:5px solid yellow; } <img src="/i/eg_tulip.jpg" title="tulip flower" /> //边框变黄 <img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge" /> //没有边框 |
[attribute|=value] | 属性开头选择器 |
注意:这里的value需要全匹配,不能部分匹配 举例说明:[lang|=en] { background:yellow; } |
:link | a:link | 选择所有未被访问的链接。 |
:visited | a:visited | 选择所有已被访问的链接。 |
:active | a:active | 选择活动链接 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 |
:focus | 元素选择器:focus | 选择获得焦点的 input 元素。 |
:first-letter | 元素选择器:first-letter | 选择每个 <p> 元素的首字母 |
:first-line | 元素选择器:first-line | 选择每个 <p> 元素的首行,包含空格。如:my name is feifan |
:first-child | 元素选择器:first-child | 选择属于父元素的第一个子元素的每个 要匹配的 元素。 如:p:first-child,此时的p为某个元素下的子元素,需要获取该元素下的第一个为p |
CSS选择器大全(上)
猜你喜欢
转载自blog.csdn.net/feifantiantang/article/details/80118898
今日推荐
周排行