CSS引入-CSS选择器

梁同学(的前端笔记)

已于 2022-10-27 09:30:17 修改

阅读量177

点赞数

文章标签： css html css3

于 2022-10-25 16:34:21 首次发布

本文链接：https://blog.csdn.net/qq_50936276/article/details/127515909

版权

CSS

在HTML基础中写了一个表单
在这里插入图片描述

可以看到非常丑，除了文字就是条条框框，用户看到这样的网页无疑是不愿意多看一眼的，因此为了优化用户体验，引入了页面的美化CSS

CSS基础

CSS： Cascading Style Sheets ，层叠样式表

样式：元素的美化

层叠：一个元素可以有多种样式值叠放

表：元素的样式的集合

1 引入CSS的三种方式

行内样式：通过style属性编写，每个样式用分号间隔

<div style="width:200px;height:200px;background-color: red;">块级元素box</div>

内部样式：在head标签内添加style标签

<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>
        /* CSS的注释*/
        /*
        div:选中的元素，样式用花括号包含
        */
        div {
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>

</head>
 
<body>
<div>块级元素box</div>
</body>

外部样式

在同级目录下新建css文件夹，在该文件夹下创建box.css

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

html文件在head标签中引入css

<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>

    <!--用link标签引入  ref:代表样式表， href：样式文件的路径-->
    <link rel="stylesheet" href="./css/box.css">

</head>
 
<body>
	<div>块级元素box</div>
</body>

上面三种方式都会实现这样的效果
在这里插入图片描述

2 CSS选择器

在1.1 中，给div元素添加了样式，但是这样每个div元素都会有同样的属性，这是不合适的，CSS选择器可以帮助开发人员选择特定的元素并给其赋予特定的属性。

2.1 标签选择器

上面的div就是标签选择器

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

2.2 类选择器

<style>
    /*css中的样式定义：用小数点开头接类名*/
        .box {
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>

<!--语法：class="类名"-->
<div class="box">块级元素box</div>

2.3 id选择器

一般用于特殊元素上

<style>
    /*css中的样式定义：用#开头接id名*/
        #box {
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>

<!--语法：id="id名"-->
<div id="box">块级元素box</div>

2.4 复合选择器

拥有相同样式的元素可以用复合选择器

<style>
    /*css中的样式定义：用逗号隔开选择器名*/
        #box1,#box2,.box3,h1 {
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>

2.5 子代选择器

在这里插入图片描述

如图，红色盒子就是就是父元素，绿色就是子元素

语法：两种写法

selector1>selector2
selector1 selector2

<style>
        #box {
            width:200px;
            height:200px;
            background-color: red;
        }
        #box>div {
            width:100px;
            height:100px;
            background-color: green ;
        }
        
    </style>
<div id="box">
    box1
    <div class="box2">box2</div>
</div>

2.6 下一个兄弟选择器

同级别元素下该元素的下一个元素

语法：selector1+selector2

<style>
        #box {
            width:200px;
            height:200px;
            background-color: red;
        }
        #box+div {
            width:100px;
            height:100px;
            background-color: green ;
        }
        
    </style>
<div id="box">box1</div>
<div>box2</div>

2.7 所有子代选择器

语法：selector1~selector2：selecctor下所有的selector2

2.8 伪类选择器

语法：selector:selector2

#box div {
            width:100px;
            height:100px;
        } 
/* 表示#box下的子元素div*/
#box div:nth-child(n){
            background-color: green ;
        }

子代伪类选择器：

:first-child：第一个子元素
:last-child：最后一个子元素
:nth-child(x)：第x个子元素
- x=n：全部子元素
- x=2n ：所有偶数个子元素
- x=3n：3的倍数个子元素
- x=2n+1：所有奇数个子元素
- x=n+x：从第x个开始的子元素
- x=(-n+x)：前X个子元素

a标签伪类选择器：