你应该知道的CSS基础知识——选择器篇

作为一个长期做后端服务的程序员，一直为如何呈现漂亮的UI而苦恼。幸运的是，许多流行的CSS框架，如Bootstarp、Bluma、Foundation和Uikit，都可以帮助后端程序员快速构建一个看起来不那么low的UI。但是，仅使用框架提供的默认样式并不能满足所有需求。您仍然需要了解一些基本的CSS知识才能更好地使用该框架。最近正好有时间学习一下CSS的基础知识，写个系列文章记录一下。CSS选择器使用CSS代码为指定的DOM元素赋予指定的样式，就需要CSS选择器，即选择器。常用的选择器有以下几种：元素选择器类选择器全局选择器ID选择器属性选择器元素选择器按元素类型选择DOM元素，示例代码如下。设置所有div元素的背景色为红色div{background-color:red;}设置所有a标签为绿色a{color:green;}类选择器通过元素上的class属性选择DOM元素，例如:将class属性中有title的元素的字体大小设置为42px.title{font-size:42px;}我是title全局选择器给所有元素赋值页面到某个这种样式，通常我们不会使用这种选择器。设置所有元素以border为边界来计算盒子模型的高和宽。*{box-sizing:border-box;}ID选择器通过元素上的id属性来选择DOM元素，例如：将id为login-btn的元素的背景设置为绿色#login-btn{background-color：绿色的;}我是登录按钮属性选择器通过元素上的具体属性值来选择DOM元素，例如：将包含disabled属性的元素设置为灰色[disabled]{color:grey;Iamunavailablebutton以上是几种基本的选择器，有些选择器是通过元素之间的结构关系来选择的。比如我们要选取某个id属性下的所有p元素。可以使用如下代码：news下所有id为p的元素都会变成红色。#newsspan{color:red;}

我是红色的

我是红色的