摘要：选择器选择器，说白了就是的标签或者其相关特性，在一个页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从页面中查找特定元素的，找到元素之后就可以为它们设置样式了。
选择器，说白了就是html的标签或者其相关特性，在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围
基本选择器包含以下选择器：
标签选择器说白了就是html的标签元素，就像前面说的h1-h6，p，div，form，ul，ol，li，a等等的，这些都可以是标签选择器
注意：，也可以作为标签选择器
这个选择器很常用，也很重要。先说说什么是类，这样，还是打开百度首页来讲解
左边我圈出来的class = s_ipt就是input的一个类属性，右边的css就是由类选择器控制的，这样就可以很好的找到此特有的标签
注意：
ID选择器和类选择器很类似
还是百度这个例子
我圈出来的这个 id=‘kw’ 就是id选择器，右边的#kw就是其id选择器的css样式
注意：
通用选择器的就一个，用【*】代替，例：
* { color: black; }
* 号相信稍微是个爱研究的人都见过，在windows系统里表示通配符，可以代替一切的字符，在IT它也是这么个用法，可以表示一切字符，那么这里的自然表示所有的标签
组合选择器就是比较高级的用法，有时候我们可能只运用上面的基本选择器不是很方便，那么就可以用组合选择器
组合选择器包含有：
- 高级选择器
- 子集选择器
- 后代选择器
- 相邻选择器
说这个之前，我希望您有这种思想，把html结构想成一颗大树，树上有很多的枝叶，每个枝里又有很多小枝，这样的话你可能会更好理解下面的，对以后的理论也更好理解
好的，接正文，子代选择器即就是选择此元素的直系子代，例：
div > p{
font-size:15px;
}
以上例子就是选择div里的直系子代里的p标签
后台选择器和前面的子代选择器有些类似，不过后代是包含子代在内的所有子子孙孙标签
例：
div p{
font-size:15px;
}
以上表示选取div下的所有p标签，不管是不是直系子代
相邻选择器有两个，一个是前者（哥哥），一个后者（弟弟）
前者，用+：
div+p {
color: red;
}
后者，用~：
div~p {
color: red;
}
高级选择器里包含有并集，交集
并集，用逗号连接：
div,p,a{
color:red;
}
交集，直接连接，中间没有空格：
交集用个完整的html来讲解，可能大家才更好理解
高级选择器
test1
test2
test3
test4
测试结果：
属性选择器的特点就是可以很好的定位到人为定义的属性，而不是已经有的属性，比如给html文件加一个特殊标识，用属性选择器立马就可以取到，并进行调整样式
属性选择器如果细分的话，有两种，一个是属性选择器，一个是属性-值选择器
属性选择
test1
注意：属性选择器的语法是 [……]
而属性选择器最常用的就是表单：
input[type="text"] {
backgroundcolor: red;
}
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式
其实这个分组选择就是前面高级选择器里的并集选择器，为什么它又叫分组选择器，就是因为很重要啦
h1,h2 {
color: red;
}
伪类的意思就本来不存在的类，但是其又可以用
这个最常用的是对a和input标签的选取
伪类选择器有：
:link
:active
:visited
:hover
:focus
表示没有访问的链接
a:link {
color: blue;
}
表示鼠标点击瞬间
a:active {
color: black;
}
表示访问过，点击过的链接
a:visited {
color: gray;
}
表示光标放上去但还未点击的状态
p:hover {
cursor:pointer;
background-color: #eee;
}
input输入框获取焦点时（即正处于在输入框输入内容时）样式
input:focus {
background-color: #eee;
}
以上最常用的就是：hover
伪元素的概念和伪类很像，意思就是本来不存在的，但是又可以直接是用的
伪元素有：
- first-leter
- before
- after
用于为文本的首字母设置特殊样式，说白了就是那种文章首字母大写的效果
p:first-letter {
font-size: 48px;
}
用于在元素的内容前面插入新内容
p:before {
content: "*"; /*在所有p标签的内容前面加上一个红色的**/
color: red;
}
用于在元素的内容后面插入新内容
p:after {
content: "?"; /*在所有p标签的内容后面加上一个蓝色的?*/
color: red;
}
学完以上的各种各样的选择器，那么当然以上的各种选择器是可以混用的，那么混用的话，就会存在一个问题，假如各种混用的选择器刚好都对同一个元素选中并设置不同的样式，这种的话，到底会显示什么样呢？
这个问题也当然不是问题，因为每个选择器都有优先级（又叫权重）的，优先级高就选择谁
各种选择器的优先级：
权重总结：
1.先看标签是否被选中，如果选中，就数id选择器和类选择器，标签选择的权重，最后谁的权重大就显示谁的，如果权重一样大，后者覆盖前者
2.如果没有选中，权重为0，如果权重都是由父级继承而来，且权重都是0，遵循就近原则，谁描述的近就显示谁
3.！import权重最大
4.css多层嵌套，内层元素会继承外层元素的css样式
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1551.html
摘要：前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。你可以从谷歌的博客中了解更多相关信息。令我惊讶的是，谷歌所有地方在非常简单的页面上都没有搜索栏。快速发布预览零配置打包工具。快速启动新的工具。 Web 前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。 本期刊专注于 Web 前端前沿技术，收集的内容来自国外各大前端技术周刊，这里把值得...
摘要：前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。你可以从谷歌的博客中了解更多相关信息。令我惊讶的是，谷歌所有地方在非常简单的页面上都没有搜索栏。快速发布预览零配置打包工具。快速启动新的工具。 Web 前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。 本期刊专注于 Web 前端前沿技术，收集的内容来自国外各大前端技术周刊，这里把值得...
摘要：前端开发规范文档规范目的使开发流程更加规范化。中的非注释类中文字符须转换成编码使用，以避免编码错误时乱码显示。文件规范文件名用英文单词，多个单词用驼峰命名法。书写规范命名规范。图片规范命名应用小写英文数字组合，便于团队其他成员理解。 Web前端开发规范文档 规范目的： 使开发流程更加规范化。 通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键...
摘要：前端开发规范文档规范目的使开发流程更加规范化。中的非注释类中文字符须转换成编码使用，以避免编码错误时乱码显示。文件规范文件名用英文单词，多个单词用驼峰命名法。书写规范命名规范。图片规范命名应用小写英文数字组合，便于团队其他成员理解。 Web前端开发规范文档 规范目的： 使开发流程更加规范化。 通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键...
摘要：默认值，没有定位，元素出现在正常的文档流中。生成粘性定位的元素，容器的位置根据正常文档流计算得出。和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。 position的值， relative和absolute分别是相对于谁进行定位的？ 、relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。、absolute:生成绝对定位，相对于最近一...
阅读 681·2023-04-25 19:43
阅读 3853·2021-11-30 14:52
阅读 3725·2021-11-30 14:52
阅读 3793·2021-11-29 11:00
阅读 3745·2021-11-29 11:00
阅读 3810·2021-11-29 11:00
阅读 3528·2021-11-29 11:00
阅读 6007·2021-11-29 11:00
