【CSS】基础各种选择器

Zero394

已于 2022-05-16 17:48:09 修改

阅读量2.6k

点赞数 5

文章标签： css css3 html

于 2022-05-15 21:35:32 首次发布

本文链接：https://blog.csdn.net/weixin_62321221/article/details/124787815

版权

一.CSS使用方法

1.内联样式

内联样式也叫作行内样式,就是在html标签中,开始标签中写入style属性,来完成样式渲染.

优势:单独渲染该标签,优先级非常高
劣势:不利于修改,复用性很差

2.内部样式

在html文件中的<head></head>标签中加入<style></style>标签,在<style>标签中写CSS样式.

书写时需要用到选择器和{},复用性高于内联样式,插入到当前html中,别的页面不能使用

3.外部样式

在head标签中加入link标签,用于引入外部CSS样式

link标签链接外部资源用的,href超文本引用,css文件的路径,rel引用文件和html的关系,必写属性,stylesheet指外部加载的样式表

二.chrome开发者工具面板的使用

三.CSS样式规则和语法

1.CSS样式规则

由选择器和声明块构成

div{
    color:red;
    font-size:12px
}

2.CSS语法分解

四.CSS选择器

css选择器是css规则的一部分,他是元素和声明块一起组成的,选择器用于告诉浏览器哪一个html标签即将被渲染

1.基础选择器

(1)通用选择器(通配选择器)

* 指的是当前页面上的所有标签都应用该样式

* {
    color:red;
}

指所有元素,优先级非常低,性能低
*{margin:0;padding:0}是指将所有元素的内外间距去除

(2)标签选择器

直接使用标签的名字当做选择器使用

div{
    color:red;
}

span{
    color:yellow;
}

优势是快捷,选中所有标签相同的元素渲染
劣势是选择太广泛,不利于项目的使用
优先级权重值1(最低的)

(3)id选择器

优势:优先级非常高,权重100
劣势:复用性差

(4)类选择器

优势:复用性高

(5)群组选择器

不限定选择器必须是同一个类型的

2.关系型选择器

(1)子代和后代

后代选择器需要在先代选择器后加空格链接后代选择器.
格式:祖先选择器后代选择器{}

(2)兄弟选择器和相邻兄弟选择器

格式:兄选择器~弟选择器{}
只能选中后面的兄弟,不能选中前面的兄弟
相邻兄弟的选择,指的是紧紧挨着的兄弟元素
相邻兄弟选择器:兄选择器+弟选择器

3.伪类选择器

css伪类是添加到选择器的关键字,指定元素的特殊状态

(1)鼠标悬停

:hover 当鼠标移入到元素的范围内时,叠加元素的样式

如果是触摸屏(不存在鼠标) :hover就会呈现不同的效果

/* 对元素的基础样式渲染(悬停前) */
 .box {
width: 150px; 
height: 50px; 
background-color: yellow; 
}

/* 再增加伪类，触发后的样式 （悬停后）*/ 
.box:hover { 
background-color: red; 
}

(2)点击激活

:active 鼠标按住元素不松开,就会处罚激活的伪类

.box:active {
 background-color: blue; 
}

(3) :link和 :visited

:link 伪类是用来选中元素未激活前(访问前)的链接样式

:visited 伪类用来选中元素激活后(访问后)的链接样式