文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css基础选择器

其基本语法格式如下： 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签选择器最大的优点是能快速为页面中同类型的标签统一样式...样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。 2. 各个类名中间用空格隔开。 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。...元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。...为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号 比如 :link{} 链接伪类选择器 :link /* 未访问的链接 */...:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

61830

css 笔记

关系选择器：         div>p 选择所有作为div元素的子元素p         div+p 选择紧贴在div元素之后p元素         div~p 选择div元素后面的所有兄弟元素...[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。          ...:element1~element2:         :first-of-type匹配同类型中的第一个同级兄弟元素         :last-of-type匹配同类型中的最后一个同级兄弟元素         ...:only-of-type匹配同类型中的唯一的一个同级兄弟元素         :only-child匹配父元素仅有的一个子元素         :nth-child(n)匹配父元素的第n个子元素...        :nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素         :last-child()匹配父元素的最后一个子元素         :root匹配元素在文档的根元素

2.2K40
您找到你想要的搜索结果了吗？
是的
没有找到

css三大特性(继承 层叠 优先 !important； 权重)

在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 3.继承性中的特殊性 3.1a标签的文字颜色和下划线是不能继承的 3.2h标签的文字大小是不能继承的 应用场景: 一般用于设置网页上的一些共性信息...核心： 2.优先级判断的三种方式 2.1间接选中就是指继承 如果是间接选中, 那么就是谁离目标标签比较近就听谁的 2.2相同选择器(直接选中) 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的...2.3不同选择器(直接选中) 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠 id>类>标签>通配符>继承>浏览器默认 –> 优先级之important： <...作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 2.权重的计算规则 2.1首先先计算选择器中有多少个id, id多的选择器优先级最高 2.2如果id的个数一样, 那么再看类名的个数..., 类名个数多的优先级最高 2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高 2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了,

54010

CSS3选择器（全部）

比如我们这里的这个demo，你想让列表中的第一个”li”具有与其他”li”有不同的样式，我们就可以使用:first-child来实现。...让列表中的最后一个”li”具有与其他”li”有不同的样式。...⑦:first-of-type:选择一个上级元素下的第一个同类子元素。(不支持ie6~ie8)。 和:first-child类似，不同的是指定了元素的类型，用的不多。...⑧:last-of-type:选择一个上级元素下的最后一个同类子元素。(不支持ie6~ie8)。 和:last-child类似，不同的是指定了元素的类型，用的不多。...⑨:only-child:选择的元素是他的父级元素的唯一子元素。(不支持ie6~ie8)。 ⑩:only-of-type:选择一个上级元素的唯一一个同类型的子元素。(不支持ie6~ie8)。 <!

69110

深入解析CSS样式优先级

那这里面的每一个矩阵的0表示的是 第一个：!important 的个数 第二个：行内的个数 第三个：id选择器的个数 第四个：类选择器的个数 第五个：标签选择器的个数 行内除了!...在现在前端开发中，为了更好的阅读代码，是代码调理更清晰，一般都会把CSS代码以及JS代码从HTML中分离，采用外链的方式引入CSS以及JS。所以，行内样式在一般的开发中，用的也不多。...然后是标签选择器，这个在开发中也是不建议使用，更多的是建议添加一个类名来控制，以实现复用，同时方便控制。 最后是通配符选择器，这个选择器的使用一般就是初始化文档结构。...我猜或许是因为写了太多类名的时候再和ID相比的话，浏览器会自己去判断，选择最优的那个，毕竟10多个类名在实际的开发中是不存在的。...比如 ::before 和 ::after 这两种伪元素都是在文档中添加一个假的元素，并不能够设置 id class 等属性。所以这里可以把它作为一个唯一的存在。那么他的权重我们可以看为1。

1K20

深入解析CSS样式优先级

那这里面的每一个矩阵的0表示的是 第一个：!important 的个数 第二个：行内的个数 第三个：id选择器的个数 第四个：类选择器的个数 第五个：标签选择器的个数 行内除了!...在现在前端开发中，为了更好的阅读代码，是代码调理更清晰，一般都会把CSS代码以及JS代码从HTML中分离，采用外链的方式引入CSS以及JS。所以，行内样式在一般的开发中，用的也不多。...然后是标签选择器，这个在开发中也是不建议使用，更多的是建议添加一个类名来控制，以实现复用，同时方便控制。 最后是通配符选择器，这个选择器的使用一般就是初始化文档结构。...我猜或许是因为写了太多类名的时候再和ID相比的话，浏览器会自己去判断，选择最优的那个，毕竟10多个类名在实际的开发中是不存在的。...比如 ::before 和 ::after 这两种伪元素都是在文档中添加一个假的元素，并不能够设置 id class 等属性。所以这里可以把它作为一个唯一的存在。那么他的权重我们可以看为1。

1.7K10

CSS选择器详解

的元素为红色 **/ #myid { 　　color: red; } 我是div 属性选择器 根据简单属性选择 E[attr] { sRules } 选定具有属性...第3个p 第2个span :first-of-type CSS3 E:first-of-type { sRules } 匹配同类型中的第一个同级兄弟元素...CSS3 E:last-of-type { sRules } 匹配同类型中的最后一个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，... 我是一个div元素 :only-of-type CSS3 E:only-of-type { sRules } 匹配同类型中的唯一的一个同级兄弟元素E...对我无效，我不会变红色 :nth-of-type(n) CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E 要使该属性生效，E元素必须是某个元素的子元素

2.8K40

二、css3基础

选择器 1.元素选择器： p div body h1 等，根据元素的标签名来 2.Id 选择器：给元素分配一个id不能重复 以 #开头 ...（并集选择器） 7.关系选择器： 有父子关系的选择器 ，多层级 div > span 子元素 div span 后代元素 p + span 兄弟节点 选择器 紧挨着的上一个和下一个的关系...，最近的 p ~ span 选择下面所有的兄弟（后面的元素） 8.属性选择器：元素内的属性 id 和class 除外 语法 ： 元素[属性名] 选择含有指定属性的元素 元素[属性名 =...属性值] 选择相应属性值的元素 元素[属性名 ^ = 属性值] 选择属性值 以 指定值开头 的元素 元素[属性名 $ = 属性值] 选择属性值 以 指定值结尾 的元素 元素[属性名 *=...否定伪类 ul > li:not(:first-child){ color: red; } 将符合条件的元素从选择器中去除 10.伪元素选择器

43720

类选择符和ID选择符

box-shadow: 5px 5px 3px rgba(0,0,0,.5); } 如果想让网页中某些元素的外观与其他同类标签区分开，可以使用类选择符。...首先给选择符起一个名字，然后把这个名字指定给想装饰的HTML标签。例如上一个例子中，我就给第一个div命名为“one”。 类选择符还能精确控制某个元素的外观，而不管元素使用的是哪个标签。...在HTML中，类通过class属性指定，其值中的每个类名由空格分开。 浏览器会把各个类的属性合并在一起，然后再应用到元素上。...在CSS中，用 # 井号开头，后面跟着id名。 正确地使用ID HTML的id属性有些作用是class属性实现不了的。这些优势与CSS没关系，因此完全可以不适用ID选择符。...类属性就有点类似人的价值观，拥有同一种价值观的人可以有很多，一个人也可以同时拥有几种价值观。 ID选择器和类选择器的不同点 一个元素可以有多个类，一个类也可以添加到多个元素中。

