选择器的作用是选中标签,所以下面的选择器都是指标签
- * /*通配符选择器*/
- # /*id选择器*/
- . /*类选择器*/
- , /*分组选择器*/
- 空格 /*后代选择器*/
- > /*直接后代选择器*/
- + /*相邻兄弟选择器*/
- ~ /*通用兄弟选择器*/
-
- /*
- 属性存在选择器
- */
- [attr] /*选择包含attr属性的所有元素,不论attr的值*/
- /*需要注意的是属性值val是字符串需要用引号引起来*/
- [attr=val] /*选择仅包含attr被赋值为val的所有元素*/
- [attr~=val]/*选择以val命名的属性元素,并且属性是以空格作为分隔值*/
- /*
- 子串值属性选择器
- */
- [attr|=val]/*选择attr属性的值以val(包含val)或者val-开头的元素*/
- [attr^=val]/*选择attr属性的值以val开头(包含val)的元素*/
- [attr$=val]/*选择attr的值以val结尾(包含val)的元素*/
- [attr*=val]/*选择attr属性值中含有字符串val的元素*/
-
- <style>
- div[name]{
- border:1px solid
- }
- </style>
- <div>
- <div name="a">1</div>
- <div name="b">2</div>
- </div>
-
- /**
- 链接伪类 只能作用到链接类的标签元素
- */
- :link /*表示作为超链接,指向一个未访问的地址的所有锚*/
- :visited/*表示作为超链接,指向一个已被访问的地址的所有锚*/
- :target/*代表一个特殊的元素,它的id是URI的片段标识符*/
-
- /**
- 动态伪类 能作用到所有标签元素
- */
- :hover/*选中鼠标悬浮的标签元素*/
- :active/*选中点击按住的标签元素*/
- :visited
- /*会被浏览器记住已经点击过
- visited只有3个属性可以修改
- color background-color border-color
- */
-
- :enabled/*匹配可编辑的表单*/
- :disable/*匹配被禁用的表单*/
- :checked/*匹配被选中的表单*/
- :focus/*匹配获焦的表单*/
-
- /* 关于后面index的值说明:
- index的值从1开始计数!!!!
- index可以为变量n(只能是n)
- index可以为even odd
- */
- /*选择id=wrap元素标签的子标签中索引是index的表情*/
- #wrap ele:nth-child(index) /*表示匹配#wrap中第index的子元素 这个子元素必须是ele*/
- #wrap ele:nth-of-type(index) /*表示匹配#wrap中第index的ele子元素*/
- /* 注意
- :nth-child和:nth-of-type 有一个很重要的区别!
- nth-of-type以元素为中心!就是所有符合条件的第一个标签,标签不同也会被选中
- 举例:
- <div id="wrap">
- <div class="inner">div</div>
- <p class="inner">p</p>
- <span class="inner">span</span>
- <h1 class="inner">h1</h1>
- <h2 class="inner">h2</h2>
- </div>
- 下面的css会选中上面所有的标签,因为每个标签都只出现一次
- #wrap .inner:nth-child(1){
- border: 1px solid;
- }
- */
- :first-of-type /*元素为中心,第一个出现元素*/
- :last-of-type /*元素为中心,最后一个出现的元素*/
- :nth-last-type(index)
- :only-of-type /*选中仅出现一次的元素*/
- /* 例如:
- <div>
- <span>1</span>
- <span>2</span>
- <span>3</span>
- <p>4</p>
- <p>5</p>
- <span>6</span>
- </div>
- 通过
- div p:nth-last-type(1){
- color:red
- }
- 可以选择4所在的标签并且将4的字体设置为红色,相对于nth-child比较宽松的选择元素,
- 可以有上面类似的span不需要的元素,而nth-child必须是第一个元素,可能选择不到
- div p:nth-child(1){
- color:red
- }
- 则一个也选择不到元素,因为div下面第一个子元素不是p标签
- */
-
- /*:nth-child(index)系列 */
- :first-child /*第一个元素*/
- :last-child /*最后一个元素*/
- :nth-last-child(index)/*最后一个元素*/
- :only-child /*(相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))*/
-
-
- :not() /*不要选中*/
- :empty() /*内容必须是空的,有空格都不行,有属性没关系*/
-
伪元素建议使用双冒号,单冒号也可以使用
- ::after /*css生成的虚拟的dom元素(相当于生成的标签)一个元素只能有一个after或before*/
- ::before
-
- ::firstLetter/*选中标签内的第一个字符*/
- ::firstLine/*选中第一行元素*/
- ::selection /*鼠标按住左键选中的内容*/
-