CSS3 选择器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 选择器相关的知识，希望对你有一定的参考价值。
参考技术Acss3中，追加了三个属性选择器分别为：
结构性伪类选择器由两部分构成，一是伪类选择器，一是伪元素选择器。
伪类选择器 ，要注意命名不要与系统定义好的选择器重名，例如link、hover
伪元素选择器 中包含 first-line、first-letter、before、after。
当root和body起冲突时，body就对内容区域生效，在内容区外则是root生效。
格式 :not(selector)
1. first-child 对一个父元素中的 第一个 子元素进行样式的指定
2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定
3. nth-child（positon） 对一个父元素中的 指定序号 的子元素进行样式的指定
4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定
2）使用nth-of-type（odd）和nth-of-type（even）
1）使用nth-child
2）使用nth-child（an+b），a表示每次循环中，包括几种样式，b表示指定的样式在循环中所处的位置。
only-child选择器，在元素只有一个子元素时，可以代替使用 nth-child(1)/nth-last-child(1) 。
在css3选择器中，除了结构性伪类选择器外，还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用，在默认状态下不起作用。
通过js改变输入框的可输入和不可输入状态，通过css样式改变输入框可输入和不可输入状态时的背景颜色。
用来位于同一个父元素之下的，给与一个子元素平级的另一个子元素设定样式
CSS 选择器
CSS 通过选择器控制 HTML 元素，CSS 选择器对网页对象可以实现一对一、一对多或者多对一的匹配。
一、选择器的分类
CSS3 选择器在 CSS2 选择器基础上新增了属性选择器、伪类选择器、过滤选择器，减少了对 HTML 类名或ID名的依赖，避免了对 HTML 结构的干扰，使编写代码更简单轻松。
根据所获取页面中元素的不同，可以把 CSS 选择器分为 5大类：基本选择器、组合选择器、伪类选择器、伪元素选择器和属性选择器。
其中，伪类选择器又分为6种：动态伪类选择器、目标伪类选择器、语言伪类、UI 元素状态伪类选择器、结构伪类选择器和否定伪类选择器。
二、基本选择器
基本选择器包括：标签选择器、类选择器、ID 选择器和通配选择器。
1、标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。标签选择器可以快速、方便地控制页面标签的默认显示效果。
语法：
标签名属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 或者 元素名属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
Tips：标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
2、类选择器
类选择器能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。
语法：类选择器使用“.”（英文点号）进行标识，后面紧跟类名
.类名属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 标签调用的时候用 class=“类名” 即可。
Tips：类选择器最大的优势是可以为元素对象定义单独或相同的样式。
建议：
-
-
- 长名称或词组可以使用中横线来为选择器命名。
- 不建议使用“_”下划线来命名CSS选择器。
- 不要纯数字、中文等命名， 尽量使用英文字母来表示。
- 命名规范，最好见名知意。
- 长名称或词组可以使用中横线来为选择器命名。
-
多类名选择器：可以给标签指定多个类名，从而达到更多的选择目的。
语法：
<div class="font14 pink">hello world！！！</div>
Tips：
-
-
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
- 各个类名中间用空格隔开。
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
-
3、ID 选择器
ID 选择器以井号（#）作为前缀，然后是一个自定义的 ID 名。
语法：
#id名属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
Tips：id 名即为HTML元素的 id 属性值，大多数HTML元素都可以定义 id 属性，元素的 id 值是唯一的，只能对应于文档中某一个具体的元素。
4、通配选择器
通配选择器可以来匹配页面中所有的元素，通配选择器是固定的，用星号（*）来表示，是所有选择器中作用范围最广的。
语法：
* 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
Tips：实际应用中，这个选择器很少用到。
三、组合选择器
四、属性选择器
五、伪类选择器
伪选择器包括伪类和伪对象选择器，伪选择器以冒号（:）作为前缀标识符。冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格，否则将错认为类选择器。
语法：
a:hover font-size:18px;
伪类选择器有两种用法：单纯式和混用式。
单纯式：在伪选择符前面加上限定的元素即可。
语法：
a:link colore:red;
混用式：在伪选择符前面加上限定的元素和选择器，把类选择符合伪类选择符组成一个混合式的选择器。
语法：
a.selected:hover color:blue;
1、动态伪类
动态伪类是一类行为类样式，这些伪类并不存在于 HTML 中，只有当用户与页面进行交互时才能体现出现。动态伪类选择器包括两种形式：
-
- 锚点伪类：应用在链接上的常见样式。
:link /* 未访问的链接 没有点过的超链接*/ :visited /* 已访问的链接 已经点过的超链接*/ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 点击不松开的超链接*/
Tips：顺序尽量不能颠倒， 按照 lvha 的顺序
-
- 行为伪类：也称为用户操作伪类。
:hover 和 :active 也别列入到用户行为伪类中
:focus /* 用于元素称为焦点时的样式效果，经常用在表单元素上*/ :hover /*用于用户把鼠标移动到元素上面的样式效果*/ :active /* 用于用户单击元素时的样式效果，即按下鼠标左键时发生的样式 */
2、结构伪类 (CSS3 新增)
结构伪类利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，使文档更加简洁。
结构伪类：
1 :first-child; 选择某个元素的第一个子元素 2 :last-child; 选择某个元素的最后一个子元素 3 :nth-child(); 选择某个元素的一个或多个特定的子元素 4 :nth-last-child(); 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算 5 :nth-of-type(); 选择指定的元素 6 :nth-last-type(); 选择指定的元素，从元素的最后一个开始计算 7 :first-of-type; 选择一个上级元素下的第一个同类子元素 8 :last-of-type; 选择一个上级元素的最后一个同类子元素 9 :only-child; 选择的元素是它的父元素的唯一一个子元素 10 :only-of-type; 选择一个元素是它的上级元素的唯一一个相同类型的子元素 11 :empty; 选择的元素里面没有任何内容
（1）:first-child
（2）:last-child
（3）:nth-child()
（4）:nth-last-child()
（5）:nth-of-type()
（6）:nth-last-of-type()
（7）:first-of-type() 和 :last-of-type()
（8）:only-child 和 :only-of-type()
（9）:empty
3、否定伪类
4、状态伪类
5、目标伪类
目标伪类选择器 :选择器可用于选取当前活动的目标元素。
语法：
E:target color: red; font-size: 30px;
表示选择匹配 E 的所有元素，且匹配元素被相关 URL 指向。该选择器是动态选择器，只有当存在 URL 指向该匹配元素时，样式效果才能够有效。
Tips：IE8 及其以下版本不支持 E:target 选择器。
六、伪元素选择器
以上是关于CSS3 选择器的主要内容，如果未能解决你的问题，请参考以下文章