CSS语法及其选择器

打酱油的；

已于 2023-08-15 17:07:41 修改

阅读量1k

点赞数 1

分类专栏：前端开发 pythonweb 文章标签： css html 前端标签样式

于 2022-08-17 00:02:16 首次发布

本文链接：https://blog.csdn.net/weixin_46098612/article/details/126356691

版权

前端开发同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

pythonweb

6 篇文章 0 订阅

订阅专栏

第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
第二等：ID选择器，如：#header，权值为0100.
第三等：类选择器、如：.bar，权值为0010.
第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.
通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
继承的样式没有权值。

1. CSS简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层

总之一句话，CSS用来设置网页中元素的样式

使用CSS来修改元素样式的方式大致可以分为3种

2.类型样式设置

a.内联样式（行内样式）

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）

b.内部样式表

将样式编写到head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

<style>
p{
    color:green; 
    font-size:50px;
}
</style>

问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

c.外部样式表（最佳）

可以将css样式编写到一个外部的CSS文件中，然后通过编写head中link标签来引入外部的CSS文件完成选择

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

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用

将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

3.CSS基本语法

3.1注释

css中的注释

只能使用/*和*/包裹。即不管是单行注释，还是多行注释，都是以/*开头，以*/结尾

/* css中的单行注释 */

/* 
css中的多行注释
css中的多行注释
css中的多行注释
*/

我们对比下其他几种前端语言的注释

html中的注释

只能使用包裹。即不管是单行注释，还是多行注释，都是以结尾


<!-- html中的单行注释 -->

<!-- 
html中的多行注释
html中的多行注释
html中的多行注释
-->

JS(JavaScript)和JQuery中的注释

单行注释使用//。多行注释使用/*和*/包裹，以结尾

/* JS(JavaScript)和JQuery中的单行注释*/

/*
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
*/

3.2基本语法

`类型：选择器声明块`

选择器

通过选择器可以选中页面中的指定元素

比如p的作用就是选中页面中所有的p元素声明块

声明块

通过声明块来指定要为元素设置的样式

声明块由一个一个的声明组成，声明是一个名值对结构

一个样式名对应一个样式值，名和值之间以:连接，以;结尾


h1{
    color: green;
}

4.CSS选择器

1.通配选择器（Universal selector）

● 作用：查找页面所有标签，设置相同样式。

通配符选择器： * ，不需要调用 ，浏览器自动查找页面所有标签，设置相同的样式
●语法：*
●例子：

*{
    color: red;
}

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

2.元素选择器（Type selector）

也叫类型选择器、标签选择器

●作用：根据标签名来选中指定的元素
●语法：元素名{}
●例子：p{} h1{} div{}

p{
    color: red; 
}

h1{
    color: green;
}

3.类选择器（Class selector）

●作用：根据元素的class属性值选中一组元素
●语法：.类名
●例子：.blue{}

<style>
/* 定义类选择器 */
.red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div><style>
/* 定义类选择器 */
.red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>

注意：
class是一个标签的属性，它和id类似，不同的是class

●可以重复使用，
●可以通过class属性来为元素分组，
●可以同时为一个元素指定多个class属性，空格隔开

●开发习惯：见名知意 类名见名知意，多个单词可以用 - 连接，例如：news-hd。

<p class="blue size"> 类选择器（Class selector）</p>

4.ID选择器（ID selector）（id不能重复）

●作用：根据元素的id属性值选中一个元素，一个元素一个id
●语法：#id名{}
●例子：#box{} #red{}

<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

注：同一个 id 选择器在一个页面只能使用一次。

5.属性选择器（Attribute selector）

●作用：根据元素的属性值选中一组元素
●语法1：[属性名] 选择含有指定属性的元素
●语法2：[属性名=属性值] 选择含有指定属性和属性值的元素
●语法3：[属性名^=属性值] 选择属性值以指定值开头的元素
●语法4：[属性名$=属性值] 选择属性值以指定值结尾的元素
●语法5：[属性名*=属性值] 选择属性值中含有某值的元素
●例子：p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}

p[title]{
    color: orange;
}
p[title=e]{
    color: orange;
}
p[title^=e]{
    color: orange;
}
p[title$=e]{
    color: orange;
}
p[title*=e]{
    color: orange;
}

6. 复合选择器

交集选择器

●作用：选中同时复合多个条件的元素
●语法：选择器1选择器2选择器3选择器n{}
●注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头！！！
选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。

<style>
p.box {
color: red;
}
</style>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

并集选择器（选择器分组）

●作用：同时选择多个选择器对应的元素
●语法：选择器1,选择器2,选择器3,选择器n{}
●例子：#b1,.p1,h1,span,div.red{}

<style>
div,
p,
span {
color: red;
}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

