资讯专栏INFORMATION COLUMN

css基础(待补充)

浠ラ箍 / 1033人阅读

摘要:选择器基础选择器标签选择器针对一类标签注意选择的所有,而不是一个。元素元素是文档结构的基础。行内元素不会在它本身之前或之后生成分隔符,所以可以出现在另一个元素内容中,而不会破坏其显示。

css选择器 基础选择器
1.标签选择器:针对一类标签

注意:选择的所有,而不是一个。


css

2.ID选择器:针对某一个特定的标签使用,只能使用一次

注意:
(1)只能有字母、数字、下划线。
(2)必须以字母开头。
(3)不能和标签同名。比如id不能叫做body、img、a。
(4)大小写严格区分,也就是说aa,和AA是两个不同的ID。


你好

3.类选择器:针对你想要的所有标签使用,优点:灵活

(特性1:类选择器可以被多种标签使用。特性2:同一个标签可以使用多个类选择器。用空格隔开)
注意:
(1)不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同完成这个标签的样式。
(2)每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。


你好

4.通用选择器(通配符):针对所有的标签都适用(不建议使用)
高级选择器
1.后代选择器: 定义的时候用空格隔开(含类选择器、id选择器都是可以的)

注意:只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。

2.交集选择器

注意:选择的元素要求同时满足两个条件:必须是h3标签,然后必须是special标签。

3.并集选择器:定义的时候用逗号隔开
p,h1,#mytitle,.one/*定义了一个并集选择器,带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{
    color:red;
}
4.伪类选择器

一、结构(位置)伪类选择器( : )
1、:first-child
2、:last-child
3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)


    
  • 我是第一个
  • 我是第二个
  • 我是第三个
  • 我是第四个
  • 我是第五个
  • 我是第六个
  • 我是第七个
  • 我是第八个
  • 我是第九个
  • 我是第十个

二、属性选择器([ ])
1、[ 属性 ]
2、可以和正则表达式混用,如 $ 和 ^ 和 *


    
  • 我是第一个
  • 我是第二个
  • 我是第三个
  • 我是第四个
  • 我是第五个
  • 我是第六个
  • 我是第七个
  • 我是第八个
  • 我是第九个
  • 我是第十个
css权重的等级划分 什么是权重

CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。

每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。 这个级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中

权重的等级

可以把样式的应用方式分为几个等级,按照等级来计算权重

1、!important,加在样式属性值后,权重值为 10000
2、内联样式,如:style=””,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、::before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0
权重的计算实例

1、实例一:


......
这是一个div元素

2、实例二:


......

这是一个h2标题

伪类和伪元素 伪类和伪元素的区别(CSS3下的区别)

伪类其实是弥补了CSS选择器的不足,用来更方便地获取信息。

而伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。
所以可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。

除了上面这个本质区别以外,在CSS3中,伪类用单冒号:表示;而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

1.伪类

CSS3给出的定义是:伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种:

1.格式化DOM树以外的信息。比如: 标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。

2.伪元素

CSS3给出的定义是:伪元素可以创建一些文档语言无法创建的虚拟元素。比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter、::first-line)。同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after。

用法 ::before

在被选元素之前插入内容。需要指定content属性来插入内容。

::after

在被选元素之后插入内容。需要指定content属性来插入内容。

CSS

::first-letter

匹配元素中文本的首字母。

::first-line

匹配元素中第一行的文本(只能在块元素中使用)。

::selection

匹配被用户选中的部分。

元素

元素是文档结构的基础。在HTML中,最常用的元素很容易被识别,如平p、table、span、a、和div。文档中的每个元素都对文档的表现起一定的作用。在css中,至少在css2.1中,这意味着每个元素生成一个框(box,也称为盒),其中包含元素的内容。

替换和非替换元素

尽管css依赖于元素,但并非所有元素都以同样的方式创建。元素通常有两种形式:替换和非替换。

替换元素

