CSS3中的选择器

最新推荐文章于 2020-12-22 12:49:43 发布

听雨愁眠

最新推荐文章于 2020-12-22 12:49:43 发布

阅读量200

点赞数

分类专栏： HTML css 文章标签： CSS3

原文链接：https://www.jqhtml.com/42600.html

版权

HTML 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

CSS3介绍
CSS3在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的现状

浏览器支持程度不够好，有些需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛

属性选择器

属性选择器的标志性符号是 []。如先创建:

    <div>
        <p class="noe">周一</p>
        <p class="th">周二</p>
        <p class="noth">周三</p>
        <p class="now">周四</p>
        <p>周四</p>
    </div>

格式：

E[title] 选中页面的E元素，并且E存在 title 属性即可。

        /*p标签有class属性*/
        p[class] {
            color: red;
        }

E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。

        /*找到有'class=now'p标签*/
        p[class='now'] {
            font-weight: 700;
        }

E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。

        p[class^='no'] {
            background-color: pink;
        }

E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。

        /* 找到class以'th'结尾的p标签*/
        p[class$='th'] {
            font-size: 30px;
        }

E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。

        /* 找到包含'n'的class的p标签 */
        p[class*='n'] {
            color: blue;
        }

E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。

结构伪类选择器

伪类选择器的标志性符号是 :。

CSS中有一些伪类选择器，比如:link、:active、:visited、:hover，这些是动态伪类选择器。

CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。

1、格式：（第一部分）

E:first-child 匹配父元素的第一个子元素E。
E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
E:nth-child(odd) 匹配奇数
E:nth-child(even) 匹配偶数
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。

理解：
（1）这里我们要好好理解父元素的含义，它指的是：以 E 元素的父元素为参考。
（2）注意：以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。这个要好好理解，具体可以看CSS参考手册中的E:nth-child(n)的示例。我们可以理解成：先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效。
（3）另外，E:nth-child(n)这个属性也很有意思。比如，针对下面这样一组标签：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

如果选择器写成li:nth-child(2)，则表示第2个 li。
如果选择器写成li:nth-child(n)，则表示所有的li。因为此时的 n 表示 0,1,2,3,4,5,6,7,8…..（当n小于1时无效，因为n = 0 也是不会选中的）
如果选择器写成li:nth-child(2n)，则表示所有的第偶数个 li。
如果选择器写成li:nth-child(2n+1)，则表示所有的第奇数个 li。
如果选择器写成li:nth-child(-n+5)，则表示前5个 li。
如果选择器写成li:nth-last-child(-n+5)，则表示最后5个 li。
如果选择器写成li:nth-child(7n)，则表示选中7的倍数。

上面列举的选择器中，我们只要记住： n 表示 0,1,2,3,4,5,6,7,8…..就很容易明白了。

2、格式：（第二部分）