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;
    }

  • 相关阅读:
    使用java实现面向对象 第一章
    深入.NET平台和C#编程笔记 第九章 文件操作
    MySQL_第七章
    MySQL_第八章
    MySQL_第五章
    MySQL_第四章
    MySQL_第三章
    MySQL_第二章
    MySQL_第一章
    S2_OOP第二章
  • 原文地址:https://www.cnblogs.com/yangyangae86/p/5689636.html
Copyright © 2011-2022 走看看