美文网首页
CSS的选择器

CSS的选择器

作者: Ertsul | 来源:发表于2018-05-30 09:53 被阅读45次

    CSS 的常用选择器有: 通用选择器 * , id选择器 # , 类选择器 . , 元素选择器, 后代选择器, 兄弟选择器和伪类选择器等。其中,伪类选择器主要是带有 : 或者 :: 的选择器,现在,总结下CSS中选择器。

    通用选择器 *

    选择所有的元素。

    id选择器 #

    通过 id 选择元素。

    类选择器 .

    通过类名选择元素。

    元素选择器

    通过元素名选择元素。

    后代选择器 X Y

    选择父代元素 X 的子代元素 Y

    子选择器 X > Y

    选择父代元素 X 的子代元素 Y

    直接兄弟选择器 X + Y

    选择元素 X 后的第一个兄弟节点元素 Y

    兄弟选择器 X ~Y

    选择元素 X 后的所有类型为 Y 的兄弟节点元素。

    通过属性筛选获取元素 [attr]

    • [attr]:选择器中包含attr属性的选择器。比如:div[title]。
    • [attr = value]: 选择器中包含 attr 属性,且该属性的值为 value。比如:div[title=app]。
    • [attr |= value]: 选择器中包含 attr 属性,且该属性的值刚好为 value 或者 value- 开头。
    • [attr ^= value]:选择器中包含 attr 属性,且该属性的值以 value 开头。
    • [attr $= value]:选择器中包含 attr 属性,且该属性的值以 value 结尾。
    • [attr ~= value]:选择器中包含 attr 属性,且该属性的属性值以空格分开,其中刚好有一个 value 值。

    伪类选择器

    :nth-child(n)

    前面 开始,选择父标签里面的第 n 个标签,n1 开始。

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    
    ul :nth-child(1){
    color: blue;
    }
    ul :nth-child(2){
    font-size: 25px;
    }
    
    image1.png

    n 也可以是一个表达式,比如:选择偶数标签 2n,奇数标签 2n + 1

    ul :nth-child(2n + 1) {
        color: green;
        font-size: 22px;
    }
    
    ul :nth-child(2n) {
        color: aqua;
    }
    
    image2.png

    nth-last-child(n)

    后面 开始,选择父标签里面的第 n 个标签,n1 开始。

    ul :nth-last-child(1){
        color: blue;
    }
    ul :nth-last-child(2){
        font-size: 25px;
        color: green;
    }
    
    image3.png

    X:first-child and X:last-child

    父亲节点的第一个 / 最后一个元素,如果指定了X标签,这个X标签就必须是父级标签的第一 / 最后一个标签 的标签名。当然,也可以不指定X标签。

    ul :first-child{
        color: blue;
    }
    ul :last-child{
        color: green;
    }
    
    image4.png

    X:nth-of-type(n)

    选择父节点下子节点类型 X 元素中(从前面开始),第 n 个 X 元素;并且,n 可以是一个表达式,比如偶数奇数。

    <div>
        <strong>1</strong>
        <i>2</i>
        <strong>1</strong>
        <small>3</small>
        <strong>1</strong>
        <strong>1</strong>
    </div>
    
    div strong:nth-of-type(4){
         font-size: 40px;
    }
    
    image5.png

    即:选择 div 元素下的 strong 元素,并且是 strong 元素中的第 4 个。

    X:nth-last-of-type(n)

    选择父节点下子节点类型 X 元素中(从后面开始),第 n 个 X 元素;并且,n 可以是一个表达式,比如偶数奇数。

    X:first-child

    选择父节点下子节点类型 X 元素中的第一个节点。

    X:last-child

    选择父节点下子节点类型 X 元素中的最后一个节点。

    相关文章

      网友评论

          本文标题:CSS的选择器

          本文链接:https://www.haomeiwen.com/subject/untzjftx.html