选择器总结

其实,路上都是风景。

之前我们学习了一些选择器,今天我们来进行总结,选择器一共分为五大类。

01.基本选择器


1.通配符选择器

统一调配所有属性 

        *{
           padding: 0;  
           margin: 0; 
        }

2.class选择器 必须在元素中定义class属性

[类似于人名]
        .class属性值{
            属性:属性值;
            ...
        }

3.ID选择器必须在元素中定义id属性

#id值{
            属性:属性值;
            ...
        }

4.元素选择器(标签选择器)

标签名{
            属性:属性值;
            ...
         }

5.群组选择器

就是同时选择多个类名,中间用逗号隔开

 02.层次选择器


1.包含选择器(后代选择器)选择的匹配的元素被包含在前一个元素内,会选择所有在此父元素里面的所有后代,包括孙元素。中间用空格连接

2.子选择器

匹配的是这个元素的孩子,用>号连接

3.相邻兄弟选择器

兄弟选择器,就是让一个元素的兄弟属性值与这个元素相同

p+a{} 表示p的相邻元素a会改变为大括号设置的属性值。

p:hover+a{}表示鼠标悬浮在P上之后他的下面一个兄弟元素会显示出来并且属性值变为设置的。

4.通用选择器

p~a{}表示p后面所有的兄弟a元素都变为大括号内设置属性值。

p:hover~a{}表示鼠标悬浮在p上之后他所有的兄弟属性都会显示且属性值为设置的。

03.伪类选择器


1.动态伪类选择器(链接伪类选择器)

1>.链接未访问时效果

语法:a:link:;

2>.链接访问后效果

语法:a:visited:;

3>.鼠标悬停时候效果

语法:a:hover:;

4>.鼠标按下时效果

语法:a:active

使用链接伪类选择器的时候顺序必须为1234

5>.获取焦点

语法:E:focus

应用在文本输入框中

2.目标伪类选择器

语法:  :target

选择匹配的所有元素

前面的元素只能是被操作的元素的选择器。

例如:#id:target{}

<a href="#id">操作的</a>

<p id="id">被安排的</p>

使用该选择器来对页面中的某个target元素(该元素的id当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。

3.UI元素状态伪类选择器

enabled 匹配所有启用的表单元素,改变样式

disabled 匹配所有禁用的表单元素,改变禁用状态下的样式

checked 匹配的是复选或者单选按钮的表单元素,点击之后的样式

4.结构伪类选择器

1>E:fisrt-child

选中子元素为E的第一个E。与E:nth-child(1)等同

2>E:last-child

作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

3>E F:nth-child(n)

选择父元素E的第n个子元素F。:nth-child(length)、:nth-child(n)、:nth-child(n*length)、:nth-child(n+length)、:nth-child(-n+length)、:nth-child(n*length+1)

这里需要注意,如果F元素中混入了一个其他的元素,这个元素也算一行,但是不会显示出样式,比如第六行插入了其他的,那么如果想要继续设置第五行元素,n的值为6.

4>F:nth-child(even)

选中所有子元素F中位于偶数行的元素

5>F:nth-child(odd)

选中所有子元素F中位于奇数行的元素

6>:nth-last-child()

选中从后往前数的第几行/奇数行/偶数行

7>E:only-child

选中父元素中只有一个E元素的E

8>:first-of-type

选择的元素是一堆同类元素的上一级的元素的第一行

9>:last-of-type

选择一个上级元素的最后一个同类子元素

10>:nth-of-type()

选择指定的元素,类似于:nth-child,不同的是他只计算选择器中指定的那个元素。不管其中有没有混入其他的元素,也只计算第n行/偶数行/奇数行

11>:nth-last-of-type()

选择指定的元素,从元素的最后一个开始计算

12>:only-of-type

选择一个元素是它的上级元素的唯一 一个相同类型的子元素,注意这里与only-child不同的是,它是唯一一个类型相同而不是唯一一个

13>:empty

选择的元素里面没有任何内容,连空格都没有才可以

14>:root

选择文档的根元素

5.否定伪类选择器

E;not(F)

匹配E元素中所有除了F以外的元素。

04.伪元素选择器


1.:after{content:''}与::after{content:''}相同

代表让这些文字或者图片跟在此元素后面显示出来

2.:before{content:''}与::before{content:''}

在此元素之前添加内容或者图片

3.:first-letter{}

定义它身后的块级元素中第一个字符的样式

4.:first-line{}

定义它后面的块级元素的第一行的样式,注意这两个都只能使用块级元素

5.:selection{}

当我选中元素里面的文字时,改变样式,只能改变字体颜色和背景颜色。

05.属性选择器


1.E[attr]

选择具有attr属性的E元素,E可以省略,代表定义了attr的任意类型元素。

2.E[attr=”value”]

除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素  例如: a[href=”www.baidu.com”]{color:red;}

3.E[attr|=value]

选择匹配E元素,且E元素定义了属性 attr,attr属性值是一个具有val或者以val-开始的,属性值。常用于lang属性(例如 lang=” en-us”)。例如 p[lang=en]将匹配定义为英语的任何段落,无论是英式英语还是美式英语

4.E[attr~=val]

选择匹配E元素,且E元素定义了属性 attr,attr属性值具有多个空格分隔的值,其中一个值等于val。例如,.info[title~-=more]将匹配元素具有类名info,而且这个元素设置了一个属性 title,同时title属性值以包含了“more”的任何元素,例如<a class=” info”title=”clickhere for more information” >click me</a>

5.E[attr*=val]    

选择匹配元素E,且E元素定义了属性 attr,其属性值任意位置包含了“val”。换句话说,字符串 val 在任意位置

*代表匹配任意字符

6.E[attr^=val]

选择匹配元素E,且E元素定义了属性 attr,其属性值以val开头的任何字符串

^代表匹配起始符

7.E[attr$=val]

选择匹配元素E,且E元素定义了属性attr,其属性值以val结尾的任何字符串。刚好与E[attr^=val]相反

$代表匹配终止符

上一篇:CSS-CSS3的新特性 随学笔记


下一篇:用纯 CSS 判断鼠标进入的方向