CSS学习笔记（一）——选择器归类整理+CSS优先级要点_整理选择器知识,学会使用常用的选择器,选择器分类-CSDN博客

本文链接：https://blog.csdn.net/sinat_35129548/article/details/87989881

这篇博客详细介绍了CSS3选择器的分类，包括基本选择器、层次选择器、动态伪类选择器等，以及CSS的三大特性：继承性、层叠性和优先级。通过实例解析了各种选择器的使用方法，强调了优先级计算规则和特殊情况处理，为CSS样式设置提供了清晰的指导。

摘要由CSDN通过智能技术生成

CSS选择器整理+CSS优先级

一、CSS3选择器分类
二、CSS三大特性

一、CSS3选择器分类

CSS3选择器分类如下图所示：
CSS3选择器分类图

（一）基本选择器

基本选择器有通配选择器，元素选择器，ID选择器，类选择器和群组选择器五种。

1、通配选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
如下面的规则可以使文档中的每个元素都变为红色。

*{color:red;}

2、元素选择器

选择指定类型的HTML元素为它设置样式。

p {color:red;}

3、ID选择器

选择ID属性为指定id值的任意类型元素为其设置样式。
如下面的样式

#intro {color:red;}

就会被下面的元素使用并显示

<p id="intro">段落1</p>

4、类选择器

选择class属性为指定class属性值的元素进行样式设置。
如样式

.intro {color:red;}

将会被元素使用：

<p class="intro">段落1</p>

5、群组选择器

用逗号将多个选择器匹配到的元素合并来设置样式，有的会把它称为并集选择器。
如：

.intro,p,#intro1 {color:red;}

（二）层次选择器

其中包括四种选择器：后代选择器（包含选择器）、子选择器、相邻兄弟选择器、通用选择器。

1、后代选择器（包含选择器）

后代选择器可以选择作为某元素后代的元素。
可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用，实现根据上下文结构选择元素。
语法结构：
元素E 元素F {属性名:属性值;}
该选择器会选择匹配被包含在匹配的E元素内的F元素，进行响应样式的设置。
如

div p {color:red;}

上面这个规则只会把作为div元素后代的p元素文本字体变红。

语法解释：
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。
空格前后的元素还可以使用交集选择器与其他选择器相交合并进行选择匹配。
如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div#sidebar {
    background-color:blue;}
div#maincontent {
    background-color:white;}
div#sidebar a.sidebar{
    background-color:white;}
div#maincontent a.maincontent {
    background-color:red;}
</style>
</head>
<body>
<div id="sidebar">
	<a class="sidebar" href="//www.baidu.com" target="_blank">div_sidebar</a>
	<br/>
	<a href="//www.baidu.com" target="_blank">div</a>
</div>
<div id="maincontent">
	<a class="maincontent" href="//www.baidu.com" target="_blank">div_maincontent</a><br/>
	<a href="//www.baidu.com" target="_blank"