• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(1):常规选择器大全

    CSS3常规使用(1):常规选择器大全

    作者: 分类:HTML5与CSS3.0 点击: 66 次
    wordpress CMS主题:ssmay主题

      1、属性选择器

      //所需 CSS2 版本
      [href] {color: orange;}
      [type="password"] {border: 1px solid red;}
      [class~="edf"] {font-size: 50px;} 解释:属性值具有多个值时,匹配其中一个值的属性选择器。

      //所需版本 CSS3
      [href^="http"] {color: orange;} 解释:属性值开头匹配的属性选择器。
      [href$=".com"] {color: orange;} 解释:属性值结尾匹配的属性选择器。
      [href*="baidu"] {color: orange;} 解释:属性值包含指定字符的属性选择器。

      2、复合选择器

      ul > li {border: 1px solid red;} 子选择器
      p + b {color: red;} 解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
      p ~ b {color: red;} 解释:普通兄弟选择器匹配和第一个元素后面的所有元素。

      3、伪元素选择器

      ::first-line {color: red;}块级首行
      ::first-letter {color: red;}块级首字母
      a::before {content: '点击-';}文本前插入
      a::before {content: '-请进';}文本后插入

      4、伪类选择器总汇

      选择器 名称 说明 CSS 版本

      :first-child 子元素选择器 选择元素中第一个子元素 css2

      :last-child 子元素选择器 选择元素中最后一个子元素 css3
      :only-child 子元素选择器 选择元素中唯一子元素 3
      :only-of-type 子元素选择器 选择指定类型的唯一子元素 css3
      :nth-child(n) 子元素选择器 选择指定 N 个子元素 css3
      :enabled UI 选择器 选择启用状态的元素 css3
      :disabled UI 选择器 选择禁用状态的元素 css3
      :target 匹配相关URL指向的元素

      :nth-child(even) 选定偶数行;
      :nth-child(odd) 选定奇数行;

      :nth-of-type(n) 选择父元素下同类型的第n个元素,也可以指定类型,如:p:nth-of-type(n)
      :nth-last-of-type(n) 选择同类型的倒数第n个元素

      如:
      <div class="haha">
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <p>完全一样,对于不熟悉的人对其可能不是很区分</p>
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <p>完全一样,对于不熟悉的人对其可能不是很区分</p>
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <p>完全一样,对于不熟悉的人对其可能不是很区分</p>
      </div>
      <style> div :nth-of-type(3){ color:red;} </style>
      这里设置 div下的子元素,同一类型的第3个字体颜色为 红色。所以,第3个li 和第3个 p 是红色。
      如果指定类型,如:div p:nth-of-type(3){ color:red;} 那么,就只有p元素类型的第3个是红色。

      :nth-child(n) 选择第n个子元素,不分类型,
      :nth-last-child(n) 选择倒数第n个子元素

      如:<style> div :nth-child(3){ color:red;} </style>
      这里设置 div下的第3个子元素为红色。第3个子元素是p ,所以只有这个p元素是红色。
      也可以指定类型,如:div li:nth-child(3){ color:red;} 但如果第3个子元素不是li,那么这个第3个子元素就不会显示红色。

      :only-child 选择父元素的唯一子元素
      :only-of-type 选择同类型的唯一子元素

      如:
      <div class="haha">
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <p>完全一样,对于不熟悉的人对其可能不是很区分</p>
      <dd>完全一样,对于不熟悉的人对其可能不是很区分</dd>
      <p>完全一样,对于不熟悉的人对其可能不是很区分</p>
      <ul>完全一样,对于不熟悉的人对其可能不是很区分</ul>
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      </div>

      如:<style> div :only-of-type{ color:red;} </style>
      这里只有 dd 和 ul 类型是唯一子元素,而li 和 p 元素都有2个,所以,dd和ul是红色。

      :target 匹配url中指定的元素,指定元素的id要与 a链接相对应

      如:
      <div class="haha">
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <p>完全一样,对于不熟悉的人对其可能不是很区分</p>
      <li id="gao">完全一样,对于不熟悉的人对其可能不是很区分</li>
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      <li>完全一样,对于不熟悉的人对其可能不是很区分</li>
      </div>
      <a href="#gao">1111</a>
      只要我们点击 a链接, id="gao" 的元素就会变成 红色

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807216103.html
    本文时间:2018-07-21 08:57:56
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.