【前端CSS基础之常见选择器】

犇犇犇犇犇犇

已于 2022-10-31 11:32:21 修改

阅读量190

点赞数

分类专栏： Java学习文章标签：前端 css html

于 2022-10-31 11:31:04 首次发布

本文链接：https://blog.csdn.net/qq_57681480/article/details/127612273

版权

Java学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

CSS基础1.0

什么是CSS

层叠样式表 (Cascading Style Sheets).
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结
构分离.

基本语法规范

选择器+{一条或多条声明}

选择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥)
声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.

<body>
    <style>
        div{
            color: red;
            font-size: 200px;
        }
    </style>
    <div>
        你好css
    </div>
</body>

注意：

style 标签可以放到页面任意位置. 一般放到 head 标签内.

css只支持/* */这种注释方式

引入方式

内部样式

直接在html内部使用，用style标签声明。

<body>
    <style>
        div{
            color: red;
            font-size: 100px;
        }
    </style>
    <div>柯南</div>
</body>

内联样式

使用style属性，每个标签都有style属性，里面可以直接使用css不必写选择器，只对当前元素生效。

<div style="color: green;">
    你好css
</div>

外部样式

实际开发中最常用的方式.

创建一个 css 文件.
使用 link 标签引入 css(注意一定要引用)

<link rel="stylesheet" href="#">/*格式*/

创建一个style.css文件

div{
    color: blue;
    font-size: 100px;
}

使用link标签引入style.css

<link rel="stylesheet" href="style.css">

CSS基础选择器

1.标签选择器

用一个标签名，作用于当前页面的所有该标签。

<body>
    <style>
        div{
            color: red;
            font-size: 50px;
        }
        p{
            color: green;
            font-size: 100px;
        }
    </style>
    <div>柯南</div>
    <div>柯南</div>
    <div>柯南</div>
    <p>基德</p>
    <p>基德</p>
    <p>基德</p>
</body>

2.类选择器

可以让样式差异化

以.开头的表示一个css的类名，从而使对应的样式针对对应的元素生效。允许多个元素引用同一个类。

<body>
    <style>
        .one{
            color: red;
            font-size: 20px;
        }
        .two{
            color: green;
            font-size: 40px;
        }
        .three{
            color: black;
            font-size: 60px;
        }
    </style>
    <div class="one">柯南</div>
    <div class="one">基德</div>
    <div class="two">柯南</div>
    <div class="two">基德</div>
    <div class="three">柯南</div>
    <div class="three">基德</div>
</body>

3.id选择器

每个元素都有一个id属性，且值在页面中是唯一的，使用id选择器来选中到对应的元素上。

<body>
    <style>
        #dete{
            color: yellow;
            font-size: 50px;
        }
    </style>
    <div id="dete">柯南</div>
</body>

注意：

CSS中使用#开头表示id选择器

id 选择器的值和 html 中某个元素的 id 值相同

html 的元素 id 不必带 #

id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

4.通配符选择器

选中页面的中所有元素，通常用于干掉浏览器的默认样式，以*表示

<body>
    <style>
        *{
            color: red;
        }
    </style>
    <div>柯南</div>
    <p>柯南</p>
    <span>柯南</span>
</body>

CSS复合选择器

1.后代选择器

标签A内的标签B,B就是A的后代，B标签内还可以有后代，后代选择器可以和任意基础选择器搭配使用。

<body>
    <style>
        ul li{
            color: red;
            font-size: 20px;
        }
        /* ul li div{
            color: blue;
            font-size: 30px;
        这种写法和下面的效果一样
        } */
        ul div{
            color: blue;
            font-size: 30px;
        }
        .by li{
            color: red;
            font-size: 20px;
        }
    </style>
    <ul>
        <li>
            <div>柯南</div>
        </li>
        <li>柯南</li>
        <li>柯南</li>
        <li>柯南</li>
    </ul>
    <ul class="by">
        <li>
            <div>柯南</div>
        </li>
        <li>柯南</li>
        <li>柯南</li>
        <li>柯南</li>
    </ul>
    <ol>
        <li>柯南</li>
        <li>柯南</li>
        <li>柯南</li>
    </ol>
</body>

2.子选择器

和后代选择器类似但是只选亲儿子，不选孙子，使用>连接

<body>
    <style>
        ul>li{
            color: red;
            font-size: 40px;
        }
    </style>
    <ul>
        <li>柯南</li>
        <li>柯南</li>
        <li>柯南</li>
        <div>
            <li>柯南</li>
        </div>
    </ul>
</body>

如果是后代选择器，div里面的那个柯南也会被选中

3.并集选择器

用于选择多组标签，用,分隔

<body>
    <style>
        div,p{
            color: red;
            font-size: 20px;
        }
    </style>
    <div>柯南</div>
    <p>基德</p>
</body>

4.伪类选择器

选中元素的不同状态，就可以设置不同状态的样式了，主要讲解两种状态。

hover：鼠标选中的状态
active：鼠标点击的状态

<body>
    <style>
        div:hover{
            color: red;
            font-size: 40px;
        }
        div:active{
            color: blue;
            font-size: 80px;
        }
    </style>
    <div>柯南</div>
</body>