笔记01:CSS 样式及特性

CSS样式及特性.jpg

1、标签选择器

以文档中对象类型的元素作为选择器,如p,div,span等。

如果希望为标签重复样式或者希望统一文档中标签的样式时,可以使用标签选择器。

对于div、span等通用元素,不建议使用标签选择器,因为它们应用广泛,使用标签选择器会互相干扰。

2、ID选择器

以元素的id属性作为选择器。

#box{width:100px;height:100px;}

一般对于模块包含框元素使用id属性,内部元素可以定义class属性。因为包含框都是唯一的,而内部元素可能出现重复。

3、类选择器

以对象的class属性作为选择器。

 .red{color:red;}

ID选择器比类选择器具有更大的优先权。

4、指定选择器

为ID选择器或类选择器指定目标标签的一种特殊选择器形式。

5、包含选择器

包含选择器是最有用的复合选择器,它选择被第一个选择符包含的第二个选择符匹配的所有后代元素对象。

包含选择器可以实现跨层包含,即父对象可以包含子对象、孙对象或孙的子对象等等。

div span{font-size:12px;}

6、子选择器

子选择器是复合选择器,它选择被第一个选择符包含的第二个选择符匹配的所有子对象。

div>span{font-size:12px;}

子选择器只能控制子元素

7、相邻选择器

相邻选择器是复合选择器,它选择与第一个选择符相邻的第二个选择符匹配的所有同级对象。

div+span{font-size:12px;}

8、兄弟选择器

兄弟选择器是复合选择器,它选择与第一个选择符后面的第二个选择符匹配的所有同级对象。

div~span{font-size:12px;}

9、分组选择器

分组选择器是复合选择器,是一种选择器的特殊用法,它不是一种选择器类型。

h1,h2,h3,h4,h5,h6,p{

line-height:2px

}

10、伪选择器

包括伪类和伪对象两种选择器,主要是用来选择特殊区域或者特殊状态下的元素或者对象。

div:hover{font-size:12px}

11、属性选择器

以对象的属性作为选择器。

div[id="heard']{font-size=12px;]

1. 匹配属性名

[class]{color:red;}

2.匹配属性值

a[href="https://www.baidu.com"][title="css"]{font-size=12px;}

3.前缀匹配

[class^="my"]{color:red;}

4.后缀匹配

[class$="test']{color:red;}

5.模糊匹配

[class*="est"]{color:red;}

12、通用选择器

确定文档中所有类型元素作为选择器,表示每个该样式适用所有网页元素。

*{

   padding:0;

   margin:0;

}

13、CSS特性

CSS两个特性:层叠性和继承性。

并不是所有的属性都具有继承性,下面的属性就不具备继承性:

边框属性、边界属性、补白属性、背景属性、定位属性、布局属性、元素宽高属性。

本文标题:笔记01:CSS 样式及特性
本文链接:https://chenshuangyi.com/post/46.html
作者授权:除特别说明外,本文由 陈双义 原创编译并授权 陈双义博客 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。协议见页脚-知识共享许可协议。
打赏 支付宝打赏 微信打赏

为您推荐

云解析

发表评论

学生特惠云服务器
学生特惠云服务器
轻量应用服务器
轻量应用服务器
海外云服务器
海外云服务器
企业云服务器
企业云服务器
站点信息
  • 文章总数:562
  • 页面总数:10
  • 分类总数:11
  • 标签总数:894
  • 评论总数:145
  • 浏览总数:234921
全民云服务器
全民云服务器

当前非电脑浏览器正常宽度,请使用移动设备访问本站!