CSS选择器

≯℡__Kan透↙ 提交于 2020-01-02 21:24:34

通配选择器(universal selector):

*{
color:blue;
}

类型选择器(type selector):

指定到特定类型的全部元素,例:
a{
color:blue;
}
p{
color:pink;
}
strong{
color:green;
}

<p>This is a pragraph with an
    <a href="..."><strong>emphasized</strong>link</a>
</p>

在这里插入图片描述

声明多重元素,用逗号分隔多个类型,形成类型选择器列表
a,h1{
color:blue;
}
p{
color:pink;
}
strong{
color:green;
}

<h1>hahahaha</h1>

在这里插入图片描述
声明后代元素,用空格进行分隔,选择后代.
h1{
color:blue;
}
p a{
color:pink;
}
strong{
color:green;
}
在这里插入图片描述
p的效果消失了,只选择了p的后代a.

类选择器(class selector)

.copyright{
font-size:smaller;
}
一个点加类名,
一个元素可以带有多个类,如class=“class1 class2” 用空格隔开两个类,而且样式取决于样式表的顺序.

ID选择器

#btn1{
color:orange;
}
一个井号加ID名
优先级:id选择器>类选择器>类型选择器
类和ID选择器都是大小写敏感,类型选择器不是.

属性选择器:

选择器 示例 说明
E[attr] a[rel] 具有指定的属性,可以是任意值
E[attr=val] a[rel=‘nofollow’] 具有指定的属性,值刚好是val
E[attr丨=val] a[rel丨=‘no’] 值正好是no或no后面接着-
E[attr~=val] a[rel=‘nofollow else’] 值刚好是val中以空格分开的值
E[attr=val] a[rel^=‘no’] val与属性值开始部分相匹配
E[attr=val] a[rel$=‘no’] val与属性值结尾部分相匹配
E[attr=val] a[rel*=‘no’] val与属性值任意部分相匹配

伪类选择器

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!