css常见选择器
CSS是什么？
CSS,即层叠样式表 (Cascading Style Sheets)，能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
语法规范
选择器 { 一条/N条声明 } 如：
p{
color：#fff;
font-size: 12px;
...
}几种常见的选择器:
通用选择器（universal selector）
元素选择器（element selector）
类选择器（class selector）
ID选择器（id selector）
属性选择器（attribute selector）
后代选择器（descendant selector）
子元素选择器（child selector）
相邻兄弟选择器（adjacent sibling selector）相邻兄弟选择器
伪类选择器
通用选择器
使用 * 的定义, 选取所有的标签，选中页面中的所有元素，可以让页面中的所有元素都被选中，通常用于清除浏览器的默认样式（例如，段落的默认行间距，字体颜色，字体样式等）。
* {
border: 1px solid #333;
}元素选择器
元素选择器(标签选择器)就是通过元素名来给元素设置样式的, 能快速为同一类型的标签都选择出来，但是不能差异化选择。
ol, ul { list-style: none }
li { list-style: none }
caption, th { text-align: left }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }类选择器
这个选择是我们最常用的选择器，要使用类选择器就要在html元素中添加一个class选择器，并指定一个类名，最后在css中使用点号（.）加上类名，差异化表示不同的标签，可以让多个标签的都使用同一个标签
- 类名用 点 ’.‘ 开头的；
- 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)；
- 如果是长的类名, 可以使用 - 分割；
- 不要使用纯数字, 或者中文, 以及标签名来命名类名；
// HTML标签
头部
// css
.header {
width: 100%;
height: 80px;
background-color: #fff;
border-bottom: 1px solid #efefef;
}
ID选择器
ID选择器就是通过html元素ID属性来选择元素的一种选择器，通过元素ID来为这个元素添加特定的样式。和类选择器类似。
- CSS 中使用 # 开头表示 id 选择器
- id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素 id 不必带 #
- id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
// HTML标签
头部
// css
#header {
width: 100%;
height: 80px;
background-color: #fff;
border-bottom: 1px solid #efefef;
}
属性选择器
属性选择器是一种选择器，可以通过元素的属性及其属性值来选择元素。其属性可以是标准属性也可以是自定义属性，它们使用方括号语法来指定要匹配的属性和值。
- Item 1
- Item 2
- Item 3
- Item 4
//css
li[class] {
font-size: 200%;
}
li[class="a"] {
background-color: yellow;
}
li[class~="a"] {
color: red;
}子字符串匹配选择器
些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。
li[class^="a"]匹配了任何值开头为a的属性，于是匹配了前两项。li[class$="a"]匹配了任何值结尾为a的属性，于是匹配了第一和第三项。li[class*="a"]匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。
- Item 1
- Item 2
- Item 3
- Item 4
//css
li[class^="a"] {
font-size: 200%;
}
li[class$="a"] {
background-color: yellow;
}
li[class*="a"] {
color: red;
}HTML 中是大小写敏感的
后代选择器
CSS后代选择器用于选择某个元素的所有后代元素（其中的元素1，元素2可以是标签选择器，也可以是类选择器，亦或是id选择器）。
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级（元素2不一定是儿子，也可以是孙子）。
人间且慢行
// css
a img {
width: 100px;
height: 100px;
}
a span {
font-size: 14px;
color: #f00
}子元素选择器
和后代选择器类似，但是只能选择子标签。
- 使用大于号分割
- 只选亲儿子，不选孙子元素
人间且慢行
// css
a>img {
width: 100px;
height: 100px;
}
a>span {
font-size: 14px;
color: #f00
}相邻兄弟选择器
兄弟相邻选择器用于选取紧接在另一个元素后面的元素，且二者有共同的父元素
Vue
算法
算法2
//css
h2 + h3 + p{
font-size: 20px
}并集选择器
用于选择多组标签. (集体声明)。元素1，元素2 { 样式声明 }
- 通过 逗号 分割等多个元素.
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
Vue
算法
算法2
//css
h2 , h3 , p{
font-size: 20px
}伪类选择器
伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。
:hover 选择鼠标指针悬停上的链接
:first-child{}
:last-child{}
:nth-child(n){}
:first-of-type{}
:last-of-type{}
:nth-of-type(n){},(n为具体数字)
:not(){}
:active
before
前端综合
//css
a:hover{
font-size: 14px;
color: red;
}引入方式
内部样式
写在style标签中，嵌入到html内部，理论来说,style标签放哪都行，但是建议放在head标签中。
优点：这样做能够让样式和页面结构分离，
缺点：分离的不够彻底，尤其是css内容多的时候。
驼峰命名，fontSize (Java,JS)
蛇形命名，font_size (C,C++,Python)
脊柱命名，font-size(CSS)
tip2：CSS中的注释是使用 /* */ 来进行多行注释，不支持使用 //。
你好
行内样式（内联样式）
通过 style 属性, 来指定某个标签的样式（每个标签都可以有一个style属性，里面就可以写CSS,不必写选择器，只是针对当前元素生效），只适合于写简单样式， 只针对某个标签生效。 值得注意一点的是，这种写法优先级较高, 会覆盖其他的样式，
你好
外部样式
把CSS写到一个单独的 .css文件 中，通过link标签引入到html中，这也是最常见的开发方式。（可以起到代码复用的作用，一个css文件被多个html使用。）
你好
有兴趣了解更多的小伙伴可以关注我的公众号： codefuzi 我会持续更新前端相关知识点