80570

前端入门系列之CSS

简单选择器 1） 类选择器 类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。...同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。...此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。...[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。...然而选择器七同时击败了五和六——它有与五相同数量的子选择器在链中，但一个元素已被换为了一个类选择器。所以获胜的专用性值是33比23和24。

2.6K10

你了解CSS吗？——rules汇总(上)

rules也是我们平常开发中，写的最多的内容，比如： div { width: 100px; height: 100px; } 复制代码 可以看到，一个rule是由selector(选择器) + 语句块...CSS通过选择器将样式的描述属性绑定到文档(document)中的元素上，通过对Selectors Levels 3规范的中的选择器汇总，大概分为以下几类： 通用选择器(类型选择器、class选择器、ID...E元素的父元素的第n个同类子元素，从后向前数 E:nth-of-type(n) 选中E元素的父元素的第n个同类子元素（同:nth-child的区别见番外篇） E:nth-last-of-type(n)...选中E元素的父元素的第n个同类子元素（同:nth-last-child的区别见番外篇） E:first-child 选中E元素的父元素的第1个同类子元素 E:last-child 选中E元素的父元素的最后一个同类子元素...E:first-of-type 选中E元素的父元素的第一个同类子元素（见） E:last -of-type 选中E元素的父元素的最后一个同类子元素（同:last-child的区别见番外篇） E:only-child

76100

【译】推荐的十个CSS动画库

3.获取CSS代码 选择适合自己需要的动画后，你可以直接从网站种获取代码。...你也可以选择压缩版的代码。 4.下载选择的动画 另一个惊奇的功能是，你可以将喜欢的动画的代码放到你的列表中，并仅下载你喜欢的动画代码。或者你可以将这些动画代码复制到一起。...如果在这里都找不到你想要的动画，那你在哪都找不到了。 它的使用方式类似animista。比如，你可以直接选择动画，然后直接从网站中获取，或者下载整个库。...使用 使用很简单：将类名添加到你的元素中，比如： Hover me!...如其名，CSShake包含了不同类型的抖动动画的CSS动画库。 使用 添加shake {animation_name}到你的元素中。

70710

推荐的十个CSS动画库

3.获取CSS代码 选择适合自己需要的动画后，你可以直接从网站种获取代码。...你也可以选择压缩版的代码。 4.下载选择的动画 另一个惊奇的功能是，你可以将喜欢的动画的代码放到你的列表中，并仅下载你喜欢的动画代码。或者你可以将这些动画代码复制到一起。...如果在这里都找不到你想要的动画，那你在哪都找不到了。 它的使用方式类似animista。比如，你可以直接选择动画，然后直接从网站中获取，或者下载整个库。...使用 使用很简单：将类名添加到你的元素中，比如： Hover me!...如其名，CSShake包含了不同类型的抖动动画的CSS动画库。 使用 添加shake {animation_name}到你的元素中。

1.4K30

CSS知识总结（上）

属性:值; } 序选择器 同级别的第几个 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签...) 选中同级别中的所有偶数 同类型的第几个 :first-of-type 选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n)...选中同级别中同类型的第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :only-of-type 选中父元素中唯一类型的某个标签 属性选择器 input[type...如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高 标签理解 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级...div会单独的占领一行,而span不会单独占领一行 div是一个容器级的标签, 而span是一个文本级的标签 容器级的标签和文本级的标签的区别?

1K40

面试官：什么是js中的事件流以及事件模型？

一、事件 在了解什么是js中的事件流之前，我们先了解一下什么是js的事件。...我们看看百度对于流的解释 那连着事件我们是不是就能将事件流理解为从页面接收事件的顺序，这些事件连起来就形成了一个像液体一样的整体，这个整体中的事件又有着自己的执行顺序，这就是事件流。...依次触发其祖先节点的同类型事件，直到DOM根节点 事件捕获 当节点事件被触发时，会从DOM根节点开始，依次触发其子孙节点的同类型事件，直到当前节点自身。...从当前的Dom根节点开始，直到当前节点自身。...动态监听:使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

1.9K10

前端之HTML和CSS

3、通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式 这是一个div元素 这是第二个div元素 2、类选择器 　　通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。... 4、id选择器 　　通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。...-- 无法应用以上样式，每个标签只能有唯一的id名 --> 这是第三个段落标签 5、伪类选择器 常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。

4.3K30

两个CSS知识点：BFC和选择器权重

决定元素的内容如何渲染以及与其他元素的关系和交互。BFC 有一个重要的特点：具有隔离作用。...BFC 有五条规则： BFC 有隔离作用，内部元素不会受外部元素的影响（反之亦然）。 一个元素只能存在于一个 BFC 中，如果能同时存在于两个 BFC 中，那么就违反了 BFC 的隔离规则。...A. .bfc+div B. .bfc div C. .bfc > div D. .bfc~div 答案是 A 第二个选项表示后代选择器，儿子元素、孙子元素都可以选择到； 第三个选项表示子代选择器，只有....bfc 的子元素可以选择到； 第四个选项表示通用的兄弟选择器，不管相不相邻都可以选择到； 以下属性选择器表示属性值以“val-”开头的是？...[attr$="val"] 答案 C 属性选择器通过已经存在的属性名或属性值匹配元素。

80010
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券