• CSS3选择器


    1.属性选择器

    HTML

    <p name="a">用于选取带有指定属性的元素</p>
    <p name="line">用于选取带有指定属性和值的元素</p>
    <p name="line1 line2">此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词</p>
    <p name="b">用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。</p>
    <p name="mline">匹配属性值以指定值开头的每个元素</p>
    <p name="mlines">匹配属性值以指定值结尾的每个元素</p>
    <p name="mliKnes">选择器匹配属性值包含指定值的每个元素</p>
    

    CSS

    /*
     	css属性选择器
     	[attr]用于选取带有指定属性的元素
     	[attr=value]用于选取带有指定属性和值的元素
     	[attr~=value]此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
     	[attr|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
     	[attr^=value]匹配属性值以指定值开头的每个元素
     	[attr$=value]匹配属性值以指定值结尾的每个元素
     	[attr*=value]选择器匹配属性值包含指定值的每个元素
     */
    p{
    	border: 1px solid #000;
    	 500px;
    }
    p[name]{
    	background: pink;
    }
    p[name=line]{
    	background: red;
    }
    p[name~=line2]{
    	background: #00CC99;
    }
    p[name|=b]{
    	background: #880000;
    }
    p[name^=m]{
    	background: #6347ED;
    }
    p[name$=s]{
    	background: yellow;
    }
    p[name*=K]{
    	background: fuchsia;
    }
    

    2.伪类选择器

    (1)结构性伪类选择器

    :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素
    :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
    :only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

    :only-child 选择器匹配属于其父元素的唯一子元素的每个元素
    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
    :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数
    :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素,等同于 p:nth-last-child(1)

    :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
    :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数

    (2)文字伪类

    :first-letter 选择器用于选取指定选择器的首字母
    :first-line 选择器用于选取指定选择器的首行

    (3)链接伪类

    :link 选择器用于选取未被访问的链接
    :visited 选择器用于选取已被访问的链接
    :active 选择器用于选择活动链接,当您在一个链接上点击时,它就会成为活动的(激活的)
    :hover 选择器用于选择鼠标指针浮动在上面的元素

    (4)表单伪类

    :focus 选择器用于选取获得焦点的元素
    :enabled 选择器匹配每个已启用的元素(大多用在表单元素上)
    :disabled 选择器匹配每个被禁用的元素(大多用在表单元素上)
    :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框),只有 Opera 支持 :checked 选择器

    (5)

    兼容性:所有主流浏览器均支持 ,除了 IE8 及更早的版本
    :empty 选择器匹配没有子元素(包括文本节点)的每个元素
    :root 选择器匹配文档根元素,在 HTML 中,根元素始终是 html 元素
    :target 选择器可用于选取当前活动的目标元素,URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)
    :not(selector) 选择器匹配非指定元素/选择器的每个元素
    ::selection 选择器匹配被用户选取的选取是部分,只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline

  • 相关阅读:
    tornado用户验证
    tornado cookie安全性
    XSS攻击
    《R语言入门》语言及环境简单介绍
    angular学习(十五)——Provider
    Tomcat 8(九)解读Tomcat组件的生命周期(Lifecycle)
    Windows之Xmanager连接linux打开Oracle视图操作
    CreateEvent和SetEvent及WaitForSingleObject的使用方法
    利用Sharepoint 创建轻量型应用之基本功能配置!
    android开发源代码分析--多个activity调用多个jni库的方法
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8109738.html
Copyright © 2020-2023  润新知