第一部分：基本选择器

比如最常用的类选择器，就是根据类（class属性），来选择HTML元素。html元素内添加class属性，css中前置个点即可。这样，红色字体的CSS样式就绑定在这个<p>段落了。

1. <body>
2.  <p class="text1">hello world!</p>
3. </body>
4. 
5. <style>
6.  .text1{
7.    color: red;
8.  }
9. </style>

与类选择器对应的是 id 选择器。类选择器根据class属性来匹配，同理 id选择器根据id属性来匹配，但优先级比类选择器高。

注：CSS优先级从大到小为：行内CSS>内嵌式CSS>外联CSS

and CSS优先级从大到小为：ID选择器>伪类选择器>类选择器>标签选择器>通用选择器

（两种分类不同）其中在属性值的后面加上“！important”，实现最大的优先级（王炸）

1. <body>
2.  <p id="id1">hello world!</p>
3. </body>
4. 
5. <style>
6.  #id1{
7.    color: red;
8.  }
9. </style>

还有标签选择器。请看以下代码：

1. <body>
2.  <p>hello world!</p>
3. </body>
4. 
5. <style>
6.  p{
7.    color: red;
8.  }
9. </style>

该代码就是通过p{属性名：属性值}，来对所有HTML的<p>标签应用红色字体属性。当然AOE的选择器优先级比较低。

当然还有很多选择器，比如后代选择器能够实现一个HTML元素的所有子元素实现样式；并集选择器能够同时让多个不同的HTML元素类型（比如<h1>和<h2>）一次性实现同一个样式；还有关系选择器、兄弟选择器、相邻兄弟选择器、通配选择器等等。

第二部分：属性选择器

以上类、id、标签选择器都是最基本的选择器，最为常用。其次就是属性选择器。首先概括一下概念吧，属性选择器就是根据属性来选择HTML元素，来应用CSS样式（比如你的某个属性符合我的要求，我就给你应用样式）。

属性选择器中所有的例子，其HTML部分都是这部分代码：

1. <body>
2.  <p align="center">111</p>
3.  <p>222</p>
4.  <p align="left">333</p>
5. </body>

这三个<p>段落内容分别是111、222、333，对其属性分别是居中、无、左对齐。

属性选择器的基本格式： 标签名 [ 属性要求 ] { CSS属性名：属性 }

比如最基本的：

标签名[属性]

1. <style>
2.  p[align]{
3.    color: red;
4.  }
5. </style>

意思就是所有<p>标签，只要有align属性，就都符合条件，即染为红色。运行结果为111和333红色，222为黑色。

标签名[属性='属性值']

1. <style>
2.  p[align='center']{
3.    color: red;
4.  }
5. </style>

意思就是所有<p>标签，只要align属性为'center'的染为红色。运行结果为111红色，222和333为黑色。

标签名[属性^='属性值'] / 标签名[属性$='属性值']

1. <style>
2.  p[align^='c']{
3.    color: red;
4.  }
5. </style>

意思就是所有<p>标签，align属性为'c'开头的染为红色。运行结果为111红色，222和333为黑色。

同理，把^改为$，当align属性为'c'结尾的染为红色。

标签名[属性*='属性值']

1. <style>
2.  p[align*='t']{
3.    color: red;
4.  }
5. </style>

所有<p>标签，align属性包含字符串'c'的染为红色。即111、333红色。

第三部分：其他选择器

伪类选择器

伪类动态选择器，我觉得就是一个HTML元素在点击之前、之后、点击瞬间和悬停这四种情况的临时样式。当然这更加适合超链接，在一个网页的超链接上，点击前后的样式可能不一样，当然这里只是展示一下语法，可以把下面的<div>改成<a>。

1. <body>
2.  <div class="test">
3. 
4.  </div>
5. </body>
6. 
7. <style>
8.  .test{
9.    /* 基础样式 */
10.     width: 100px;
11.     height: 100px;
12.   }
13.   .test:link{
14.     /* 未被点击 */
15.     background-color: grey;
16.   }
17.   .test:hover{
18.     /* 鼠标悬停 */
19.     background-color: red;
20.   }
21.   .test:active{
22.     /* 鼠标点击瞬间 */
23.     background-color: black;
24.   }
25.   .test:visited{
26.     /* 点击之后 */
27.     background-color: teal;
28.   }
29. </style>

伪装结构选择器（花里胡哨，感觉没啥用）

利用文档结构的特殊性来匹配元素，比如父元素只有一个子元素，等等。

比如 标签名：only-child 表示该类的父类只有其一个元素的情况。

比如 标签名：only-first 表示匹配该类的父类的第一个元素。其中：标签名：nth-child(3) 表示第三个。

比如 标签名：only-last 表示匹配该类的父类的最后一个元素。其中：标签名：nth-last-child(3) 表示倒数第三个。

其他的还有很多，但个人感觉都是花里胡哨，基本不会去用的......

