关于css中选择器的小归纳（一）

kbyyd24 发布于2019-08-05 13:20 / 2765人阅读

摘要：关于中选择器的小归纳一基本选择器基本选择器是我们平常用到的最多的也是最便捷的选择器，其中有元素选择器类似于，，，，类选择器我们在标签里面为其添加的，选择器与类选择器类似，普遍选择器，并且选择器类似的写法和并列选择器类似的写法元素选择器范例你

关于css中选择器的小归纳 一、基本选择器

基本选择器是我们平常用到的最多的也是最便捷的选择器，其中有元素选择器（类似于a，div，body，ul），类选择器（我们在HTML标签里面为其添加的class），ID选择器（与类选择器类似），普遍选择器（*），并且选择器（类似“p.one#first”的写法）和并列选择器（类似“p,.one,#first”的写法）

1.元素选择器 范例：

你好，css

css：

div{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有div标签的内容样式发生改变

2.类选择器 范例：

你好，css

你好，css1

css：

.one{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有class为“one”的p标签样式发生改变

3.ID选择器 范例：

你好，css

css：

#first{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有ID为“first”的p标签样式发生改变

4.普遍选择器 范例：

你好，css

css：

*{
            border:1px solid #ededed;
            background-color: lightblue;
        }

所有标签内的样式都发生改变

5.并且选择器 范例：

你好，css

css：

p.one#first{
            border:1px solid #ededed;
            background-color: lightblue;
        }

只有ID为“first”且同时class为“one”的p标签样式发生改变

6.并列选择器 范例：

你好，css

css：

p,.one,#first{
            border:1px solid #ededed;
            background-color: lightblue;
        }

p标签，class为“one”的标签和ID为“first”的标签样式都发生改变

二、层次选择器

层次选择器一般用于选择网页中某一个标签中子类众多的情况，在这个时候为每一个标签都加上class或者是ID不太现实，但是不加又难以选择需要添加样式的标签，此时层次选择器尤为合适。

1.后代选择器（可被后代继承） 范例：


        你好，css
        
        
            one
            two
            three

css：

.content{
    border:1px solid #ededed;
    background-color: lightblue;
}

class为content的div标签里面所有的子代及孙代样式都发生改变

2.子代选择器（最直接的子代，不能被孙辈元素继承） 范例：


        你好，css
        
        
            one
            two
            three

css：

.content > li{
    border:1px solid #ededed;
    background-color: lightblue;
}

class为content的div标签里面所有的子代（只有子代，不含孙代）样式都发生改变

3.下一个兄弟选择器 范例：

css：

ul + ol{
    border:1px solid #ededed;
    background-color: lightblue;
}

ul及ol标签内容的样式发生改变，但是dl内容样未改变

4.之后所有兄弟选择器 范例：

css：

ul ~ dl{
    border:1px solid #ededed;
    background-color: lightblue;
}

从ul到dl所有内容的样式都发生了改变
（未完，待总结...）

专线服务私有云关于区块链的小故事关于云计算的小故事关于网络安全的小知识有关于c语言的小程序

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

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

我对CSS选择器的认识

摘要：还有两个选择器是功能性的，它们可以给元素已有内容之前或之后添加新内容。我做了一个项目，里面包含一个测试选择器的小功能，请看这里。二归纳下文中所有的都代表任何一个有效的选择器。我对CSS选择器的认识一、简述　　　　CSS选择器是对HTML元素进行选择的筛选条件，大概可以分为两类：特征选择器——根据元素自身所具有的某种特征进行筛选，比如名称、ID、属性等；关系选择器——根据元素与其他元...

李世赞 2019-04-23 13:27 评论0 收藏0
css学习归纳总结（二）

摘要：子选择器只对直接后代有影响的选择器，而对孙子后代以及多层后代不产生作用。烂透了尽可能使用复合语法糟糕好的避免不必要的重复糟糕好的组织好的代码格式代码的易读性和易维护性成正比。标签与元素标签和p元素有什么区别呢？大多数时候他们表示的是同一样东西，但仍有细微的区别。、等指的是HTML分隔符，而元素则是由一对开始结束标签构成的，用来包含某一些内容子选择器和后代选择器的区别：后代选择器...

KnewOne 2019-08-28 18:00 评论0 收藏0
CSS > 选择器优先级与效率优化

摘要：选择器优先级与效率优化本文收集网上各处关于选择器的文章总结，并自己归纳一篇。选择器类选择器标签选择器相邻选择器子选择器后代选择器通配符选择器属性选择器伪类选择器优先级高的不一定效率高举个例子与前者效率高于后者，而后者优先级高于前者。 CSS选择器优先级与效率优化 Date: 7th of Aug, 2015 Author: HaoyCn 本文收集网上各处关于CSS...

dadong 2019-08-28 18:13 评论0 收藏0
20个编写现代CSS代码的建议

摘要：而则是专门的用于进行布局的工具。避免重复代码大部分元素的属性都是从树根部继承而来，这也是其命名为级联样式表的由来。在压缩的过程中，会将所有的空白与重复剔除掉从而减少整个文件的体积大小。本文翻译自Danny Markov 的20-Tips-For-Writing-Modern-CSS一文。本文归纳于笔者的Web 前端入门与最佳实践中CSS入门与最佳实践系列，其他的关于CSS样式指南的...

Zhuxy 2019-08-29 11:15 评论0 收藏0
CSS之选择器的运用

摘要：相邻同胞选择器使用隔开两个选择器。例如表示选择为元素的所有兄弟元素。选择器的分类选择器元素属性简介以上就是我关于选择器的理解与运用，后续有任何补充或修改均会在此基础上添加，有任何问题欢迎指出，谢谢 CSS选择器和规则：在css声明块前添加一个选择器，用来指明将css声明应用在哪些元素上。如图所示：showImg(https://segmentfault.com/img/bV6NYt?w...

BlackMass 2019-08-30 14:15 评论0 收藏0