替换元素是指用来替换元素内容的部分并非由文档内容直接表示。在HTML中,最熟悉的替换元素的例子就是img元素,它由文档本身之外的一个图像文件来替换。实际上,img没有具体的内容,通过一下的简单例子可以了解这一点。

这个标记片段不包含任何具体内容,只有一个元素名和一个属性。除非将其指向一个外部内容。否则这个元素没有任何意义。
input元素与之类似,取决于input元素的类型,要由一个单选按钮、复选框或文本输入框替换。替换元素显示时也生成框。

非替换元素

大多数HTML元素都是非替换元素。这意味着,其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示。
例如:

hi there

这就是一个非替换元素。段落、标题、表单元格、列表和HTML中的几乎所有元素都是非替换元素。

元素显示角色

除了替换和非替换元素,css2.1还使用另外两种基本元素类型:块级元素和行内元素。

块级元素

块级元素生成一个元素框,(默认的)它会填充其父元素的内容区,旁边不能有其他元素。换句话说,它在元素框之前和之后生成了“分隔符”。替换元素可以是块级元素,不过通常都不是。

行内元素

行内元素在一个文本行内生成一个元素框,而不会打断这行文本。行内元素最好的例子就是HTML中的a元素。行内元素不会在它本身之前或之后生成“分隔符”,所以可以出现在另一个元素内容中,而不会破坏其显示。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116338.html

相关文章

  • Linux cmd(补充)

    摘要:第一部分基础知识本章重点命令参考每天一个命令常用命令设置静态设置静态查看本机网关与查看本机网关与常用命令用打开某目录 Linux Learn 第一部分 Chap 1 基础知识 本章重点 : Linux 命令 1-1 Linux Preface Linux 参考 : 每天一个Linux命令 Linux常用命令 1. 设置静态ip Linux设置静态IP 2. 查看本机网关与DNS 查...

    DevTalking 评论0 收藏0
  • Linux cmd(补充)

    摘要:第一部分基础知识本章重点命令参考每天一个命令常用命令设置静态设置静态查看本机网关与查看本机网关与常用命令用打开某目录 Linux Learn 第一部分 Chap 1 基础知识 本章重点 : Linux 命令 1-1 Linux Preface Linux 参考 : 每天一个Linux命令 Linux常用命令 1. 设置静态ip Linux设置静态IP 2. 查看本机网关与DNS 查...

    sevi_stuo 评论0 收藏0
  • webpack+vue项目实战(五,监听路由,实现同个页面不同状态的切换)

    摘要:好了,闲话不多说今天要说的时利用监听路由的方式,实现同个页面不同状态的切换。只要等于,那么页面就是待确认回款页面进入待确认回款页面中,回款状态的筛选标签要加上。 1.前言 今天发完这一篇,就要这个系列告一段落了!以后如果有什么要补充的会继续补充!因为在后台管理项目上,搭建的话,主要就是这样了!还有的一些是具体到交互的处理,那个是要根据后端的需求,来进来比较细化的工作,我在这里就不说了!...

    guyan0319 评论0 收藏0
  • CSS哲学伪命题

    摘要:最早遇到的大概的是命名的问题了吧,因为本身积累的词汇量就少,动不动就没单词可用了。用于解决项目命名规则问题。其哲学理念是模块化,功能单一性,关注点分离。借助而解决了中的命名空间的问题,使得单文件变得简单清晰。 标题党。这篇文章断断续续的修改过好几次,也没有满意,本来是想总结一下我这些零散的 CSS 知识结构,可能由于知识体系不全面,总是没能把知识点串联成一个通顺的内容。贴出来权当大家一...

    Shimmer 评论0 收藏0
  • 你不知道的CSS

    摘要:不要忘了给子元素设置字号用來清除浮动除了著名的清除浮动类,利用属性也可以清除浮动。 本文首发于我的博客 CSS的世界是神奇的。随着各浏览器WEB标准的日趋统一,CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目,抛开该项目的实用性不说,项目中的众多的DEMO就已经证明了CSS的强大。当然...

    cnio 评论0 收藏0

发表评论

0条评论

浠ラ箍

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<