标签名：only-of-type 表示子元素唯一；

标签名：first-of-type 表示匹配第一个子元素；

标签名：last-of-type 表示匹配最后一个子元素；nth-of-type(3)同理

标签名：empty 表示没有子元素的HTML元素

状态伪类

就是HTML元素的状态......比如是否可见

标签名：enabled 表示可见的HTML属性 ； disenabled同理

标签名：checked 表示选中的HTML元素 比如单选框、复选框

标签名：not() 否定伪类比如下方代码，把id不是b的都变为红色。

1. <body>
2.  <p id="a">111</p>
3.  <p id="b">222</p>
4.  <p id="c">333</p>
5. </body>
6. 
7. <style>
8.  p:not(#b){
9.    color: red;
10.   }
11. </style>

最后一个比较好玩的东西是

目标伪类选择器

如果让你实现一个功能：在HTML中的瞄的基础之上，跳转到瞄内容的时候，背景显示红色。

像这样，点击“导航1”，跳转到内容111，并且显示红色背景。如下图所示：

点击“导航3”，跳转到内容333，并且显示红色背景。如下图所示：

这就需要用到“ 标签名：target ”，代码如下所示：

1. <body>
2.  <a href="#a">导航1</a>
3.  <a href="#b">导航2</a>
4.  <a href="#c">导航3</a>
5. 
6.  <p id="a">内容111</p>
7.  <p id="b">内容222</p>
8.  <p id="c">内容333</p>
9. </body>
10. 
11. 
12. <style>
13.   p:target{
14.     background-color: red;
15.   }
16. </style>

伪元素（经常需要用到首字母大写）

比如要实现一个段落第一个字符红色（就像本行这样）

1. <style>
2.  p::first-letter{
3.    color: red;
4.  }
5. </style>

第一行红色......

1. <style>
2.  p::first-line{
3.    color: red;
4.  }
5. </style>

前置@，后置同理

1. <style>
2.  p:before{
3.    content: "@";
4.  }
5. </style>

第四部分：字体/段落/列表类属性

前面所接触到的选择器，我感觉就是从HTML模块那里，选出我们要作用的HTML元素。那么我们选出来了，该则么去把我们想要的效果展现出来呢，这就需要我们的CSS属性来套用实现。先来总结一下字体这一块的属性。

字体大小：

font-size: 30px;

字体颜色：（取其一）

1. color: red;
2. color:rgb(255,0,0);
3. color: #FF0000;

粗体斜体：

1. font-style: italic;
2. /* 设置字体样式 正常normal/斜体italic */
3. font-weight: 700;
4. /* 设置字体粗细，400~500正常 700以上粗体 */

字体样式：（通常写一种即可）

1. font-family: "黑体","bodoni mt";
2. /* 字体样式，可多种，用逗号隔开如果没有则默认字体*/

服务器字体：（基本用不到，可能面试会问吧）本地未安装也可以用该字体

1. @font-face {
2.  font-family:自定义字体;
3.  src: url('http://www.baidu.com');
4. }

文字阴影：

1. text-shadow: 5px 5px 5px red;
2. /* 水平阴影/垂直阴影/模糊距离/阴影颜色 */

首行缩进：

text-indent: 2em;

行高：（当行高 = 字体大小可以实现垂直居中的效果）

line-height: 20px;

间距：

1. letter-spacing: 5px;
2. /* 字符之间的间距 */
3. word-spacing: 50px;
4. /* 单词之间的间距 */

文本对齐：

text-align: left;

其他：

1. white-space: normal;
2. /* 单词之间多个空格normal保留一个/pre保留多个/nowrap强制不换行 */
3. text-overflow: ellipsis;
4. /* clip属性直接修剪溢出文本/ellipsis修剪溢出文本显示省略号表记 */

列表类：

1. ul{
2.  list-style-type: ;
3.  /* 设置列表项标记的类型 */
4.  /* none无标记/disc默认实心圆/circle空心圆/square实心方块 */
5.  /* decimal数字/upp(low)er-roman大小写罗马字符 */
6.  /* upp(low)er-latin大小写英文/lower-greek希腊字符 */
7. 
8.  list-style-image: url(img/tupian1.jpg);
9.  /* 设置有序/无序列表的标记图像 */
10. 
11.   list-style-position: outside;
12.   /* 设置列表项标记的位置 */
13.   /* inside左边缩进大一点/outside小一点 */
14. }

第五部分：盒模型/定位浮动

盒模型

指的是比较像盒子的一个模型，就像浏览器调试窗口的这样

蓝色部分为内容部分，padding为内容和边框的间距，border为边框，margin为边框外侧离父容器的距离。我们设计如下代码：

1. <style>
2.  .d{
3.    width: 100px;
4.    height: 50px;
5.    padding: 20px;
6.    border: 10px solid;
7.    margin: 20px;
8.  }
9. </style>

