CSS3选择器（上）

最新推荐文章于 2023-06-22 15:09:42 发布

葡萄干是个程序员

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量371

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_15096707/article/details/51093513

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

1、属性选择器
    E[att^=val] 选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任何字符串。
    E[att$=val] 选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串。
    E[att*=val] 选择匹配元素E，且E元素定义了属性att，其属性值任意位置包含了val。
                换句话说，字符串与属性值的任意位置相匹配。
2、结构性伪类选择器——root
    :root 选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。
    :root 选择器等同于<html>元素，简单点说：
    如：:root {background:orange}   html {background:orange} 得到的效果等同。
    建议使用:root方法。另外在IE9以下还可以借助“:root”实现hack功能。
3、结构性伪类选择器——not
    :not 选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
    就拿form元素来说，比如说你想给表单中出submit按钮之外的input元素添加红色边框，CSS代码可以写成：
    form {width: 200px; margin: 20px auto;}
    input:not([type='submit']) {border: 1px solid red;}
4、结构性伪类选择器——empty
    :empty 选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
5、结构性伪类选择器——target
    :target 选择器称为目标选择器，用来匹配文档（页面）的url的某个标志符的目标元素。
6、结构性伪类选择器——first-child
    “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
    如：通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。
        ol > li:first-child{
          color: red;
        }
7、结构性伪类选择器——last-child
    “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-chil”选择器选择的是元素的最后一个子元素。
    例如：需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器。
    如：ul>li:last-child{background:blue;}
8、结构性伪类选择器——nth-child(n)
    “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值（1,2,3,4），
    也可以是表达式（2n+1、-n+5）和关键词（odd、even），但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，
    选择器将不选择到任何匹配的元素。
    如：选择偶数行 ol>li:nth-child(2n) {background:orange;}
        选择奇数行 ol>li:nth-child(2n+1) {background:orange;}
9、结构性伪类选择器——nth-last-child(n)
    “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”
    选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
10、first-of-type选择器
    “:first-of-type”选择器似于“:first-child”选择器，不同之处就是指定了元素的类型，其主要用来定位一个父元素下的某个类型的
    第一个子元素。
    如：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。
        /*我要改变第一个段落的背景为橙色*/
        .wrapper > p:first-of-type {
          background: orange;
        }
11、nth-of-type(n)选择器
    “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
    当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
    在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
    如：通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。
        .wrapper > p:nth-of-type(2n){
          background: orange;
        }
12、last-of-type选择器
    “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
    如：通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色
      （提示：这个段落不是“div.wrapper”容器的最后一个子元素）。
        .wrapper > p:last-of-type{
          background: orange;
        }
13、nth-last-of-type(n)选择器
    “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，
    但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
    如：通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。
        .wrapper > p:nth-last-of-type(3){
          background: orange;
        }
14、only-child选择器
    “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元
    素中仅有一个子元素，而且是一个唯一的子元素。
15、only-of-type选择器
    “:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用
    “:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
    如：通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。
        .wrapper > div:only-of-type {
          background: orange;
        }

葡萄干是个程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器（上）

1、属性选择器 E[att^=val] 选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任何字符串。 E[att$=val] 选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串。 E[att*=val] 选择匹配元素E，且E元素定义了属性att，其属性值任意位置包含了val。换句话说，字符串与属性值的
复制链接

扫一扫