CSS基础 - 技术栈

一、CSS基本选择器

基本选择器又可以分为一下几类:

通配符选择器
标签选择器
类选择器
id选择器
属性选择器

1. 通配符选择器

使用*表示通配符选择器，用来表示所有的标签。
下面展示一些 `内联代码片`。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            color:blue;
        }
    </style>
</head>
<body>
<span>我是内容</span>
<p>我是一个p</p>
<div>我是一个div</div>
</body>
</html>

2. 标签选择器

可以使用标签名来控制页面上的标签。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color:red;
        }
    </style>
</head>
<body>
<span>我是span里的内容</span>
<p>我是一个p</p>
<p>我也是一个p</p>
</body>
</html>

3. 类选择器

使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 使用 .类名 的形式找到对应类的标签，对同一类的标签设置同样的样式 */
        .chinese {
            color:red;
        }
        .english {
            color:blue;
        }
        .number{
            color:green;
        }
    </style>
</head>
<body>
<!-- 先把所有的标签按照特点进行分类 -->
<p class="chinese">我是中文</p>
<p class="english">I am English</p>
<p class="number">45</p>
<p class="english">hello</p>
<p class="number">100</p>
<p class="chinese">你好</p>
 
</body>
</html>

4. id选择器

给指定的元素指定全文档唯一的id,然后通过id找到这个元素，给这个元素设置样式。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 使用 #id名 的形式，给指定的元素设置样式 */
        #three{
            color:red;
        }
    </style>
</head>
<body>
<p>我是第一个p</p>
<p>我是第二个p</p>
<!-- 先给指定的标签设置 id 属性，注意 id 对应的值在全文档里应该是唯一的，不能重复 -->
<p id="three">我是第三个p</p>
<p>我是第四个p</p>
</body>
</html>

5. 属性选择器

可以根据属性值的不同，给特定的标签设置样式。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 找到所有设置了title属性的p标签 */
        p[title]{
            color:red;
        }
          /* 找到所有title值为yes的span标签 */
        span[title="yes"]{
            color:blue;
        }
    </style>
</head>
<body>
<p title="hi-you">我是一个p,我设置了title属性</p>
<p>我也是一个p,我没有设置任何属性</p>
<span title="yes">我也是一个span,我的title属性值为yes</span>
<p title="hi">我是一个div,我的title属性值为hi</p>
</body>
</html>

二、CSS组合选择器

组合选择器就是使用多个基本选择器进行组合，从而达到更加精准的找到指定元素的目的。常见的组合选择器有一下几种:

并集选择器
交集选择器
后代选择器
子元素选择器
相邻兄弟选择器
通用兄弟选择器
伪类选择器

1. 并集选择器

多个选择器之间使用逗号,进行分隔，表示给这多个选择器对应的元素设置样式。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 找到p标签和类名为number的标签 */
        p,.number{
            color:red;
        }
    </style>
</head>
<body>
<p>我是一个p</p>
<span class="number">45</span>
<div class="number">100</div>
<span>我是一个普通的span</span>
</body>
</html>

2. 交集选择器

多个选择器写在一起，可以找到同时满足所有条件的标签。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 找到即是span，同时类名又是number的标签 */
        span.number{
            color:blue;
        }
    </style>
</head>
<body>
<p>我是一个p</p>
<span class="number">45</span>
<div class="number">100</div>
<span>我是一个普通的span</span>
</body>
</html>

3. 后代选择器

选择器之间使用空格进行分隔，表示后代选择器。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 无论是father类的直接p子标签，还是father类里子标签里的p子标签，都会被找到 */
        .father p{
            color:blue;
        }
    </style>
</head>
<body>
<div class="father">
    <p>我是father里的p</p>
    <div class="son">
        <p>我是son里的p</p>
    </div>
</div>
<p>我是father外面，和father同级的p</p>
</body>
</html>

4. 子元素选择器

选择器之间使用大于号>连接，表示直接子元素选择器。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 只有father类里的直接子标签会被选中 */
        .father>p{
            color:red;
        }
    </style>
</head>
<body>
<div class="father">
    <p>我是father里的p</p>
    <div class="son">
        <p>我是son里的p</p>
    </div>
</div>
<p>我是father外面，和father同级的p</p>
</body>
</html>

5. 相邻兄弟选择器

多个选择器之间使用加号+连接，表示下一个相邻的兄弟元素选择器。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 与number类同级并且相邻的下一个span选择器 */
        .number+span{
            color:blue;
        }
    </style>
</head>
<body>
	<div class="number">234</div>
	<span>我是span</span>
	<p>我是p</p>
	<div class="number">456</div>
	<p>我也是一个p</p>
	<span>我也是一个span</span>
</body>
</html>

7.伪类选择器

伪类选择器一般用于a标签的不同状态。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          /* 设置a标签默认情况下的样式 */
        a {
            background-color:green;
        }
          /* 设置当鼠标悬停在a标签上时的样式 */
        a:hover{
            background-color:pink;
        }
          /* 设置当用户按下按钮时a标签的样式 */
        a:active{
            background-color:yellow;
        }
          /* 设置当a标签的链接被访问后的样式 */
        a:visited{
            background-color:purple;
        }
    </style>
</head>
<body>
	<a href="https://www.baidu.com">百度</a>
</body>
</html>