css选择器
- 并集选择器
div ,p,#p1,.hello{}
- 交集选择器
p#p2{bgc:yellow} 选中既是p标签又带有p2类的元素
- 元素选择器
<p>this is a 元素</p>
p{bcg:yellow}
- id选择器
<div id="No1"></div>
#No1{bcg:yellow}
- 类选择器
<div class="container"></div>
.container{bcg:yellow}
- 子元素选择器
<div> <p> </p></div>
-
- div>p{bcg:yellow}
- p:first-child{} 选中的既是p元素又是第一个子元素的元素,不考虑是子元素的父亲是谁
- body >p:first-child{} 选中body的第一个子元素,同时还得是p元素,考虑子元素的父亲是body
- p:last-child{}选中 最后最后一个子元素
- p:nth-child(2){} 还可以传入even和odd表示选奇偶位置 选中第二个子元素
- p:first-of-type{} 第一个p
- 兄弟选择器
- span+p{} 选中span后面的那个兄弟p标签
- span~p{} 选中span后面所有的兄弟p标签
- a的伪类(表示的状态)hover和active必须在visited和link的后面
a:visited{}
a:link{}
a:hover{}
:active{}
- 伪元素选择器
:first-letter
:first-line
:before
:after
before和after与content结合使用
- 属性选择器:根据元素中的属性值来选择元素
1.根据属性名选 p[title]{ bcg:yellow;}
2.根据属性值选 p[title=hello]{bcg:red;}
3.根据属性值过滤 p[title^="ab"](以属性值为ab的开头) p[title$="c"]{bcg:yellow}(以属性值为c的结尾)p[title*="ab"](包含属性值ab)
- 否定伪类选择器
p:not(.hello)选中