CSS选择器 - 《HTML CSS基础学习笔记》

选择器的分类
选择器优先级
CSS权重

CSS是如何装饰html的呢？答案是通过选择器。

选择器的分类

1. id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/index.css" type="text/css">
</head>
<body>
    <div id="only1"></div>
</body>
</html>

#only1{
    width: 100px;
    height: 100px;
    background-color: red;
}

现在我们要给div添加一些样式，那么css代码是如何找到这个div的呢？方式有很多种，第一种叫id选择器。
首先给div添加一个id属性(注：id是身份证的意思，一个元素只能有一个id值。id属性的属性值必须是唯一的，不可重复的) <div id="only1"></div>
然后在CSS文件中写上 # + id值，即——> #only1{ }，这样就找到了这个div标签。我们可以在花括号里面添加我们想要的样式

2. class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/index.css" type="text/css">
</head>
<body>
    <div class="demo"></div>
    <div class="demo"></div>
</body>
</html>

.demo{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 10px;
}

显示效果

第二种选择器叫做class选择器，也是最常用的一种。给我们想要添加样式的元素加上一个class属性
<div class="demo"></div> ，然后在CSS文件中通过 . + 类名的方式例如 .demo，这样就可以了。
class选择器跟id选择器一样的是，id选择器是一对一的关系， class是多对多的关系。一个class可以写在多个元素上面，如上例子所示。.demo里面的CSS样式就会加载到有同样class的元素身上。

一个元素也可以有多个class,例如 <div class="demo1 demo2"></demo> , 当我们写.demo1 .demo2两个样式的时候，就会同时修饰到这个div元素身上

3. 标签选择器

<div></div> ,有时候元素没什么功能，就不需要写什么属性了。我们想给它加样式的时候直接写标签名就OK.
所有的div都会加载这个CSS样式

div{
    width: 100px;
    height: 100px;
    background-color: red;
}

4. 通配符选择器

*{
  margin:0;
  padding:0;
}

通配符选择器的写法就是一个 * 号，所有标签都会加载这个样式

5. 属性选择器

[id=only]{
  margin:0;
  padding:0;
}

6. 伪类选择器

<a>/<a>
a:hover{}

7. 伪元素选择器

一个标签在诞生的时候，在逻辑的前面和后面就存在伪元素了，只不过我们看不到他们。一个是before, 一个是after. 我们要选中他们，可以用元素::before 或者元素:: after

div::after{
  content:""；/*coententyong'y
}

div::before{
}

选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/index.css" type="text/css">
</head>
<body>
    <div id="only" class="demo" style="background-color: yellow;">123</div>
</body>
</html>

#only{
    background-color: red;
}

.demo{
    background-color: green;
}

div{
    background-color: blue;
}

*{
    background-color: white;
}

现在有这种情况如上所示，行间样式外部样式#only, .demo div * 都能修改div元素的样式，那么到底div听谁的。谁的优先级是最高的？答案是：
行间样式 > id选择器 > class选择器=属性选择器=伪类选择器 > 标签选择器 > 通配符选择器

但是如我我们给 div { background-color : blue !important} 的后面加上 !important。那么他的优先级就是最高的。!important是加载单个属性上的

CSS权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/index.css" type="text/css">
</head>
<body>
    <div id="only" class="demo">
        <p id="idP" class="classP">123</p>
    </div>
</body>
</html>

#only p{
    background-color: red;
}

.demo .classP{
    background-color: green;
}

现在有一种情况如上所示？CSS文件中的两个选择器都能够绑定 <p></p> ，那么到底用哪个样式呢>

系统比较选择器的优先级的其实是拿权重来比较的，权重值是下表。

选择器	权重
!important	Infinity
行间样式	1000
id	100
class \| 属性 \| 伪类	10
标签 \| 伪元素	1
通配符	0

注意：CSS权重是256禁制， Infinity表示是无穷大的意思，但是在计算机中Infinity是一个固定值，也就是说Infinity+1 > Infinity.

知道权重值之后，上面的代码就一目了然了。第一种#only p的权重是100+1，第二中.demo .classP的权重是10+10, 101 > 20, 所以肯定用的第一种