前端初体验——css样式选择器学习

Ttang23

于 2024-08-29 00:05:53 发布

阅读量398

点赞数 17

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/2301_78566776/article/details/141652136

版权

1.理论

‌‌CSS是‌(Cascading Style Sheets)层叠级联样式单，是一种用来表现HTML文件样式的计算机语言。

样式有三种:行内样式、内部样式、外部样式

css样式主要分为三大部分：选择器、盒子模型、布局

其中布局主要分为：float普通盒子布局、内联块级盒子布局、弹性盒子布局

2.实操

（1）三种样式

css样式分为三种:行内样式、内部样式、外部样式

行内样式

<div style="background: rgb(207, 118, 133);color: rgb(238, 209, 19);">hello!</div>

外部样式

创建css文件用link标签与html文件相连接

<link rel="stylesheet" href="外部样式.css">

内部样式

写在html框架<head></head>之间

<style>
        /* 内部样式 */
        p{
            background:rgb(rgb(199, 72, 72), rgb(32, 208, 32), rgb(236, 236, 240))

        }
</style>

（2）选择器部分

首先了解在外部样式中css的基本语法

/* css语法 */
/* selector{
     xxxxxxxxxxxxxx;
     xxxxxxxxxxxxxx;
} */

元素选择器

直接用元素名称做选择 E{}

特例:选择所有的元素使用 * {}

*{
    background:rgb(240, 209, 164);
}

p标签

p{
    background:rgb(50, 173, 197);
    color: rgb(220, 162, 221);
}

属性选择器

div[id]{
    background: aquamarine;
    color:rgb(209, 146, 219);

}

div[id=a] 表示有id属性并且id值为a

div[id^=a] 表示有id并且以a开头

div[id$=a] 表示有id并且以a结尾

div[id*=a] 表示有id并且包含a的

div[id=aa]{
    background: rgb(140, 127, 255);
    color:rgb(241, 220, 100);
}


div[id$=1]{
    background: rgb(45, 37, 117);
    color:rgb(134, 118, 27);
}

id选择器

id选择器 “#”+idname

#bb{
    color: brown;
}

多个条件都要满足时，两个标签之间不可以留空隙

p标签且id为dd

p#dd{
    background: rgb(113, 189, 37);
    color: rgb(70, 178, 245);
}

class选择器

class选择器 “.”+classname

.ee{
    color: darksalmon;
}

结合选择器注意div和.ee无空隙

div标签且class为ee

div.ee{
    color: rgb(34, 119, 231);
}

包含选择器

强调包含关系两属性之间有空隙

包含在div标签中的p标签

div p{
    background: rgb(101, 214, 112);
}

子选择器 必须是父子关系

div>.aaa{
    color: crimson;
}

兄弟选择器 select1~select2{}

.oo~.pp{
    background: rgb(189, 228, 228);
    color: crimson;
}

选择器组合 多种标签选择

div,
p{
    background: black;
}

（3）伪类选择器

伪元素处理

1.首字母 ：：first-letter 块级元素

div::first-letter{
    font-size: 20px;
    color:rgb(149, 242, 211);
}

2 首行 ::first-line

div::first-line{
    font-size: 30px;
    background: burlywood;
}

有时候我们会发现在浏览器中显示的元素并没有分段为很长的一行可以使用以下方法把文字断开

div{
    word-break: break-all;
}

3 在元素前面添加

div::before{
    content: "aaaa";
    background: cornflowerblue;
}

4 在元素后面添加

div::after{
    content: "bbbb";
    background: rgb(100, 237, 118);
}

伪类选择器

1 结构性伪类选择器

：nth-child(n) 此中n可以是1 2 3 4...可以是odd也可以是even 也可以是表达式

第一个：nth-child(1) = first-child

最后一个：last-child

倒叙 nth-last-child（n）

ul li:nth-child(2n+2){
    color: chocolate;
    background: aquamarine;

}
ul li:last-child{
    color: rgb(210, 30, 42);
    background: rgb(239, 235, 14);

}

注意：nth-child只认数字如果类型刚好符合则被选中

：nth-of-type 既认数字也认类型找前面要求下的第n个

first-of-type last-of-type 依然适合首尾元素查找

倒叙为 nth-last-of-type（n）

ul li:nth-of-type(2){
    color: chocolate;
    background: aquamarine;

}

2 UI状态伪类选择器

鼠标悬停：hover

ul li:hover{
    color: coral;
    background: burlywood;
}

焦点状态：focus

input:focus{
    background: blue;
}

选中状态：checked

input:checked{
    box-shadow: cornflowerblue;
}

3 其他伪类选择器

not()过滤掉某些元素

在ul下的li如果带有aa或cc的class将不会被选中

ul li:not(.aa):not(.cc){
    background: blue;
}

(4)选择器优先级

1. 选择器写的越长越准确，优先级越高

2. id选择器>class选择器>元素选择器

3. 同级别长度 css代码按顺序执行后面的代码会把前面的代码覆盖掉，即样式覆盖

4. 以上规则适合绝大多数场景，若特殊场景不适合自行测试

Ttang23

关注

17
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
前端初体验——css样式选择器学习

是‌(Cascading Style Sheets)层叠级联样式单，是一种用来表现HTML文件样式的计算机语言。有时候我们会发现在浏览器中显示的元素并没有分段为很长的一行可以使用以下方法把。此中n可以是1 2 3 4...可以是odd也可以是even 也可以是表达式。first-of-type last-of-type 依然适合首尾元素查找。第一个：nth-child(1) = first-child。倒叙为 nth-last-of-type（n）倒叙 nth-last-child（n）
复制链接

扫一扫