开发工程师必备————【Day18】CSS选择器详细知识介绍

皮糖小王子

已于 2022-08-24 18:29:33 修改

阅读量252

点赞数

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

于 2022-08-23 23:46:44 首次发布

本文链接：https://blog.csdn.net/DiligentGG/article/details/126493016

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今日内容概要

表单标签知识补充
CSS层叠样式表

表单知识补充

1.获取用户输入的标签两大重要的属性
form表单再朝后端发送数据的时候标签必须要有name，否则不会发送改标签的值

name属性

类似于字典的键

value属性

类似于字典的值

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
/head>
<body>
<form action="">
   <p>username:
<!--label标签添加后代码不会飘黄，for可以与id相关联-->
       <label for="d1">usernme
            <input type="text" name="username" value="jason" id="d1">
       </label>
   </p>
   <p>password:
   <input type="text" name="password" value="123">
   </p>
</form>
</body>
</html>

2.获取用户输入的input标签理论上需要有label配合使用
<label for="某个input标签的id值"></label>

3.获取用户输入的input标签也可以添加背景提示
加一个placeholder；
<input type="text" name="password" placeholder="密码">

4.获取用户输入的标签如果不是让用户自己写而是选择那么标签需要自己写value
用户填写男则发给后端为value值male；
<input type="radio" name="gender" value="male">男
用户填写篮球则发给后端为value值basketball；
<input type="checkbox" name="hobby" value="basketball">篮球

下拉框：
填写上海则发给后端value值sh；
<select name="province" id="">
     <option value="sh">上海</option>
</select>
文件与日期不需要加value值，他会自动将值发给后端！！！

5.针对radio和checkbox可以默认选中
checked=“checked” 如果属性名和属性值相等那么可以简写 checked
<input type="radio" name="gender" value="male" checked="checked">男

简写格式：
<input type="radio" name="gender" value="male" checked>男

6.针对option标签也可以默认选中
selected=“selected” 简写为 selected

下拉框：
<select name="province" id="">
    <option value="sh" selected="selected">上海</option>
</select>

简写格式：
<select name="province" id="">
    <option value="sh" selected>上海</option>
