美文网首页
CSS选择器

CSS选择器

作者: syp_xp | 来源:发表于2017-04-16 13:35 被阅读22次

    选择器汇总

    基本选择器

    1.通用选择器 *

    2.元素选择器 

    3.id选择器 #id

    4.类选择器 .class

    类选择器可以应用到一到多个元素

    类选择器可以通过 元素.class 的方式限定样式作用范围

    class="class1 class2" 的方式可以给一个元素引用多种样式

    5.属性选择器

    5.1直接通过两个中括号里面包含属性名即可。当然,还有更多扩展的

    属性选择器。

    [href]

    5.2匹配属性值的属性选择器。

    [type="password"]

    5.3属性值开头匹配的属性选择器

    [href^="http"]

    5.4属性值结尾匹配的属性选择器。

    [href$=".cn"]

    5.5属性值包含指定字符的属性选择器。

    [href*="baidu"]

    5.6属性值具有多个值时,匹配其中一个值的属性选择器

    <p class="abc def">

    [class~="def"]

    5.7属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

    <i lang="en-us">HTML5</i>

    [lang|="en"]

    复合选择器

    1.分组选择器:将多个选择器通过逗号分割,同时设置一组样式。当然,不但可以分组元素选择

    器,还可以使用 ID 选择器、类选择器、属性选择器混合使用

    p,b,i,span

    2.后代选择器:选择p元素内部所有b元素。不在乎b的层次深度。当然,后代选择器也可

    以混合使用 ID 选择器、类选择器、属性选择器

    p b 

    3.父子选择器:子选择器类似与后代选择器,而最大的区别就是子选择器只能选择父元素向下一

    级的元素,不可以再往下选择。

    p > b

    4.相邻兄弟选择器:匹配和第一个元素相邻的第二个元素。

    p + b

    5.普通兄弟选择器:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

    p ~ b

    伪元素选择器

    相关文章

      网友评论

          本文标题:CSS选择器

          本文链接:https://www.haomeiwen.com/subject/jtraattx.html