CSS3 选择器
css3八股文
css3八股文引言概述：CSS3是前端开发中常用的一种技术，它可以实现丰富多样的样式效果，提升网页的交互性和美观性。
本文将详细介绍CSS3的八股文，包括选择器、盒模型、定位、动画以及响应式布局等方面的内容。
正文内容：一、选择器1.1 基本选择器- 标签选择器：选择所有指定标签的元素。
- 类选择器：选择具有指定类名的元素。
- ID选择器：选择具有指定ID的元素。
1.2 层次选择器- 后代选择器：选择某个元素的所有后代元素。
- 子元素选择器：选择某个元素的直接子元素。
- 相邻兄弟选择器：选择某个元素的下一个兄弟元素。
1.3 伪类选择器- :hover：当鼠标悬停在元素上时应用的样式。
- :nth-child(n)：选择父元素下的第n个子元素。
二、盒模型2.1 内边距（padding）- padding-top：元素上边距离内容的距离。
- padding-bottom：元素下边距离内容的距离。
2.2 边框（border）- border-width：边框的宽度。
- border-color：边框的颜色。
2.3 外边距（margin）- margin-left：元素左边距离相邻元素的距离。
- margin-right：元素右边距离相邻元素的距离。
三、定位3.1 相对定位（relative）- top：元素相对于其正常位置上方的偏移量。
- left：元素相对于其正常位置左侧的偏移量。
3.2 绝对定位（absolute）- top：元素相对于其包含元素上方的偏移量。
- left：元素相对于其包含元素左侧的偏移量。
3.3 固定定位（fixed）- top：元素相对于浏览器窗口上方的偏移量。
- left：元素相对于浏览器窗口左侧的偏移量。
四、动画4.1 过渡（transition）- transition-property：指定过渡效果应用的CSS属性。
- transition-duration：指定过渡效果的持续时间。
20第5章 CSS3高级选择器
德才兼备 知行合一
17
5.2.3 结构化伪类选择器
3、 :empty选择器
:empty选择器用于来选择没有内容的元素。
德才兼备 知行合一
18
5.2.3 结构化伪类选择器
4、 :target选择器
:target选择器可用于选取当前活动的目标元素。当用户单击了超链接， 而且此链接地址为本页面内的目标位置，:target选择器样式起作用。
德才兼备 知行合一
13
5.2.2 关系选择器
子代选择器（>）
相邻兄弟选择器（+）和 普通兄弟选择器（~）
德才兼备 知行合一
14
5.2.3 结构化伪类选择器
CSS3常用的结构化伪类选择器有: root选择器、:not选择器、:empty选择器、 :target选择器、:only-child选择器、 :first-child选择器、:last-child选择器、 :nth-child（n）选择器、:nth-last-child（n）选择器、 :nth-of-type（n）选择器、:nth-last-of-type（n）选择器。
:first-child选择器和:last-child选择一个子元素。如果父元素内子元素较多，我们可以用:nth-child（n）
选择器和:nth-last-child（n）选择器分别来选择第n个或者倒数第n个元素。
n可以为数值，也可以为odd（奇数）或even（偶数），odd和even分别
E[att^=val]属性选择器 E[att$=val]属性选择器 E[att*=val]属性选择器
德才兼备 知行合一
10
5.2.2 关系选择器
本节介绍3个关系选择器，分别是子代选择器（>）、 相邻兄弟选择器（+）、普通兄弟选择器（~）。
CSS3：：selection选择器
CSS3：：selection选择器⼀、介绍之前看到有些⽹站选中内容的颜⾊和背景⾊都不是平时看到的蓝⾊和⽩⾊。
今天有兴趣查看了⼀下，原来是⼀个很简单的CSS3的选择器::selection的⽤法。
上例⼦：<style>.selectColor::selection{color:#fff;background:pink;}.selectColor::-moz-selection{color:#fff;background:pink;}.selectColor::-webkit-selection{color:#fff;background:pink;}</style><body><p>普通⽂本，不设置::section,选中时⽂本的颜⾊为⽩⾊，背景⾊为蓝⾊</p><p class="selectColor">选择⽂本的颜⾊为⽩⾊，背景⾊为粉⾊</p></body>Note:只能向::selection选择器应⽤少量CSS属性：color、background、cursor以及outline。
浏览器⽀持：IE9+、Opera、Google Chrome 以及 Safari 中⽀持 ::selection 选择器。
Firefox ⽀持替代的 ::-moz-selection。
⼆、应⽤举例看过djagno⽂档的都知道，它的页⾯风格是这样的我选中⼀部分⽂字，效果是这样的可以看出，整体风格很统⼀，选中⽂字背景的浅绿⾊也让⼈感觉很舒服，这种细节的考虑⽆疑会提升⽤户体验。
它的样式也很简单，就⼀⾏我的博客现在也应⽤了这个样式，哈哈^_^。
css3选择题使用方法详解
css3选择题使用方法详解css3选择题使用方法详解一通用选择器1 *{}通配选择符(CSS2)：适合所有元素对象。
2 E类型(HTML)选择符（CSS1）：以文档语言对象类型DOM作为选择符。
3 E#myid是id选择符（CSS1）：以唯一标识符id属性等于myid 的E对象作为选择符。
4 E.myclass是类class选择符(CSS1)：以class属性包含myclass 的E对象作为选择符。
5 E F：包含选择符(CSS1)：选择所有被E元素包含的F元素。
CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。
只要F在E的后边，E只是作为一个参考。
E~F { background:#ff0; }2 临近(相邻)选择器(css2)：E+F{}：EF元素相邻，即选择紧贴在E 元素之后F元素。
3 包含（子）选择器(css2)：E>F{}：EF不可以隔代，E只能匹配到下一个相邻辈F。
二属性选择器1．E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。
2．E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。
3．E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。
4．E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
5．E[att] 选择具有att属性的E元素。
6．E[att="val"]选择具有att属性且属性值等于val的E元素。
7．E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
CSS3中的子元素选择器
CSS3中的⼦元素选择器⽬录：1.⼦元素选择器>，⽤来选中某个元素的第⼀级⼦元素，也就是⼉⼦元素<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* ⼦代选择器,只对⼉⼦元素有效 */p>strong{color: red;}</style></head><body><p>这是p标签，<strong>表⽰⼀个段落</strong></p><p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p></body></html>2.兄弟选择器+，两个元素有同⼀个⽗元素，只对邻近的第⼀个元素起作⽤<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 兄弟选择器,只对相邻的⼀个元素起作⽤ */h3+p{color: #008000;font-size: 18px;font-family: "楷体";}</style></head><body><h3>望庐⼭瀑布</h3><p>⽇照⾹炉⽣紫烟，遥看瀑布挂前川。
</p><p>飞流直下三千尺，疑是银河落九天。
css3 手册所有
css3 手册所有一、引言CSS（层叠样式表）是一种用于描述文档样式的标记语言，具体包括字体、颜色、布局等方面的样式定义。
CSS3是CSS的最新版本，是Web开发中常用的样式定义语言之一。
本手册将详细介绍CSS3的各项属性及其使用方法。
二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一，通过元素名称来选择文档中的元素。
例如，使用`p`选择器可以选择所有的`<p>`标签。
2. 类选择器类选择器用于选择带有特定类名的元素。
通过在类名前面加上点号（.），例如`.red`，可以选择具有`red`类的元素。
3. ID选择器ID选择器用于选择具有特定ID的元素。
通过在ID名称前面加上井号（#），例如`#header`，可以选择具有`header`的ID的元素。
4. 属性选择器属性选择器用于选择具有特定属性值的元素。
通过在属性名前加上方括号（[]），例如`[type="text"]`，可以选择type属性值为"text"的元素。
5. 伪类选择器伪类选择器用于选择元素的特殊状态。
常见的伪类选择器有`hover`、`active`和`visited`等。
6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。
常见的伪元素选择器有`::before`和`::after`等。
三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。
例如，`font-family: Arial, sans-serif;`可以设置字体为Arial。
2. 颜色可以使用`color`属性设置元素的文本颜色。
例如，`color: red;`可以将文本颜色设置为红色。
3. 背景可以使用`background-color`属性设置元素的背景颜色。
例如，`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。
四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。
CSS3属性选择器与（：not）选择器
CSS3属性选择器与（：not）选择器⼀：css3属性选择器img[alt]{border:2px dashed #000;}这个选择器会匹配页⾯标签中任何⼀个含有alt属性的图⽚标签。
还可以通过设定属性值来缩⼩匹配范围：如下代码：img[alt="atwi_oscar"]{border:2px dashed #000;}css3的⼦字符串匹配属性选择器（1）‘匹配开头’的属性选择器依法如下：Element[attribute^="value"]，实例代码如下：img[alt^="filem"]{border:2px dashed #000;}(2)'匹配包含内容'的属性选择器Element[attribute*="value"]，实例代码如下：img[alt*="filem"]{border:2px dashed #000;}(3)'匹配结尾'的属性选择器Element[attribute$="value"]，实例代码如下：img[alt$="filem"]{border:2px dashed #000;}⼆：(:not)选择器否定伪类选择器，⽤于选择不满⾜某些条件的元素，例如：nav ul li:not(.internal) a{color:#000;}多提⼀点关于伪元素的：对伪元素的修正P:first-line 会选中<p>标签的第⼀⾏内容，P:first-letter会选中其中第⼀个字母。
css3要求对伪元素使⽤2个冒号以便对伪类进⾏区别。
但IE8及更低的版本⽆法识别2个冒号的语法，它们只识别⼀个冒号。
C SS选择器汇总详细可参考：下⾯附⼀个详细的css选择器的表格：选择器例⼦例⼦描述CSS .intro选择 class="intro" 的所有元素。
CSS3属性选择器详解及双色球实战开发
CSS3属性选择器详解及双色球实战开发
在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。
如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？
这一节中，我将使用双色球案例和文档类型提示图标案例来引入和应用属性选择器。
双色球案例：
大家都知道，双色球共有7个球，6个红球，1个蓝球。
首先我们先在页面上面定义7个span标签：
接着我们在外部样式表中，通过标签选择器来调整数字球之间的距离:
有人会问，你样式怎么都写在同一个span标签选择器里了，怎么还没讲到属性选择器呢？
别急，上面这些样式都是所有球体共有的属性样式，故都写同一个标签里了。
我们知道双色球，前六个为红球，最后一个为蓝球，那这个到底怎么处理呢？
我们先浏览一下知识点，属性选择器是从CSS2开始引入进来的，下面是CSS2中定义的属性选择器:
细心的网友可能已经发现，在第一个球中，我们同样设置了blueball样式，但是它依然是红色背景，这就证明了
现在我们在外部样式表中应用样式:
以上即为利用属性选择器，给文档下载链接应用相应图标的代码演示。
css3多类选择器用法
css3多类选择器用法================CSS3的出现，无疑为网页设计带来了更多的可能性。
其中，多类选择器（MultipleClassSelectors）是一种非常实用的新特性，它允许我们在同一个元素上应用多个类。
这对于那些需要动态改变样式，或者需要在不同的地方使用同一元素的不同样式的情况来说，是非常有用的。
###多类选择器的定义和用法在CSS中，类选择器以点（.）开始，后面跟着的是类的名称。
多类选择器允许你在一个元素上应用多个类。
只需在类名之间用空格分隔即可。
例如，假设我们有一个div元素，我们希望根据其内容和状态应用不同的样式：```html<divclass="class1class2class3">我是一个div元素</div>```我们可以在CSS中使用多类选择器来为这个元素应用不同的样式：```css.class1{color:red;}.class2{background-color:yellow;}.class3{font-size:20px;}```这样，当这个div元素的类为"class1"时，它的文字颜色会是红色；当它的类为"class2"时，背景色会变成黄色；当它的类为"class3"时，字体大小会变为20px。
###多类选择器的优势使用多类选择器，你可以在一个元素上应用多个样式，而无需为每个样式创建单独的元素。
这大大提高了代码的效率和可读性，也使得网页布局更加灵活和动态。
此外，多类选择器还允许你在不同的地方使用同一元素的不同样式，这在响应式设计中尤其重要。
###多类选择器的限制和注意事项虽然多类选择器非常有用，但也有一些限制和注意事项：1.类的数量：理论上，你可以在同一个元素上应用无限个类，但是这可能会影响网页的性能，因为每个额外的类都需要额外的CSS规则和渲染成本。
CSS3选择器nth-child（n）实现隔几行选择元素
3.li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
隔三行设置颜色
选择器匹配属于其父元素的第n个子元素不论元素的类型
CSS3选择器nth-child（n）实现隔几行选择元素
nth-child(n)，n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素，不论元素的类型。
序号写法：
1.li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
倍数写法：
1.li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
倍数分组匹配：
1.li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
2.$("tr:nth-child(3n+2)").css("background","#ccc");
1.$("tr:nth-child(3n)").css("background","#eee");
隔两行换一个颜色
1.$("tr:nth-child(2n)").css("background","#eee");
css3
参数
各种长度单位都可以：px，%，… %有时很方便 但宽高不一致时不太好
圆角(2)
用法
1个：四个方向都一样 border-radius: 一样 2个：对角 border-radius: 左上&右下 右上&左下 3个：斜对角 border-radius: 左上 右上&左下 右下 4个：全部，顺时针 border-radius: 左上 右上 右下 左 练习：风车效果
盒模型阴影
用法 box-shadow:[inset] x y blur [spread] color 参数 [inset]：投影方式 inset：内投影 不写：外投影 x、y：阴影偏移 blur：模糊半径 [spread]：扩展阴影半径 先扩展原有形状，再开始画阴影 Color：颜色 练习：做一个有左上内阴影和右下外阴影的效果
实例：边框背景
子元素的padding设置百分比 ：不管哪个方向都是父元素宽度的百分比
Css3分栏布局
多列
column-width 指定列的宽度 column-count 要分的列数 column-gap 列之间的距离 column-rule 栏目间隔线 /cssref/css3-pr-columnrule-style.html //间隔线类型
Css3 选择器 –结构性伪类（2）
E:first-child 表示E父元素中的第一个子节点，且类型为E E:last-child 表示E父元素中的最后一个子节点，且类型为E E:first-of-type 表示E父元素中的第一个E子节点 E:last-of-type 表示E父元素中的最后一个E子节点 E:only-child表示E父元素中只有一个子节点。注意：不包含文本 节点 E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子 节点的类型必须是E。注意：不包含文本节点
css3之结构性伪类选择器
css3之结构性伪类选择器本篇介绍伪类选择器以及伪元素。
1、类选择器在 css 中可以使⽤类选择器把相同的元素定义成不同的样式。
⽐如：p.left{text-align: left}p.rigth{text-align: right}2、伪类选择器区别类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，⽽伪类选择器是 CSS 中已经定义好的选择器，不可以随意起名。
常见的伪类选择器：a:link{ color: #ff6600 } /* 未被访问的链接 */a:visited{ color: #87b291 } /* 已被访问的链接 */a:hover{ color: #6535b2 } /* ⿏标指针移动到链接上 */a:active{ color: #55b28e } /* 正在被点击的链接 */3、伪元素选择器伪元素选择器，针对于 CSS 中已经定义好的伪元素使⽤的选择器。
使⽤⽅法：选择器：伪元素 {属性：值}与类配合使⽤选择器. 类名：伪元素 {属性：值}四个伪元素选择器。
1）、first-line 伪元素选择器first-line 伪元素选择器⽤于向某个元素中的第⼀⾏⽂字使⽤样式。
2）、first-letter 伪元素选择器first-letter 伪元素选择器⽤于向某个元素中的⽂字的⾸字母（欧美⽂字）或第⼀个字（中⽂或者是⽇⽂等汉字）使⽤样式。
3）、before 伪元素选择器before 伪元素选择器⽤于在某个元素之前插⼊⼀些内容。
4）、after 伪元素选择器after 伪元素选择器⽤于在某个元素之后插⼊内容。
-----------------------------例⼦<!DOCTYPE html><html><head lang="zh"><title>伪元素</title><style>p:first-line {color: #f60;}p:first-letter {color: green;font-size: 24px;}li {list-style: none;}li:before {content: '__before前⾯追加__';color: red;}li:after {content: '__after追加__';color: #ff6600;}</style></head><body><p>在CSS中，主要有四个伪元素选择器<br />first-line伪元素选择器⽤于向某个元素中的第⼀⾏⽂字使⽤样式。
css3面试题及答案
css3面试题及答案CSS（层叠样式表）是前端开发中用于控制网页样式的一种标记语言。
CSS3是CSS的升级版，引入了许多新的特性和功能。
在前端开发工作中，掌握CSS3的知识是必要的，而在面试过程中，也经常会被问及CSS3的相关问题。
本文将提供一些常见的CSS3面试题及它们的相应答案。
一、CSS3选择器1. 介绍CSS3选择器的概念及常用的几种选择器。
答案：CSS3选择器是用于选择HTML或XML文档中的特定元素的一种方式。
常用的CSS3选择器包括：- 元素选择器（Element Selector）：通过元素名称来选择元素，例如p选择器用于选择所有的段落元素。
- 类选择器（Class Selector）：通过元素类名来选择元素，以“.”开头，例如.class选择器用于选择class属性为class的元素。
- ID选择器（ID Selector）：通过元素ID来选择元素，以“#”开头，例如#id选择器用于选择id属性为id的元素。
- 属性选择器（Attribute Selector）：通过元素的属性来选择元素，例如[type="text"]选择器用于选择type属性为text的元素。
- 伪类选择器（Pseudo-class Selector）：通过元素的状态或位置来选择元素，以“:”开头，例如:hover选择器用于选择鼠标悬停在元素上的状态。
2. 什么是伪元素选择器？请举例说明。
答案：伪元素选择器用于选择元素中的特定部分或位置，以“::”开头。
常用的伪元素选择器包括：- ::before：在元素内容之前插入内容。
- ::after：在元素内容之后插入内容。
- ::first-letter：选择元素的第一个字母。
- ::first-line：选择元素的第一行。
举例说明：使用::before伪元素选择器可以在某个元素的内容前插入内容，例如：```p::before {content: "前缀 ";}```二、CSS3动画与过渡1. CSS3过渡和动画有什么区别？答案：CSS3过渡（Transition）是在元素的一种状态到另一种状态之间平滑地过渡，可以实现简单的动画效果。
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。
CSS3中新增了 3 种属性选择器：E[att^=value]、E[att$=value] 和 E[att*=value]1.E[att^=value] 属性选择器 E[att^=value] 属性选择器是指选择名称为 E 的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的⼦字符串。
其中 E 是可以省略的，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id^=section] 表⽰匹配包含 id 属性，且 id 属性值是以 “section” 字符串开头的 div 元素。
2.E[att$=value] 属性选择器 E[att$=value] 属性选择器是指选择器名称为 E 的标记，且该选择器定义了 att 属性，att 属性值包含后缀为 value 的⼦字符串。
与E[att$=value]选择器⼀样，E元素可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id$=section]表⽰匹配包含 id 属性，且 id 属性值是以 “section” 结尾的 div 元素。
3.E[att*=value] 属性选择器 E[att*=value] 选择器⽤于选择名为 E 的标记，且该标记定义了 att 属性，att 属性值包含 value ⼦字符串，该选择器与前两个选择器⼀样，E 元素也可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id*=section] 表⽰匹配包含 id 属性，且 id 属性包含 “section” 字符串的 div 元素。
关系选择器 CSS3中的关系选择器主要包括⼦代选择器和兄弟选择器，其中⼦代选择器由符号 “>” 连接，兄弟选择器由符号 “+”和 “~” 连接。
1.⼦代选择器（>） ⼦代选择器主要⽤来选择某个元素的第⼀级⼦元素，如希望选择只作为 h1 元素⼦元素的 strong 元素，可以写为：h1 > strong。
css3新特性
css3新特性c3有哪些新特性介绍css3是CSS（层叠样式表）技术的升级版本。
CSS3已完全向后兼容，所以你就不必改变现有的设计，浏览器将永远⽀持CSS2。
⼀些最重要的css3模块包括：选择器盒模型背景和边框⽂字特效2D/3D转换动画多列布局⽤户界⾯ ......新特性⼀、css3的新选择器1、标签选择器（元素选择器、标记选择器）div {}1）所有的标签都可以作为选择器使⽤2）适⽤于更改某⼀种元素的默认样式2、id选择器<div id="main"></div>#main {}1）id是元素的唯⼀标志，单个页⾯中不可重复2）id的命名不要⽤关键字（标签和属性名）3）⼀般使⽤id给⼤容器命名3、class选择器（类选择器）<div class="box"></div>.box {}1）class名称可以重复使⽤，适⽤于设置⼀类的样式2）多个class名⽤空格隔开，例<div class="box wrap"></div>4、通配符* {}通配符写法为*，含义就是所有标签常⽤于重置样式* { margin: 0; padding: 0; }5、群组选择器.box, #main, p {}当有多个选择符应⽤相同样式时，可以将选择符⽤英⽂逗号,分割的⽅式合并为⼀组6、后代选择器.box p {}使⽤空格隔开两个选择符，上⽅例⼦代表拥有box类容器⾥的所有p标签7、伪类选择器a:link {} /* 未访问的链接状态 */a:visited {} /* 已访问的链接状态 */a:hover {} /* ⿏标滑过链接状态 */a:active {} /* ⿏标按下去时的状态 */说明：1）当这4个超链接伪类选择符联合使⽤时，应注意他们的顺序，正常顺序为：a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；例如：a{color:red;} a:hover{color:green;}表⽰超链接的三种状态都相同，只有⿏标划过变化颜⾊⼆、盒模型盒模型是css布局的基⽯，它规定了⽹页元素如何显⽰以及元素间相互关系。
CSS3学习
语法描述:语法描述:4.其他CSS3选择器1.E~F:通用兄弟元素选择器。
选择匹配F的所有元素，且匹配元素位于匹配E的元素后面。
2.E:not(s):否定伪类选择器。
选择匹配E的所有元素，且过滤掉匹配s选择符的任意元素。
E:not(s)选择器相当于二次过滤，适合精确选择元素。
E[att*="val"]属性att的值包含"val"字符串的元素CSS3学习一、CSS3新增选择器1.CSS3属性选择器E[att^="val"]属性att的值以"val"开头的元素E[att$="val"]属性att的值以"val"结尾的元素作用：这个属性允许你为元素添加边框背景。
2.border-image属性二、CSS3设置边框属性1.border-radius属性作用:这个属性允许你为元素添加圆角边框。
语法:3.E:target:目标伪类选择器类型。
选择器匹配E的所有元素,且匹配元素被相关URL指向。
该选选择器,只有当存在的URL指向该匹配的元素时,样式效果才能够起效。
source slice width outset repeat语法描述:值h-shadowv-shadowblurspreadcolor语法：语法描述:语法：语法描述：值border-boxpadding-boxcontent-box 语法：语法描述:值lengthpercentagecovercontain四、CSS3设置文本字体颜色描述background-clip:border-box\padding-box\content-box描述默认值。
从边框区域向外裁剪背从补白区域外裁剪背景从内容区域向外裁剪背景定义边框背景图像的偏移位定义边框背景图像的重复性,重复(repeat(round)定义边框的背景图片源,即定义如何裁切背景图丁一边看背景图像的显示大小(即3.box-shadow属性作用:可以设置一个或多个下拉阴影的框。
css3中的三种选择器
css3中的三种选择器1. 选择器：CSS3新增了许多灵活查找元素的⽅法，极⼤的提⾼了查找元素的效率和精准度。
CSS3选择器与jQuery中所提供的绝⼤部分选择器兼容1. ⼀属性选择器：a) E[attribute] 表⽰存在attr属性即可；div[class]b) E[attr=val] 表⽰属性值完全等于val；div[class=mydemo]c) E[attr*=val] 表⽰的属性值⾥包含val字符并且在“任意”位置；div[class*=mydemo]d) E[attr^=val] 表⽰的属性值⾥包含val字符并且在“开始”位置；div[class^=mydemo]e) E[attr$=val] 表⽰的属性值⾥包含val字符并且在“结束”位置；div[class$=demos]2. ⼆伪类选择器-伪元素选择器：a) 之前学习的：a:hover a:link a:active a:visitedb) 以某元素相对于其⽗元素或兄弟元素的位置来获取⽆素的结构伪类f) E:first-child:查找E这个元素的⽗元素的第⼀个⼦元素Eg) E:last-child:最后⼀个⼦元素h) E:nth-child(n): 第n个⼦元素，计算⽅法是E元素的全部兄弟元素i) E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算j) E:nth-child(even): 所有的偶数k) E:nth-child(odd): 所有的奇数l) E:nth-of-type(n):指定类型m) E:empty 选中没有任何⼦节点的E元素，注意，空格也算⼦元素n) E:target 结合锚点进⾏使⽤，处于当前锚点的元素会被选中o) 重点说明：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取⽆效p) 案例代码：/*第⼀个li元素*/li:first-child{color: red;}/*最后⼀个元素*/li:last-child{color: green;}/*获取第10个元素*/li:nth-child(10){color: orange;}/*获取倒数第3个li元素*/li:nth-last-child(3){color: purple;}/*获取索引顺序为6的倍数的li元素*/li:nth-child(6n){text-decoration: underline;border: 1px solid red;}/*获取所有索引为偶数的li元素*/li:nth-child(even){border: 1px solid black;}/*获取前5个li元素*/li:nth-child(-n+5){background-color: #ddd;}3. /*获取除了第⼀个外的元素*/li:nth-child(n+2){}c) n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等三伪元素选择器：a) 重点：E::before、E::afteri. 是⼀个⾏内元素，需要转换成块:display:block float:** position:ii. 必须添加content,哪怕不设置内容，也需要content:””iii. E:after、E:before 在旧版本⾥是伪类，在新版本⾥是伪元素，新版本下E:after、E:before会被⾃动识别为E::after、E::before，按伪元素来对待，这样做的⽬的是⽤来做兼容处理iv. E::before: 定义在⼀个元素的内容之前插⼊属性定义的内容与样式v. E::after: 定义在⼀个元素的内容之后插⼊属性定义的内容与样式vi. 注意：1. IE6、IE7与IE8（怪异模式Quirks mode）不⽀持此伪元素2. CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类⾥就不再存在E:before或者 E:after伪类b) E::first-letter⽂本的第⼀个字母或字(不是词组)c) E::first-line ⽂本第⼀⾏d) E::selection 可改变选中⽂本的样式。
CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）
CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）在css3提供的新选择器之前，选择⼀个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好⽤的选择器呢？⾸先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不⽤额外再添加class或者id⽐如需要选择出input标签中具有value属性的内容，就可以按以下⽅式// cssinput[value]{color: #333;}// html<input type="text" value="请输⼊⽤户名"><input type="text">属性选择器还有以下匹配规则（E表⽰选择器，att表⽰属性值，val表⽰匹配的内容）选择符简介E[att]具有att属性的E元素E[att=val]具有att属性且值为val的E元素E[att^=val]具有att属性且值以val开头的E元素E[att$=val]具有att属性且值以val结尾的E元素E[att*=val]具有att属性且值包含val的E元素选择出input标签中type为password的元素// cssinput[type=password]{color: #000}// html<input type="text"><input type="password">选择出div标签中class以movie开头的元素// cssdiv[class^=movie]{color: brown}// html<div class="movie-sky">天空之城</div><div class="movie-cat">龙猫</div><div class="movie-windy">起风了</div><div class="tv">武林外传</div>按照以上五种属性选择规则，可以⾃由的选择具有某些特征的元素，那么如果此时我需要选择的元素没有单独的属性呢。
CSS3文档
• color(文本颜色) •
• text-align(文本对齐方式)
• text-decoration
• text-transform
• text-indent(文本缩进)
• letter-spacing(字符之间的距离)
line-height(文字的行高)
• direction(文字方向)
CSS字体
• font
• font 简写属性在一个声明中设置所有字体属性。 • 可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family" • font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
• background-color(背景颜色) •
• background-image(背景图)
第一个图片在第二个图片的上面
• background-postion(背景位置)
• background-attachment(背景固定)
• background-size(背景图大小)
• 设置背景图的大小
• 3.内部样式(inline style) • 写在头部的<style>标签内
• 4.多重样式
• 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更 具体的样式表中被继承过来。
CSS样式表(多重样式优先级) • 浏览器默认样式 < 外部样式 < 内部样式 < 内联样式
• 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成 的匹配规则决定的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
我们会定期对W3School 的CSS 参考手册进行浏览器测试。
CSS3 选择器
在CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个CSS 版本中定义的。
（CSS1、CSS2 还是CSS3。
）
选择器例子例子描述C S S
.class.intro 选择class="intro" 的所有元素。
1 #id#firstname 选择id="firstname" 的所有元素。
1 ** 选择所有元素。
2 element p 选择所有<p> 元素。
1 element,element div,p 选择所有<div> 元素和所有<p> 元素。
1 element element div p 选择<div> 元素内部的所有<p> 元素。
1 element>element div>p 选择父元素为<div> 元素的所有<p> 元素。
2 element+element div+p 选择紧接在<div> 元素之后的所有<p> 元素。
2 [attribute][target] 选择带有target 属性所有元素。
2 [attribute=value][target=_blank] 选择target="_blank" 的所有元素。
2 [attribute~=value][title~=flower] 选择title 属性包含单词"flower" 的所有元素。
2 [attribute|=value][lang|=en] 选择lang 属性值以"en" 开头的所有元素。
2 :link a:link 选择所有未被访问的链接。
1 :visited a:visited 选择所有已被访问的链接。
1 :active a:active 选择活动链接。
1 :hover a:hover 选择鼠标指针位于其上的链接。
1 :focus input:focus 选择获得焦点的input 元素。
2 :first-letter p:first-letter 选择每个<p> 元素的首字母。
1 :first-line p:first-line 选择每个<p> 元素的首行。
1 :first-child p:first-child 选择属于父元素的第一个子元素的每个<p> 元素。
2 :before p:before 在每个<p> 元素的内容之前插入内容。
2 :after p:after 在每个<p> 元素的内容之后插入内容。
2
:lang(language)p:lang(it) 选择带有以"it" 开头的lang 属性值的每个<p> 元
2
素。
element1~element2p~ul 选择前面有<p> 元素的每个<ul> 元素。
3 [attribute^=value]a[src^="https"] 选择其src 属性值以"https" 开头的每个<a> 元素。
3 [attribute$=value]a[src$=".pdf"] 选择其src 属性以".pdf" 结尾的所有<a> 元素。
3 [attribute*=value]a[src*="abc"] 选择其src 属性中包含"abc" 子串的每个<a> 元素。
3 :first-of-type p:first-of-type 选择属于其父元素的首个<p> 元素的每个<p> 元素。
3 :last-of-type p:last-of-type 选择属于其父元素的最后<p> 元素的每个<p> 元素。
3 :only-of-type p:only-of-type 选择属于其父元素唯一的<p> 元素的每个<p> 元素。
3 :only-child p:only-child 选择属于其父元素的唯一子元素的每个<p> 元素。
3 :nth-child(n)p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p> 元素。
3 :nth-last-child(n)p:nth-last-child(2) 同上，从最后一个子元素开始计数。
3 :nth-of-type(n)p:nth-of-type(2) 选择属于其父元素第二个<p> 元素的每个<p> 元素。
3 :nth-last-of-type(n)p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
3 :last-child p:last-child 选择属于其父元素最后一个子元素每个<p> 元素。
3 :root:root 选择文档的根元素。
3 :empty p:empty 选择没有子元素的每个<p> 元素（包括文本节点）。
3 :target#news:target 选择当前活动的#news 元素。
3 :enabled input:enabled 选择每个启用的<input> 元素。
3 :disabled input:disabled 选择每个禁用的<input> 元素 3 :checked input:checked 选择每个被选中的<input> 元素。
3 :not(selector):not(p) 选择非<p> 元素的每个元素。
3 ::selection::selection 选择被用户选取的元素部分。
3。