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标签
<header class="header">头部</header>

// 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标签
<header id="header">头部</header>

// css
#header {
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
}

属性选择器

属性选择器是一种选择器，可以通过元素的属性及其属性值来选择元素。其属性可以是标准属性也可以是自定义属性，它们使用方括号语法来指定要匹配的属性和值。

<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul>

//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的属性，于是匹配了所有项。

<ul>
  <li class="a">Item 1</li>
  <li class="ab">Item 2</li>
  <li class="bca">Item 3</li>
  <li class="bcabc">Item 4</li>
</ul>

//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不一定是儿子，也可以是孙子）。

<a href="/">
    <img src="./images/logo.svg" alt="人间且慢行">
    <span>人间且慢行</span>
</a>

// css
a img {
    width: 100px;
    height: 100px;
}
a span {
    font-size: 14px;
    color: #f00
}

子元素选择器

和后代选择器类似，但是只能选择子标签。

使用大于号分割
只选亲儿子，不选孙子元素

<a href="/">
    <img src="./images/logo.svg" alt="人间且慢行">
    <span>人间且慢行</span>
</a>

// css
a>img {
    width: 100px;
    height: 100px;
}
a>span {
    font-size: 14px;
    color: #f00
}

相邻兄弟选择器

兄弟相邻选择器用于选取紧接在另一个元素后面的元素，且二者有共同的父元素

<h2>Vue</h2>
<h3>算法</h3>
<p>算法2</p>

//css

h2 + h3 + p{
    font-size: 20px
}

并集选择器

用于选择多组标签. (集体声明)。元素1，元素2 { 样式声明 }

通过逗号分割等多个元素.
表示同时选中元素 1 和元素 2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

<h2>Vue</h2>
<h3>算法</h3>
<p>算法2</p>

//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

<a href="">前端综合</a>

//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中的注释是使用 /* */ 来进行多行注释，不支持使用 //。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1{
				font-size: 16px;
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>你好</h1>
	</body>
</html>

行内样式（内联样式）

通过 style 属性, 来指定某个标签的样式（每个标签都可以有一个style属性，里面就可以写CSS,不必写选择器，只是针对当前元素生效），只适合于写简单样式，只针对某个标签生效。值得注意一点的是，这种写法优先级较高, 会覆盖其他的样式，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 style="font-size: 16px;color: blue;">你好</h1>
	</body>
</html>

外部样式

把CSS写到一个单独的 .css文件中，通过link标签引入到html中，这也是最常见的开发方式。（可以起到代码复用的作用，一个css文件被多个html使用。）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/base.css">  // 外部引入
	</head>
	<body>
		<h1 style="font-size: 16px;color: blue;">你好</h1>
	</body>
</html>

有兴趣了解更多的小伙伴可以关注我的公众号： codefuzi 我会持续更新前端相关知识点