前端学习记录5-CSS(选择器)

CSS选择器

css选择器分为 基础选择器和复合选择器
复合选择器可以更准确更精细的选择目标元素标签
复合选择器由多个基础选择器组合而成

基础选择器

标签选择器

标签选择器为全选整个页面的所有标签
直接写标签就可以了 好处是快速同一页面所有标签的样式
但是缺点就是不好更改 你有一个要改的这事就不好搞了

标签选择器写法(选择器名称均为html标签):

div {
	color: red;
}

span {
	color: blue;
}

类选择器

可以为元素对象定义单独或者相同的样式
可以选择一个或多个标签
在CSS中要用.类名 进行标识
长词或词组使用-来命名
最好不要出现纯数字或者中文以及拼音 尽量用英文
主要你走了下个人怎么看你这个代码 标签中要用class="类名"来写

css样式:

.xs {
	color: red;
}

html调用:

<div class="xs">我爱你,山河湖海,日月星辰。我愿同你,亲昵永恒。</div>

多类名调用写法

在html中标签只能有一个class
在class中 class=“类名 类名” 中间用空格隔开
表示调用两个类名不同的css
好处就是方便修改 写好了的话还可以省点空间

谷歌原色logo CSS:

.font100{
		font-size: 100px;
}
.G-style{
		color: #3A84F7;
}
.o-style{
		color: #F85234;
}
.o-2-style{
		color: #FFB600;
}
.g-style{
		color: #3A84F7;
}
.l-style{
		color: #2B984F;
}
.e-style{
		color: #F85234;
}

html调用:

<span class="G-style font100">G</span>
<span class="o-style font100">o</span>
<span class="o-2-style font100">o</span>
<span class="g-style font100">g</span>
<span class="l-style font100">l</span>
<span class="e-style font100">e</span>

id选择器

id选择器使用如同类选择器

选择器写法
类选择器	.类名
id选择器	#id名
html中应用样式写法
类选择器	a href="#" class="我爱你(类名)"
id选择器	a href="#" id="我也爱你(id名)"
二者区别
id选择器具有唯一性	class选择器可以重复使用
类似于身份证号 我能证明我是我!	类似于名字 俩人叫雷霆嘎巴我不是这俩人里的但是我也叫雷霆嘎巴

同一个页面不允许出现两个相同的id调用个样式一

<span id="e-style">e</span>
<span id="e-style">l</span> 

虽然可以解析出来 但是别这么写
类选择器通常用于修改样式上 用的也是最多的
id选择器用于页面唯一元素上 搭配javascript

通配符选择器

类似于全局变量 但是优先级相对是最低的 会被其他选择器覆盖其属性

* {
	color:red;
}
.blue{
	color:blue;
}

这样写调用blue的标签 颜色会显示为blue而不是red

通配符选择器的弊端

解释上文为什么会出现文字颜色显示为blue:

通配符选择器 类似于全局变量 但在所有选择器中优先级最低

浏览器读取页面的时 实质上 先把所有的标签变成了红色
因为你写了.blue这个类选择器 并且下方标签调用blue类 所以显示上会显示为蓝色

这样的做法 对于页面的响应速度有很大影响(在你写的元素多了或重复率高的时候)

譬如这个页面有5000个标签
你每个标签都用类选择器定义了颜色 但是你同样写了通配符选择器
也定义了颜色 这样浏览器解析负载就会相对高
你直接5000个标签 负载都可能高 你弄个颜色就更高了

所以最好别随便用通配符选择器
除非必须得用 为啥这么说呢 就好比 你的用户电脑不怎么样 网也不好
本身浏览器在客户机上就相应慢 你页面复杂并且内容特别多
你这个页面在工程机上啥事没有 用户打开就费劲 是有可能的情况

此写法可清除html所有的默认边距（最好别瞎写）:

*{
	margin: 0;
	padding: 0;
}

复合选择器

后代选择器

用来选择元素或元素组的集合
外层标签在前 内层标签在后 按继承关系顺延
爷级 父级 子级 孙级 重孙级{
          属性:属性值;
}

在类名为.nav下的a标签 颜色设置为skyblue
在类名为.love下的无序列表ul下的每个li中的元素 颜色设置为skyblue

.nav a{
	color: skyblue;
}
.love ul li{
	color: skyblue;
}

子元素选择器

子元素选择器只能选择某元素的子元素(跨度只为一代)
父级>子级{
          属性:属性值;
}

在div标签下的strong标签 元素颜色设置为skyblue

div>strong{
	color: skyblue;
}

交集选择器

由两个选择器构成的复合选择器
标签选择器.同级选择器{
          属性:属性值;
}

若有很多个div标签 但我们只想修改类名为.red的div标签 此时在P标签中也存在类名为.red的标签 我们想单独修改div的颜色 便使用交集选择器

div.red{
	color: red;
}

并集选择器

若不同基础选择器中的样式相同 可用并集选择器
并集选择器(分组CSS选择器) 通过各个选择器连接而成 用于集体声明使用,划分
例如标签选择器,.类选择器,#id选择器

两个不同div标签中一个类名为.nav 另一个为 .sitenav 使用并集选择器可同时修改 这两个div标签的样式

.nav,
.sitenav{
	font-size: 14px;
	font-family: Microsoft YaHei;
}

链接伪类选择器

链接伪类选择器 实际利用了交集选择器
因为a标签具有默认样式 所以在开发中需要给链接做单独的样式

选择器名	含义
a:link	未访问链接
a:visited	已访问链接
a:hover	鼠标移动在链接上
a:active	选定的链接

实际开发一般情况 只使用a:hover 来指定鼠标移动在链接上的样式 
例如:
a{
	color:gray;
	text-decoration:none;
}
a:hover{
	color:skyblue;
}