美文网首页
CSS-选择器

CSS-选择器

作者: 哎呦呦胖子斌 | 来源:发表于2018-09-09 11:46 被阅读0次

    标签选择器

    指用HTML标签名称作为选择器,按标签名进行分类,为页面中的某一类标签指定为同一样式。

    类选择器

    类选择器用’.’符号进行表示,后面紧跟类名,标签调用时使用 class=’类名’
    1.不建议使用”_”来对类名进行命名,会有兼容性问题,可以使用中横线
    2.不要用纯数字、中文等命名,尽量使用英文字母来表示

    ID选择器

    用’#’符号进行表示,后面紧跟id名,标签调用时使用 id=’id名’。
    W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class;
    类选择器好比人的名字,是可以多次重复使用的;
    id选择器好比人的身份证号码,是唯一的,不能重复使用。

    通配符选择器

    *代表所有选择器

    伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,给第一个、第N个元素添加效果。
    为了和类选择器想区别,类选择器是一个点,伪类选择器是两个点:

    链接伪类选择器

    :link 未访问的链接
    :visited 已访问的链接
    :hover 鼠标移动到链接上
    :active 选定的链接
    注意写的时候尽量不要把他们的顺序颠倒,lvha,lv包包非常ha

    结构伪类选择器(CSS3)

    :first-child 选取属于其父元素的首个子元素的指定选择器
    :last-child 选取属于其复原度的最后一个子元素的指定选择器
    :nth-child(n) 匹配属于其父元素的第N个子元素,不论元素的类型 even偶数 odd奇数 n从0开始
    可以写3n,表示第0 3 6 9 12…个元素
    :nth-last-child(n) 选择器匹配属于其父元素的第N个子元素, 不论元素的类型 even偶数 odd奇数 n从0开始,和上一个属性的区别在于,这个子元素是从最后一个子元素开始数的,而上面的属性是从第一个子元素开始数的。

    目标伪类选择器

    :target目标伪类选择器,选择器可用于选取当前活动的目标元素

    复合选择器

    交集选择器

    由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格。

    并集选择器

    各个选择器通过逗号连接而成,任何形式的选择器(包括标签选择器、class选择器、id选择器)都可以作为并集选择器的一部分。

    后代选择器

    后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
    1.不仅仅是可以写标签名,还可以写类名,记得中间有空格.
    2.后代选择器可以选择儿子、孙子、重孙子

    子元素选择器

    只能选择作为某元素的子元素的元素,写法是把父级标签写在前面,子级标签写在后面,中间用一个>连接,符号左右两侧各保留一个空格。它和后代选择器的区别是,只选择儿子。

    属性选择器

    选取某些带有特殊属性的标签,属性选择器用中括号来表示。
    几种属性选择器:
    E[attr]    存在attr属性即可
    E[attr=val]    属性值等于val才行
    E[attr*=val]   属性值里包含val字符并且在任意位置
    E[attr^=val]    属性值里包含val字符并且在开始位置
    E[attr$=val]    属性值里包含val字符并且在结束位置

    <a href=’’ title=’我是一个百度’>百度</a>
    <a href=’’>新浪</a>
    <a href=’’>网易</a>
    
    a[title] {
        color:red;
    }
    

    伪元素选择器(CSS3)

    1.E::first-letter 文本的第一个单词或字
    2.E::first-line 文本的第一行
    3.E::selection 可改变选中文本的样式
    4.E::before,E::after
    在E元素内部的开始位置和结束位置创建一个元素,该元素为为行内元素,且必须要结合content属性使用。

    相关文章

      网友评论

          本文标题:CSS-选择器

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