</select>>```

CSS层叠样式表

1.作用

调整标签样式

2.语法结构

选择器 {
    属性名1:属性值1;
   	属性名2:属性值2;
}

请添加图片描述

3.注释语法
注释是代码之母。
/*注释内容*/  

4.三种编写CSS的方式
（1）head中style标签内部直接编写(学习阶段使用方便)
<style>
       h1{
           color: deeppink;
       }
</style>
（2）head中link标签引入外部css文件(最正规)
<link rel="stylesheet" href="02.css">
（3）直接在标签内部通过style属性编写(不推荐)
<h1 style="color: yellow">可真凉快</h1>

CSS基本选择器

1.标签选择器

/*1.标签选择器:直接编写标签名来查找标签*/
div {  
   color: green;  /*查找所有的div标签 并将内部的文本颜色变为绿色*/
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
   <style>
       div{
           color: green;
       }
</style>
</head>
<body>
   <div id="">div</div>
   <p class="c1">p</p>
   <span>span</span>
   <div class="c1">dov</div>
</body>
</html>

2.类选择器

/*2.类选择器:通过编写class的值来查找标签*/
.c1 {
    color:red;  /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   .c1{
       color: rebeccapurple;
   }
   </style>
</head>
<body>
   <div id="">div</div>
   <p class="c1">p</p>
   <span>span</span>
   <div class="c1">dov</div>
</body>
</html>

3.id选择器

/*3.id选择器:通过编写id的值来精准查找标签*/
#d1 {
    color: aquamarine;  /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   #d1{
       color: aquamarine;
   }
   </style>
</head>
<body>
   <div id="d1">div
       <span>span</span>
   </div>
   <p class="c1">p</p>
   <span>span</span>
   <div class="c1">dov</div>
</body>
</html>

4.通用选择器

/*4.通用选择器:查找所有的标签*/
* {
   color: blue;  /*查找所有的标签 并将内部的文本颜色改为蓝色*/
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   *{
       color: blue;
   }
   </style>
</head>
<body>
   <div id="d1">div
       <span>span</span>
   </div>
   <p class="c1">p</p>
   <span>span</span>
   <div class="c1">dov</div>
</body>
</html>

CSS组合选择器

1.标签之间的关系

<p></p>    # div的哥哥标签
<div>
    <p>   #div的字标签
       <span></span>   # div的孙子标签
    </p>
</div>
<p></p>   # div的弟弟标签

2.后代选择器

/*查找div标签内部所有的span(后代)*/
/*1.后代选择器: 两个选择器之间空格隔开;
查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/

#d1 span {
   color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #d1 span{
           color: red;
       }
   </style>
</head>
<body>
   <div id="d1">div
      <p>div里面的p
           <span>div里面的p里面的span</span>
       </p>
       <span>div里面的span</span>
   </div>
   <span>div下面的span</span>
   <span>div下面的span</span>
</body>
</html>

3.儿子选择器

/*查找div标签内部所有的儿子span*/
/*2.儿子选择器 两个选择器之间大于号隔开 ;
查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/
#d1>span {
   color: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   #d1>span{
       color: orange;
   }
   </style>
</head>
<body>
   <div id="d1">div
       <p>div里面的p
           <span>div里面的p里面的span</span>
       </p>
       <span>div里面的span</span>
   </div>
   <span>div下面的span</span>
   <span>div下面的span</span>
</body>
</html>

4.毗邻选择器

/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
/*3.毗邻选择器*/

#d1+span {
   color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   #d1>span{
       color: orange;
   }
   </style>
</head>
<body>
   <div id="d1"+div
       <p>div里面的p
           <span>div里面的p里面的span</span>
       </p>
       <span>div里面的span</span>
   </div>
   <span>div下面的span</span>
   <span>div下面的span</span>
</body>
</html>

5.弟弟选择器

/*查找div标签同级别下面所有的span标签(弟弟们)*/
/*4.弟弟选择器*/
#d1~span {
   color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   #d1~span{
       color: orange;
   }
   </style>
</head>
<body>
   <div id="d1"+div
       <p>div里面的p
           <span>div里面的p里面的span</span>
       </p>
       <span>div里面的span</span>
   </div>
   <span>div下面的span</span>
   <span>div下面的span</span>
</body>
</html>

CSS属性选择器

1.概述
所有的标签除了有自己默认的属性之外还可以拥有自定义的任意属性
默认属性： id；class等
自定义属性（标签依旧可以有）：x=1 ；y=2等

2.查找属性名含有name的标签

[name] {
  background-color: red;*/
}

3.查找属性名含有name并且值是username的标签

[name='username'] {
   background-color: orange;
}

4.查找input标签并且属性名含有name值是username的

input[name='username'] {
   background-color: aqua;
}

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       [name]{
           background-color: red;
       }
   </style>
</head>
<body>
<input type="text"name="username">
<input type="text"name="password">
<a href="" name="username">111</a>
<div name="username">div</div>
</body>
</html>

5.前面的选择器可以是任意类型的标签、id、class

#d1[name]{
      background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #d1[name]{
           background-color: red;
       }
   </style>
</head>
<body>
<input type="text"name="username">
<input type="text"name="password" id="d1">
<a href="" name="username">111</a>
<div name="username">div</div>
</body>
</html>

CSS选择器之分组与嵌套

1.分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div, p {
 color: red;
}

并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span {
  color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       /*div,p{*/
       /*    color: red;*/
       /*}*/
       #d1,c1,span{
           color: blue;
       }
   </style>
</head>
<body>
<div id="d1">div</div>
<p class="c1">p</p>
<span>span</span>
<a href="">点我点我吧</a>
</body>
</html>

2.嵌套
还可以在选择器基础之上添加额外的选择使得查找更精确

span.c1{
   color: orange;
}

div#d1{
   color: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
   span.c1{
       color: orange;
   }
   </style>
</head>
<body>
<div id="d1">div</div>
<p class="c1">p</p>
<span class="c1">span</span>
<a href="" class="c1">点我点我吧</a>
</body>
</html>

CSS选择器之伪类选择器

1.a标签自带小特性
a标签默认的颜色有两种：紫色和蓝色。

紫色：链接地址已经被点击过了
蓝色：链接地址从来没有点击过

2.语法结构
鼠标悬浮上去之后样式改变适用于所有含有文本的标签

# 鼠标悬浮上去变为蓝色！
a:hover {
    color: blue;
}

# 该网站还未点击十显示为黑色！
a:link {
    color: black;
}

# 该网站点击一次后变为灰色1
a:visited{
    color: gray;
}

# 选定的链接
a:active{
     color: red;
}

CSS选择器之伪元素选择器

1.概念

通过css代码来操作标签的文本内容,动态添加！！！

2.语法结构（重要）
before和after多用于清除浮动。

# 常用的给首字母设置特殊样式：
p:first-letter {
 font-size: 48px;
 color: red;
}

# 在每个<p>元素之前插入内容
p:before {
 content:"*";
 color:red;
}

# 在每个<p>元素之后插入内容
p:after {
 content:"[?]";
 color:blue;
}

3.伪元素选择器作用

伪元素选择器可以用在解决标签浮动所带来的的负面影响;
也可以用来做数据的防爬。

CSS选择器优先级

1.CSS继承
继承CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了字体颜色值也会应用到段落的文本中。
body {
 color: red;
}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {
 color: green;
}
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

2.需求：当多个选择器查找到相同的标签修改不同的样式，那么标签该听谁的？
需要分情况讨论：

选择器相同,引入位置不同
采用就近原则
选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

字体样式

1.宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，行内标签的宽度由内容来决定

2.字体属性
（1）# 文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。
如果浏览器不支持第一个字体，则会尝试下一个。
浏览器会使用它可识别的第一个值。
body {
 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
（2）# 字体大小
如果设置成inherit表示继承父元素的字体大小值。
p {
 font-size: 14px;
}
（3）# 字重（粗细）
font-weight用来设置字体的字重（粗细）。
p {
   font-weight:lighter;
}
值描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值

（4）# 文本颜色
p {
   color:red;
   color:rgb();
   color:#3e3e3e;
   color:rgba(1,1,1,0.5)
}

颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如:  red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
（5）# 文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
p {
   text-align:center;
}
值描述
left 左边对齐，默认值
right 右对齐
center 居中对齐
justify 两端对齐

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

值	描述
left	左边对齐，默认值
right	右对齐
center	居中对齐
justify	两端对齐

（6）# 文字装饰
常用的为去掉a标签默认的自划线：
text-decoration 属性用来给文字添加特殊效果。
a {
   text-decoration: none;
}
值描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

（7）# 首行缩进
p {
   text-indent: 32px;
}

背景属性

1.基本语法

/*背景颜色*/background-color: red;

/*背景图片*/
background-image: url('1.jpg');

/* 背景重复 
repeat(默认):背景图片平铺排满>整个网页 
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺 
no-repeat：背景图片不平铺*/
background-repeat: no-repeat; 

/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

2.简写格式

background:#336699 url('1.png') no-repeat left top;

边框属性

1.常见边框属性

border-width
border-style
border-color

代码说明：
#i1 {
 border-width: 2px;
 border-style: solid;
 border-color: red;
}
简写格式：
#i1 {
 border: 2px solid red;
}

2.边框样式

值描述
none 无边框
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

值	描述
none	无边框
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

3.边框补充
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {
 border-top-style:dotted;
 border-top-color: red;
 border-right-style:solid;
 border-bottom-style:dotted;
 border-left-style:none;
}

4.border-raduis
用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

display属性

1.作用：用于控制HTML元素的显示效果。

值意义
display:“none” HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block” 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline” 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block” 使元素同时具有行内元素和块级元素的特点。

值	意义
display:“none”	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block”	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline”	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block”	使元素同时具有行内元素和块级元素的特点。

2.display:"none"与visibility:hidden的区别：

visibility:hidden:
可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none:
可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。