一,css选择器有那些
1,标签选择器(如:div,p,ul,li等)
2.,类选择器 (如:.head, .head_logo)
给标签取class名,以点(.)加class名开头,选择所有该class名的元素
3,id选择器(如:#name,#name_txt)
给标签取id名,以#加id名开头,具有唯一性,选择”id = ‘wrap’”的元素
4,子元素选择器(如:a>img,ul>li)只能选择挨着父选择器的亲儿子
以>隔开父子级元素,(模块名>模块名,修饰>前模块内的子模块)
5,后代选择器(如:ul li,div p)可以选择父选择器的所有指定后代
以空格隔开包含关系的元素,(模块名模块名,修饰空格前模块内所有该模块)
6,相邻兄弟选择器(如:ul+li,div+p)
以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)
7、兄弟选择器(如:ul~li,div~p)
以~隔开兄弟关系的元素(模块名~模块名 修饰~前模块往下的所有兄弟模块)
8、全局选择器
以*开头(星号标在大括号前,修饰了包含body所有的标签)
9、并集选择器(如:ul,li , div,p)
以,分隔(逗号分隔开需要修饰的模块名)
10、属性选择器
属性选择器的5种写法:
(1)[属性名] 选择含有指定属性的元素。
p[title]{
color: orange;
}
(2)[属性名=属性值] 选择含有指定属性和属性值的元素。
p[title=abc]{
color: orange;
}
(3)[属性名^=属性值] 选择属性值以指定值开头的元素。
p[title^=abc]{
color: orange;
}
(4)[属性名$=属性值] 选择属性值以指定值结尾的元素。
p[title&=abc]{
color: orange;
}
(5)[属性名*=属性值] 选择属性值中含有某值的元素的元素。
p[title*=e]{
color: orange;
}
11、伪类选择器,伪元素选择器
选择器 | 示例 | 示例说明 |
a:link | 选择所有未访问链接 | |
a:visited | 选择所有访问过的链接 | |
a:hover | 把鼠标放在链接上的状态(任何标签) hover可以使用在任何元素上 | |
a:active | 选择正在活动链接 | |
input:focus | 选择元素输入后具有焦点 | |
p:first-letter | 选择每个<p> 元素的第一个字母 | |
p:first-line | 选择每个<p> 元素的第一行 | |
p:first-child | 选择器匹配属于任意元素的第一个子元素 (IE>=7) | |
p:last-child | 选择器匹配属于任意元素的最后一个子元素 (IE>=9) | |
p::before | 在每个<p>元素之前插入内容 | |
p::after | 在每个<p>元素之后插入内容 | |
p:lang(it) | 为<p>元素的lang属性选择一个开始 |
:not() 选择器选取除了指定元素以外的所有元素
p:not(.intro){
backgroundcolor:yellow
}
<h1>欢迎来到我的主页</h1>
<p class="intro">除去此元素其余元素改变背景</p>
<p>学的不仅是技术,更是梦想!</p>
<p>学的不仅是技术,更是梦想!</p>
如有不对的地方请在下方评论区留言,欢迎补充