CSS入门1之选择器

fazem

已于 2023-11-06 11:26:25 修改

阅读量53

点赞数

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

于 2023-11-06 10:15:46 首次发布

本文链接：https://blog.csdn.net/fazem/article/details/134195067

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!--    规范，<style>可以编写css的代码，每一个声明用分号结尾
语法:
            选择器{
                    声明1；
                    声明2；
                    声明3；
                  }
                    -->

html也可应用 link+tab关联css样式表

css的优势

1，内容与表现分离

2、页面结构表现统一，可以实现复用

3、样式十分丰富

4、建议使用独立于html的文件

5、利用SEO，容易被搜索引擎收录

css的三种表现形式

1、行内样式，在标签元素中，编写一个style属性，编写样式即可

<strong style="color: crimson">I love you</strong>

2、内部样式，在html的<head>里编写style

3、外部样式，新建一个css文件，用link+tab关联

选择器

作用 : 选择页面上的某一个或者某一类元素

基本选择器

不遵循就近原则

id选择题>class选择器>标签选择器

1、标签选择器

会选择到页面上所有此类型的标签

缺点：如果想要第一个h1变色，第二个不变色，做不到

2、类选择器

html

<h1 class ="LC"> 一级标签</h1>
<h1 class="L">我是一级</h1>
<h1 class="ye">老子是一级</h1>

css

.LC{
    color: #6476ed;

}
.L{
    color: seagreen;
}
.ye{
    color: gold;
}

类选择器的格式: .class的名称

好处：可以多个标签归类，是同一个class，可以复用

3、id选择器

id必须保证全局唯一，且不能用数字，用#引用

层次选择器

1、后代选择器

某个元素的后面祖爷爷、爷爷、爸爸、你

后代选择器
body p{
    background: darkolivegreen;
}

2、子选择器

一代儿子 ">"符号

body>p{
    background: gold;
}

3、相邻兄弟选择器

同辈，只有一个相邻向下

.active+p{
    background: blueviolet;
}

4、通用选择器

通用兄弟选择器，当前选中元素的所有向下兄弟选择器

结构伪类选择器

伪类:条件判断带冒号

/*ul的第一个子元素*/
/*避免使用id选择器，类选择器*/
ul li:first-child{
    background:brown;
}

/*只选择p1:定位到父元素找到第一个子元素*/

p:nth-child(1)
{
    background: blueviolet;
}
且如果body中第一个元素不是p，则上式找不到p1，

而要用下式
p:nth-of-type(2){
    background: aqua;
}
上式用顺序，下式用类型