首页 > HTML5与CSS3.0 > CSS3常规使用(1):常规选择器大全

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

作者: 分类:HTML5与CSS3.0 点击: 2,306 次

    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
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:

或许你会感兴趣的文章:

发表评论

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

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