关于CSS你应该知道的基础知识 - 选择器篇

LdhAndroid 发布于2019-08-30 14:23 / 3508人阅读

摘要：但只使用框架提供的默认样式，不能满足全部需求，还是要知道一些基础知识，才能做更好的使用框架。最近刚好有时间学习一下的基础知识，写一系列文章记录下来。选择是后面相邻的元素，所有选中的元素都是的直接子元素。

作为一个长时间来做后端服务的程序员，一直对如何展现漂亮的UI感到苦恼。好在现在很多流行的CSS框架，如Bootstarp, Bluma, Foundation, Uikit 可以帮助后端程序员快速的搭建一个看上去不那么low的UI。但只使用框架提供的默认样式，不能满足全部需求，还是要知道一些CSS基础知识，才能做更好的使用框架。最近刚好有时间学习一下CSS的基础知识，写一系列文章记录下来。

CSS选择器

用CSS代码给指定DOM元素赋予指定样式，就需要用到CSS选择器，即selector。常见的选择器有如下几种

元素选择器

类选择器

全局选择器

ID选择器

属性选择器

元素选择器

通过元素类型选择DOM元素，示例代码如下。

将所有div元素的背景颜色都设置成红色

div {
  background-color: red;
}

将所有a标签都设置成绿色

a {
  color: green;
}

类选择器

通过元素上的class属性来选择DOM元素，例如：

将class属性带有title的元素字体大小设置为42px

.title {
  font-size: 42px;
}

我是一个标题

全局择器

将页面所有元素都赋予某种样式，通常我们不会使用此种选择器。

将所有元素都设置为以border为边界计算盒模型长宽。

* {
  box-sizing: border-box;
}

ID选择器

通过元素上的id属性来选择DOM元素，例如：

将id是login-btn的元素背景设置成绿色

#login-btn {
  backgroud-color: green;
}

属性选择器

通过元素上的特定属性值来选择DOM元素，例如：

将含有disabled属性的元素设置成灰色

[disabled] {
  color: grey;
}

以上是几种基本的选择器，还有一些选择器通过元素相互结构关系来选择。

例如我们想选择某个id属性下所有的p元素。可以使用如下代码：

所有id是news下的p元素，都会是红色。

#news span {
  color: red;
}


  我是红色
  我是红色
  
    我是红色

可以使用 > 来指定只有直接子元素被选中。

id是news下的直接子元素中，是p的会被设置成红色。

#news > p {
  color: red;
}


  我是红色
  我是红色
  
    我不是红色

使用 + 来选择某个指定元素紧邻的元素，指定元素和选中的元素同属于一个父元素。

选择id是news后面紧邻的p元素，news和那个被选中的p元素都是parent元素的直接子元素。

#news + p {
  color: red;
}


  
    我不是红色
  
  
    我不是红色
  
  
    我是红色
  
  
    我不是红色
  
  
    
      我不是红色

使用 ~ 来选择某个指定元素之后相邻的元素，指定元素和选中的元素同属于一个父元素。

选择id是news后面相邻的p元素，所有选中的元素都是parent的直接子元素。

#news ~ p {
  color: red;
}


  
    我不是红色
  
  
    我不是红色
  
  
    我是红色
  
  
    我是红色
  
  
    
      我不是红色

通过伪类来选择奇偶或者指定第N个子元素

id是news的第三个直接子元素，如果是p元素就设置成红色。

#news > p:nth-child(3) {
  color: red;
}


  
    我不是红色
  
  
    我不是红色
  
  
    我是红色
  
  
    我不是红色

id是news的基数位置直接子元素，如果是p元素就设置成红色。

#news > p:nth-child(odd) {
  color: red;
}


  
    我是红色
  
  
    我不是红色
  
  
    我是红色
  
  
    我不是红色
  
  
    我不是红色

id是news的子元素中，第二个是p的元素设置成红色。

#news > p:nth-of-type(2) {
  color: red;
}


  
    我不是红色
  
  
    我不是红色
  
  
    我是红色
  
  
    我不是红色

CSS选择器就先总结这些，后续会总结一下CSS的属性继承机制。

云服务器 GPU云服务器你应该知道基础选择器css 你知道数据分析知道你

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

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

聊聊Typescript中的设计模式——装饰器篇(decorators)

摘要：本文从装饰模式出发，聊聊中的装饰器和注解。该函数的函数名。不提供元数据的支持。中的元数据操作可以通过包来实现对于元数据的操作。随着Typescript的普及，在KOA2和nestjs等nodejs框架中经常看到类似于java spring中注解的写法。本文从装饰模式出发，聊聊Typescipt中的装饰器和注解。什么是装饰者模式 Typescript中的装饰器 Typescr...

yiliang 2019-08-23 14:06 评论0 收藏0
关于CSS你应该知道的基础知识 - 样式应用篇

摘要：我是红色这种引用代码的方式在一定程度上解决了所有代码都分散写在各个元素上的问题，但是不利于代码的整体重用。需要详尽选定该元素来设置具体的样式。子元素会继承父元素的样式，等除外。上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。 CSS代码引用方式如何应用CSS代码到Ht...

fxp 2019-08-30 14:24 评论0 收藏0
关于CSS你应该知道的基础知识 - 样式应用篇

摘要：我是红色这种引用代码的方式在一定程度上解决了所有代码都分散写在各个元素上的问题，但是不利于代码的整体重用。需要详尽选定该元素来设置具体的样式。子元素会继承父元素的样式，等除外。上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。 CSS代码引用方式如何应用CSS代码到Ht...

Michael_Lin 2019-08-02 10:10 评论0 收藏0
[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
关于IT培训机构的个人看法

摘要：前言缘分与巧合，最近接触比较多的培训机构出来的人，以及看过关于培训机构的文章和问答。大部分都对培训机构很反感，其中还包括一些从培训机构出来的人。造成这样的情况，培训机构的功劳无疑是最大的。 1.前言缘分与巧合，最近接触比较多的培训机构出来的人，以及看过关于培训机构的文章和问答。虽然没在培训机构上过课，但是接触过很多培训机构出来的人，也看过一些培训机构的课程。关于培训机构，我也有自己的...

Forelax 2019-08-30 13:45 评论0 收藏0