css选择器
CSS选择器 以及它的类型
最近刚开始学HTML5,学到css这块呢,知识点很多,也比较碎,学的我头昏脑涨的,想要学好就需要进行细细的整理,
所以为了以后也学这个的小伙伴们,今天我来给大家分享一下我认为很重要的一块知识,那就是css选择器,以及它都有哪些类型。
Css选择器指的是css它对应在HTML里生效的那个标签,而标签它的名称就是选择器。
一、 类选择器(想要一个元素或多个元素同时生效)
语法: .名称{}
例如
我们给div起名字叫header,在css中就可以体现类选择器的用法
注意: class起名不要用数字开头
Class可以起多个名字 class=“header center”
它的语法是前面加个点(不要漏掉哦)
二、 ID选择器
语法:#名称{}
举例:
注意:ID具有唯一性 只能有一个名字
三、 层次选择器
它主要包括四类:包含选择器 子选择器
相邻兄弟选择器 通用兄弟选择器
- 包含选择器
语法:父元素 子元素{}
例如:
给容器div里面包含了一个p标签,给p修改样式如下
注意: a.父元素和子元素之间是空格
b.父元素可以是最近的父元素,也可以是爷爷元素或者其他祖先元素
c.如果是给子元素p设置样式,那么既包括儿子p也包括孙子p,重孙p等等,所有的p都生效。
2.子选择器
语法:父元素>子元素{}
例如:
该操作就只是对儿子元素p生效,对孙子p不生效。
3.相邻兄弟选择器
语法:选择器1+选择器2{}
例如:
相邻兄弟选择器实现的是选择器1后面最近的选择器2样式改变
如下图,只有一个top发生了改变。
4.通用兄弟选择器
语法:选择器1~选择器2{}
两者之间是波浪号
例如:
通用选择器实现的是选择器1后面所有选择器2的样式发生改变
如图,两个top都发生改变:
四、 伪类选择器
它主要分为动态伪类、结构伪类、语言伪类、否定伪类、UI状态伪类、目标伪类、语言伪类。
今天我主要说一下常用的动态伪类有哪些。动态伪类主要有以下四种:
1.:link{} 指的是标签初始的样子
2.:visited 指的是被访问过后的样式
3.:hover 指的是鼠标悬停在上面的样式
4.:active 指的是鼠标按住不动后样式
这四个属性一般情况下用于超链接<a href=“”> </a>
五、 伪对象选择器
伪对象选择器有五个 after before first-line first-letter selection
- after和before必须和content连用,content里面可以有内容,也可以不填。有内容的情况下,如果是文字,必须有双引号;但如果是图片,就不需要。
用法:::after{content=“”;}
::before{ content=“”;}
- first-line 指的是第一行文字
用法: p::first-line{color:red;}
将p标签的第一行文字变成红色。
- first-letter 指的是第一个字符,它只支持块元素。
用法:p::first-letter{color:red;}
- selection 只支持背景颜色和字体颜色
例如: .header::{font-size:13px;color:blue;background:yelow}
其中字号大小的设置并不生效,背景色和字体颜色可以生效。
六、群组选择器
语法:选择器1,选择器2,选择器3,选择器4{}
一般需要代码化简的时候,会用到群组选择器。
例如: p,ul,h1{margin:0;padding:0}
给 p标签,ul列表和h1统一设置内外边距为0
七、通配符选择器
语法:*{}
它一般是用来重置样式或者清除默认样式
例如 1.*{color:green;} 使该页面中所有元素都变成绿色
2. *{margin:0;padding:0;} 使所有元素的的内外间距变为0,主要用于清除一些标签自带默认边框的情况。