css篇学习笔记（二）

冰镇奶茶

已于 2022-03-03 10:34:50 修改

阅读量249

点赞数 4

分类专栏：笔记文章标签： css css3 html 前端 html5

于 2021-11-07 14:04:36 首次发布

本文链接：https://blog.csdn.net/m0_57002951/article/details/121190781

版权

笔记专栏收录该内容

29 篇文章 3 订阅

订阅专栏

CSS基本语法

【1】注释：/* */

按Ctrl+/是出现注释的快捷键

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        /*注释,注释中的内容会自动被浏览器忽略*/
        
        </style>
    </head>
    <body>
        
    </body>
</html>

【2】css基本语法：

1、选择器

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

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

2、声明块

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

声明块由一个一个声明组成

声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以：连接，以；结束

选择器

三、CSS常用选择器

第一种：元素选择器

可以根据标签名来选中指定的元素

--语法：标签名+{ }

--例子：p{ } h1{ }

第二种：id选择器(身份证号)

根据元素的id属性值来选中一个元素（id一般不能重复）

--语法：#id属性+{ }

--例子：#box{} #red{}

第三种：class选择器（班级）

class是一个标签的属性，和id类似

不同的是class可以重复使用，可以通过class属性来选中一组元素

--语法：.class属性值+{ }

例子：.blue{ }

可以同时为一个元素指定多个class,多个class之间使用空格隔开

<p class="blue abc">落霞与孤鹜齐飞</p>

第四种：通配选择器

选中页面中的所有元素

语法：*{}

四、css复合选择器

第一种：交集选择器

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器n{ }

注意：交集选择器中要是有元素选择器，必须要以元素选择器开头

/*第一种：交集选择器将class为red的div字体大小设置为30px */
div.red{
   font-size:30px;
}
</style>
<body>
   <div class="red">我是div</div>
   <p class="red">我是P元素</p>
</body>

第二种：选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器n{ }

五、关系选择器

父元素

--直接包含子元素的元素叫父元素

子元素

--直接被父元素包含的元素叫做子元素

祖先元素

--直接或间接包含后代元素的元素叫做祖先元素

--一个元素的父元素也是祖先元素

后代元素

--直接或间接被祖先元素包含的元素叫后代元素

--子元素也是后代元素

兄弟元素

--拥有相同父元素的元素是兄弟元素

第一种：子元素选择器

作用：选择指定父元素的指定子元素

语法：父元素>子元素{ }

父元素>子元素{
color:blue;
}

第二种：后代元素选择器

作用：选中指定元素内的指定的所有后代元素

语法：祖先后代{ }

祖先后代{
color:yellow;
}

第三种：兄弟元素选择器

[1]作用：选择下一个兄弟(紧挨着的下一个)

语法：前一个+下一个

p+span{

}选择p元素的下一个元素span

[2]作用：选择下边所有的兄弟元素

语法:兄 ~弟{ }

p~span{
color:red;
}

六、属性选择器

第一种：【属性名】选择含有指定属性的元素

第二种：【属性名=属性值】选择含有指定属性和属性值的元素

第三种：【属性^=属性值】选择以该属性值开头的属性

第四种：【属性$=属性值】选择以该属性值结尾的属性

第五种：【属性*=属性值】选择含有该属性值的属性

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       /* 【1】将有title属性的p元素颜色变成橙色 */
p[title]{
color:orange;
}
/*【2】将title属性值等于abc的属性变成红色*/
p[title=abc]{
color:red;
}
/*【3】将title属性值以abc开头的属性变成绿色*/
p[title^=abc]{
color:green;
}
/*【4】将title属性值以def结尾的属性变为蓝色*/
p[title$=def]{
color:blue;
}
/*【5】将title属性值含有h的属性变成黄色*/
p[title*=h]{
color:yellow;
}
       </style>
   </head>
   <body>
   <p title="abc">少小离家老大回</p>
   <p title="abcjhshbdg">乡音无改鬓毛衰</p>
   <p title="def">儿童相见不相识</p>
   <p title="kdnhdef">笑问客从何处来</p>
   <p title="hhh">落霞与孤鹜齐飞</p>
<p title="122">秋水共长天一色</p>
   </body>
</html>

七、伪类选择器

伪类：不存在的类，特殊的类（表示特殊状态）

--用来描述一个元素的特殊状态

比如：第一个子元素，被点击的元素，鼠标移入的元素...

特点：一般情况下使用：开头

在所有子类中进行排序

例：【1】：first-child(第一个子元素) 类似：【1】：first-of-type 不同点：

【2】：last-child（最后一个子元素） 【2】：last-of-type 在同类型中进行排序

【3】：nth-child（n）（任选一个子元素） 【3】：nth-of-type()

特殊值：n: 0到正无穷

2n/even: 偶数

2n+1/odd: 奇数

第二种：：not()否定伪类

作用：将符合条件的元素从选择器中去除

ul>li:not(:nth-child(3)){
color:red;
}
ul>li:not(:nth-of-type(3)){
color:red;
}

冰镇奶茶

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
css篇学习笔记（二）

CSS基本语法【1】注释：/* */按Ctrl+/是出现注释的快捷键<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /*注释,注释中的内容会自动被浏览器忽略*/ </style> &
复制链接

扫一扫