7.关系选择器

●父元素：直接包含子元素的元素叫做父元素
●子元素：直接被父元素包含的元素是子元素
●祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
●后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
●兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器（Child combinator）

●作用：选中指定父元素的指定子元素（只有子代）
●语法：父元素 > 子元素{}
●例子：A > B

<style>

div > span {

color : red ;

}

</style>

<div>

<span> 这是 div 里面的 span </span>

<p>

<span> 这是 div 里面的 p 里面的 span </span>

</p>

</div>

后代元素选择器（Descendant combinator）

●作用：选中指定元素内的指定后代元素（所有后代标签）
●语法：祖先后代
●例子：A B

<style>

div span {

color : red ;

}

</style>

• <span> span 标签 </span>

<div>

<span> 这是 div 的儿子 span </span >

</div>

注：儿子，孙子都可以，但是最后一个一定要是span

兄弟元素选择器（Sibling combinator）

●作用：选择下一个兄弟
●语法：前一个 + 下一个前一个 + 下一组
●例子1：A1 + A2（Adjacent sibling combinator）
●例子2： A1 ~ An（General sibling combinator）

p + span{

color: red;

}

p ~ span{

color: red;

}

7.伪类选择器（状态选择器）（重要）

伪类（不存在的类，特殊的类） (ul>li+tab,生成结构)

伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…

伪类一般情况下都是使用:开头

以上这些伪类都是根据所有的子元素进行排序的

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child() 选中第n个子元素

n：第n个，n的范围0到正无穷

2n或even：选中偶数位的元素

2n+1或odd：选中奇数位的元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

:first-of-type 同类型中的第一个子元素

:last-of-type 同类型中的最后一个子元素

:nth-of-type() 选中同类型中的第n个子元素
:not()否定伪类，将符合条件的元素从选择器中去除

/* ul下所有li，黑色 */
ul>li {
    color: black;
}

/* ul下第偶数个li，黄色 */
ul>li:nth-child(2n) {
    color: yellow;
}

/* ul下第奇数个li，绿色 */
ul>li:nth-child(odd) {
    color: green;
}

/* ul下第一个li，红色 */
ul>li:first-child {
    color: red;
}

/* ul下最后一个li，黄色 */
ul>li:last-child {
    color: orange;
}

:link 未访问的链接

:visited 已访问的链接

由于隐私的原因，所以visited这个伪类只能修改链接的颜色
:hover 鼠标悬停的链接
:active 鼠标点击的链接

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: blue;
}

8.伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用::开头

●::first-letter 表示第一个字母
●::first-line 表示第一行
●::selection 表示选中的内容
●::before 元素的开始
●::after 元素的最后
●::before和::after 必须结合content属性来使用

/* 段落首字母设置大小为30px */

p::first-letter{

font-size: 30px;

}

/* 段落第一行设置为黄色背景 */

p::first-line{

background-color: yellow;

}

/* 段落选中的部分变绿色 */

p::selection{

background-color: green；

}

/* div前加上内容 */

div::before{

content: 'BEFORE';

color: red;

}

/* div后加上内容 */

div::after{

content: 'AFTER';

color: blue;

}

5.渲染样式

5.1 盒子尺寸背景色渲染

5.2 文字控制属性

5.2.1 字体大小

属性名： font-size

属性值：文字尺寸， PC 端网页最常用的单位 px

<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>
* {
color: red;
}

注：谷歌浏览器默认字号是16px。px要记得写，必须有单位

5.2.2 字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名： font-style

属性值

正常（不倾斜）： normal

倾斜： italic

5.2.3 font 复合属性

使用场景：设置网页文字公共样式

复合属性：属性的简写方式， 一个属性对应多个值的写法 ，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高字体（必须按顺序书写）

div {
height: 100px;
background-color: skyblue;
/* 注意：只能是单行文字垂直居中 */
line-height: 100px;
}
font-family: 楷体;
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
div {
font: italic 700 30px/2 楷体;
}

注意：字号和字体值必须书写，否则 font 属性不生效

5.2.4 字体族

属性名： font-family

属性值：字体名

注意：

拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次

查找

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

5.2.5 color 文字颜色

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。

5.2.6 文本修饰线

属性名： text-decoration

5.2.7 文本对齐方式

作用：控制内容水平对齐方式

属性名： text-align

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

文本修饰线
属性名： text-decoration
p {
text-indent: 2em;
}
text-align: center;

6.调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

1. 打开调试工具

浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查

F12

2. 使用调试工具

7.特性

打酱油的；

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS语法及其选择器

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层总之一句话，CSS用来设置网页中元素的样式使用CSS来修改元素样式的方式大致可以分为3种。.....................
复制链接

扫一扫