运行结果如下图所示。其中浅绿色部分为浏览器调试窗口的选中效果（即padding属性的20px）。黑色的粗实线（solid）为border属性的10px效果，最外面的白色部分为该组件离父组件（<body>）20个px。

圆角优化和阴影

在上方类选择器的基础代码之上，添加如下代码：

1. border-radius: 2em;/* 基础圆角 */
2. border-radius: 1em 10em 1em 10em;/* 对角线椭圆 */
3. border-radius: 10em 10em 10em 10em;/* 圆 */
4. 
5. box-shadow: 20px 20px 20px red inset;/* 阴影效果 水平偏移/垂直偏移/偏移距离/阴影颜色/是否内阴影(inset) */

border-radius（圆角实现）三种方式取其一即可。最终效果图：

CSS定位和浮动

（纯个人理解）HTML标签分为块元素和行元素，其中行元素是按照从左往右依次排列的，比如这样

<a>111</a> <a>111</a> <a>111</a>

在网页上会在一行显示9个1，因为<a>是一种行元素。

同理，如果是块元素，比如<p>

<p>111</p>   <p>111</p>   <p>111</p>

那么会分三行显示，这就是行元素和块元素的区别。

那么问题来了，我如果想让三个<p>在同一行显示，如何实现？

先来解释一下CSS定位的概念，也就是说你一个HTML元素在网页的哪里？

自动定位：默认的定位方式。

相对定位：相对于我原本应该在的地方，的偏移值。（设置偏移值方法 top:20px;left:20px; ）

绝对定位：相对于父组件的位置（要求父组件也是绝对定位，否则再往上找）

固定定位：相对于浏览器窗口（<body>）而言的位置

1. position: static;
2. /* 自动定位 */
3. position: relative;
4. /* 相对定位 */
5. position: absolute;
6. /* 绝对定位 */
7. position: fixed;
8. /* 固定定位 */

其次是CSS浮动的概念。浮动就是可以打破“块元素竖着排，行元素横着排”这个规则，比如实现三个<div>块横着排列

1. 
2. <body>
3.  <div class="d1"></div>
4.  <div class="d2"></div>
5.  <div class="d3"></div>
6. </body>
7. 
8. <style>
9.  .d1{
10.     background-color: gray;
11.     float: left;
12.   }.d2{
13.     background-color: rosybrown;
14.     float: left;
15.   }.d3{
16.     background-color: black;
17.     clear: left;
18.   }div{
19.     width: 100px;
20.     height: 100px;
21.   }
22. </style>

如果d3没有clear: left;这行代码，将会被覆盖，无法显示，必须清除左方元素对自己的影响，方可正常使用。效果如下：

CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动

第一部分：基本选择器

比如最常用的类选择器，就是根据类（class属性），来选择HTML元素。html元素内添加class属性，css中前置个点即可。这样，红色字体的CSS样式就绑定在这个<p>段落了。

与类选择器对应的是 id 选择器。类选择器根据class属性来匹配，同理 id选择器根据id属性来匹配，但优先级比类选择器高。

还有标签选择器。请看以下代码：

第二部分：属性选择器

以上类、id、标签选择器都是最基本的选择器，最为常用。其次就是属性选择器。首先概括一下概念吧，属性选择器就是根据属性来选择HTML元素，来应用CSS样式（比如你的某个属性符合我的要求，我就给你应用样式）。

标签名[属性]

标签名[属性='属性值']

标签名[属性^='属性值'] / 标签名[属性$='属性值']

标签名[属性*='属性值']

第三部分：其他选择器

伪类选择器

状态伪类

目标伪类选择器

伪元素（经常需要用到首字母大写）

第四部分：字体/段落/列表类属性

第五部分：盒模型/定位浮动

盒模型

圆角优化和阴影

CSS定位和浮动

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动

第一部分：基本选择器

比如最常用的类选择器，就是根据类（class属性），来选择HTML元素。html元素内添加class属性，css中前置个点即可。这样，红色字体的CSS样式就绑定在这个<p>段落了。

与类选择器对应的是 id 选择器。类选择器根据class属性来匹配，同理 id选择器根据id属性来匹配，但优先级比类选择器高。

还有标签选择器。请看以下代码：

第二部分：属性选择器

以上类、id、标签选择器都是最基本的选择器，最为常用。其次就是属性选择器。首先概括一下概念吧，属性选择器就是根据属性来选择HTML元素，来应用CSS样式（比如你的某个属性符合我的要求，我就给你应用样式）。

标签名[属性]

标签名[属性='属性值']

标签名[属性^='属性值'] / 标签名[属性$='属性值']

标签名[属性*='属性值']

第三部分：其他选择器

伪类选择器

状态伪类

目标伪类选择器

伪元素（经常需要用到首字母大写）

第四部分：字体/段落/列表类属性

第五部分：盒模型/定位浮动

盒模型

圆角优化和阴影

CSS定位和浮动

热门文章

最新文章

相关课程

相关电子书

相关实验场景

CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动