zoukankan      html  css  js  c++  java
  • 伪类选择器 css3

    一,相邻选择器;
    1,相邻选择器
    1),定义:相邻选择器匹配指定元素的相邻兄弟元素(切记自己是一个参考点并不会选择)
    2),用法:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
    3),表示符号:使用加号(+)作为结合符
    4),使用前提:
    a,必须有共同的父元素;
    b,必须相邻;

    2,通用兄弟选择器匹配某元素后面的所有兄弟元素
    1),定义:通用兄弟选择器匹配某元素后面的所有兄弟元素(包括自己)
    2),用法:两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1
    3),符号;使用符号(~)作为结合符,即 element1~element2
    4),使用前提:拥有共同的父元素;
    二,属性选择器;
    1),定义:属性选择器能够将元素附带的属性用于选择器中,从而对带有指定属性的元素设置样式
    2),写法:demo
    [title]
    {
    color:red;
    }
    选择带有 title 属性(鼠标停留显示的内容)的所有元素
    3),常见写法:
    三,伪类选择器;
    1,目标伪类:target,
    target:
    1,作用:
    通过锚点#找到目标元素,通过target伪类把样式赋给目标元素;
    2,注意点:
    1),如果目标元素是a标签,属性只能用id和name
    2),如果目标元素是其他标签,属性只能是id;
    3)demo:
    HTML:
    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
    <br /><br /><br />
    <a name="news1">内容 1...</a>
    <div id="news2">内容 2...</div>
    CSS:
    3,元素状态伪类:
    1,enabled,匹配每个已启用的元素(大多用在表单元素上)
    disabled,匹配每个被禁用的元素(大多用在表单元素上)
    checked,匹配每个已被选中的 input 元素(只用于单选按钮和复选框)
    3,结构伪类:
    first-child ,匹配属于其父元素的首个子元素
    :last-child,匹配属于其父元素的最后一个子元素
    :empty ,匹配没有子元素(包括文本节点)的每个元素
    :only-child ,匹配属于其父元素的唯一子元素
    示例
    p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素
    p:last-child 选择属于父元素的最后一个子元素的每个 <p> 元素
    p:empty 选择没有子元素的每个 <p> 元素
    p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素
    4,否定伪类
    1),定义:not(selector) ,匹配非指定元素/选择器的每个元素
    四,伪元素选择器;
    1,伪元素 :first-letter:
    用法用处:
    :first-letter 选择器用于选取指定选择器的首字母
    常用于排版细节,如首字母突出显示、下沉等
    demo:
    HTML:
    <h1>h1 文本</h1>
    <p>段落文本111</p>
    <p>段落文本222</p>
    CSS:
    p:first-letter
    {
    font-size:20pt;
    color:#8A2BE2;
    font-weight:bold;
    }
    2,伪元素 :first-line
    用法用处::first-line 选择器用于选取指定选择器的首行
    demo:
    HTML:
    <p>这是一个文本比较多的段落,有多行文本。需要设置第一行文本的特定样式。</p>
    CSS:
    p:first-line
    {
    font-size:20pt;
    color:#8A2BE2;
    font-weight:bold;
    }
    3,伪元素 ::selection
    用法用处:::selection 选择器匹配被用户选取的部分
    demo:
    HTML:
    页面文本,可以使用鼠标拖拽的方式直接选中,查看效果。
    <p>段落文本</p>
    <div>div中的文本</div>
    CSS:
    ::selection
    {
    color:#f00;
    }

  • 相关阅读:
    DIY 作品 及 维修 不定时更新
    置顶,博客中所有源码 github
    openwrt PandoraBox PBR-M1 极路由4 HC5962 更新固件
    使用 squid 共享 虚拟专用网至局域网
    第一次参加日语能力测试 N5
    libx264 libfdk_aac 编码 解码 详解
    开发RTSP 直播软件 H264 AAC 编码 live555 ffmpeg
    MFC Camera 摄像头预览 拍照
    http2 技术整理 nginx 搭建 http2 wireshark 抓包分析 server push 服务端推送
    plist 图集 php 批量提取 PS 一个个切
  • 原文地址:https://www.cnblogs.com/yangyangae86/p/5689636.html
Copyright © 2011-2022 走看看