CSS选择器入门学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_42442856/article/details/120408434

文章目录

前言

一、CSS是什么？

二、CSS基本选择器

1.类选择器

2.id选择器

3.标签选择器

4.通配符选择器

代码展示：

三、CSS复合选择器

1.后代选择器

2.子选择器

3.并集选择器

4.链接伪类选择器

5.focus伪类选择器

总结

前言

css样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。

一、CSS是什么？

CSS是层叠样式表，也称CSS样式表，是一种标记语言。其基本语法结构是这样的：

选择器{属性：属性值}

二、CSS基本选择器

1.类选择器

类选择器的作用是差异化选择不同标签，可单独使用，也可与其他选择器组合使用，使用类选择器需要在HTML元素上定义类名。

2.id选择器

id选择器与类选择器相似，也是需要在HTML标签元素上定义标签名字，id选择器可以指定特定样式以"#"定义。值得注意的是，只能调用一次。

3.标签选择器

标签选择器是指用HTML标签名作为选择器，按标签名分类，为页面某一类标签指定同意的CSS样式，标签选择器能快速为页面同一标签设计样式，但不能差异化样式。

4.通配符选择器

以*定义，表示选取页面所有元素（标签），通常用作清除网页边距。

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 使用通配符选择器清除内外边距 */
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            color: aqua;
        }
        
        #aidi {
            color: red;
        }
        
        .lei {
            color: blue;
        }
    </style>
</head>

<body>
    <p>我是标签选择器</p>
    <p class="lei">我是类选择器</p>
    <p id="aidi">我是id选择器</p>
</body>

</html>

三、CSS复合选择器

1.后代选择器

        又称包含选择器，写法是把外层标签写在前面，内层标签写在里面，空格分隔。

        元素1是父级，元素2是子级，最终选择的是元素为2。

        元素2是儿子，也可以是孙子等，只要是元素1的后代。

        元素为1和元素2可以是任意选择器。

举例来说，如果只想对div中的h1改变颜色，可以这样设置：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div h1 {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <h1>我是第一行</h1>
    </div>
    <h1>我是第二行</h1>
</body>

</html>

2.子选择器

        只能选择作为某元素最近一级子元素
        语法：元素1 > 元素2
        元素1和元素2之间用大于号>分开

        元素1是父级，元素2是子级，最终选择的是元素2

        元素2必须是亲儿子

以下代码是通过子选择器选择“我是第二行”更改颜色为蓝色：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .b>h1 {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="a">
        <h1>我是第一行</h1>
    </div>
    <div class="b">
        <h1>我是第二行</h1>
    </div>

</body>

</html>

3.并集选择器

可以选择多组标签，同时为他们定义相同的样式。通过英文逗号,连接而成

4.链接伪类选择器

选择不同状态的链接，

a {
     color: black;
     text-decoration: none;
  }
        
a:hover {
            color: palevioletred;
        }

5.focus伪类选择器

获取光标的表单，焦点就是光标，一般情况下是<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来使用

input:focus {
            background-color: blueviolet;
        }