四 . css系列之选择器详解及权重

(一)选择器详解
1.标签选择器(元素选择器):HTML标签作为选择器,作用是选取HTML文档中相同的HTML元素P{}
2.类选择器
第一步:设置类名<开始标签 class="类名"></结束标签>
第二步:为类设置样式.类名{}

注意:
1.同一文档中类名可以相同
2.class后面可以有多个值,用空格分开
3.id选择器
第一步:设置id名<开始标签 id="类名"></结束标签>
第二步:为id设置样式#id名{样式}

注意:
1.同一文档中,id名必须唯一
2.id的权重大于class
4.全局选择器(通配符选择器):*,选取文档中所有元素
5.群组选择器:将多个选择器用逗号连接在一起,形成一个组,使它们应用同种样式,如p,h3{}
6.伪类选择器
:link   设置超链接的默认效果
:visited  设置超链接被访问过后的样式
:hover    设置元素被鼠标滑过的样式
:active   设置元素被激活时的样式
:focus    设置元素获得输入焦点时的样式

注意:LVHA
7.后代选择器:用来选择一个元素的所有后代元素,选择器间用空格分隔,如div p{},表示div的后代p
8.子选择器:用来选择一个元素的子元素,两个选择器间用>分隔,如div>P{},表示选择div的子元素,且这个子元素是p标签
9.属性选择器:通过元素的属性或属性值来获取元素
a.[属性名]{样式}      选取具有某个属性的所有元素

b.匹配元素[属性名]{样式}    选取具有某个属性且匹配前面的“匹配元素”的所有元素

c.[属性名1][属性名2]{样式}  选取具有多个属性的所有元素

e.[属性名="属性值"]{样式}       选取具有某个属性且具有指定属性值的所有元素

f.[属性名~="属性值1  属性值2  属性值3..."]   选取具有某个属性且包含 某个属性值的所有元素

g.[属性名|="属性值"]    选取具有某个属性,且其属性值以某些字符串作为前缀,或属性值为该字符串,如
    <p title="a-1">测试1</p>
    <p title="a">测试2</p>
    [title|="a"]{},会选取到测试1和测试2

h.[属性名^="字符串"]    选取具有某个属性,且属性值以某些字符开头的所有元素

i.[属性名$="字符串"]   选取具有某个属性,且属性值以某些字符串做结尾的所有元素

j.[属性名*="字符串"]    选取具有某个属性,且属性值中包含指定字符串的所有元素
10.交集选择器:将两个选择器紧挨着写在一起,作用是选取这两个选择器的交集部分,格式有三:
a.标签选择器.类名
b.标签选择器#id名
c.标签选择器[属性名="属性值"]
11.结构伪类选择器:用于选取一个结构中的某个元素
:first-child        选取结构中第一个元素
父元素  :first-child   选取某个结构中的第一个元素
父元素  匹配对象:first-child    选取某个机构中的第一个元素,且这个元素必须和匹配对象向匹配
:last-child      选取结构中最后一个元素
:nth-child(n)       选取结构中第n个元素
:nth-last-child(n)    选取结构中倒数第n个元素

元素类型:nth-of-type(n)   按类别查找结构中的第n个元素
元素类型:nth-last-of-type(n)   按类型在结构中查找倒数第n个元素
元素类型:first-of-type     按类型查找结构中第一个符合某种类型的元素
元素类型:last-of-type      按类型查找结构中最后一个符合某种类型的元素
12.伪元素选择器
:first-letter   选取一个元素的第一个字符 
:first-line 选取一个元素的第一行内容
:before     在一个元素前面插入相应内容,常和content结合使用
:after      在一个元素后面插入内容,常和content结合使用
注意:
:first-line
:first-letter
这两个选择器的应用对象是块级元素
13.UI元素状态伪类选择器
:enabled    选取界面中可用元素
:disabled   选取界面中不可用元素
14.通用兄弟元素选择器
选择器1~选择器2     选取的是选择器1后面的所有选择器2,如div~p,选取的是div后面的所有p元素
选择器1+选择器2     选取的是选择器1后面的第一个选择器2元素,如div+p,选取的是div后面的第一个p元素
:root   选取文档的根元素,即<html>标签
:empty  选取文档中的空元素(所谓空元素,就是指该元素中连文本性信息都没有)
:not(被否定的元素)   否定伪类选择器,用来排除某些元素
:target   选取文档中具有锚点的元素,当超链接被激活时发挥作用
(二)选择器的权重
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
属性选择器的权重为0010
伪类选择器的权重为0010
伪元素选择器的权重为0010
包含选择器的权重:所包含选择器的权重之和
子选择器的权重:所包含选择器的权重之和
交集选择器权重为选择器之和
继承样式的权重为0000
行内样式的权重为1000

猜你喜欢

转载自blog.csdn.net/m0_37285193/article/details/81567522