MENU

CSS选择器总结

• January 9, 2018 • Read: 147 • Code

[title]

基本选择器

[/title]

原有的基本选择器：

通配符选择器、元素选择器、类选择器、ID选择器、后代选择器
CSS3中新增基本选择器：
子元素选择器、相邻兄弟选择器、通用兄弟选择器、群组选择器

基本选择器——子元素选择器

概念:子元素选择器只能选择某元素的子元素

语法格式:父元素 > 子元素 （Father > Children）

兼容性:IE8+、FireFox、Chrome、Safari、Opera

基本选择器——相邻兄弟元素选择器

概念:相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素

语法格式:元素 + 兄弟相邻元素 （Eelement + Sibling）

兼容性:IE8+、FireFox、Chrome、Safari、Opera

基本选择器——通用兄弟选择器

概念:选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素

语法格式:元素 ~ 后面所有兄弟相邻元素 （Eelement ~ Siblings）

兼容性:IE8+、FireFox、Chrome、Safari、Opera

基本选择器——群组选择器

概念:群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“,”隔开

语法格式:元素1, 元素2, …, 元素n （Eelement1, Element2, …, Elementn）

兼容性:IE6+、FireFox、Chrome、Safari、Opera

[title]

属性选择器

[/title]

对带有指定属性的HTML 元素设置样式
使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和 其对应的属性值。

Element[attribute]

概念:为带有 attribute 属性的 Element 元素设置样式

兼容性:IE8+、FireFox、Chrome、Safari、Opera

Element[attribute=“value”]

概念:为 attribute=“value” 属性的 Element 元素设置样式

兼容性:IE8+、FireFox、Chrome、Safari、Opera

Element[attribute~=“value”]

概念:选择 attribute 属性包含单词 “value" 的元素，并设置其样式

兼容性:IE8+、FireFox、Chrome、Safari、Opera

注：~=其中的value必须是一个独立的单词，例如test-a和test a可以被选中testa不能被选中．

Element[attribute^=“value”]

概念:设置 attribute 属性值以 "value" 开头的所有 Element 元素的样式

兼容性:IE8+、FireFox、Chrome、Safari、Opera

Element[attribute$=“value”]

概念:设置 attribute 属性值以 "value" 结尾的所有 Element 元素的样式

兼容性:IE8+、FireFox、Chrome、Safari、Opera

Element[attribute*=“value”]

概念:设置 attribute 属性值包含 "value" 的所有 Element 元素的样式

兼容性:IE8+、FireFox、Chrome、Safari、Opera

注：*=其中的value只要是值的子串就可以，例如test-a，test a和testa均可以被选中．

Element[attribute|=“value”]

概念:选择 attribute 属性值为 "value”或以 "value-" 开头的元素，并设置其样式

兼容性:IE8+、FireFox、Chrome、Safari、Opera

[title]

伪类选择器

[/title]

动态伪类、锚点伪类、用户行为伪类、UI元素状态伪类、CSS3结构类、否定选择器、伪元素

动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来

锚点伪类

:link, :visited

用户行为伪类

:hover, :active, :focus

UI元素状态伪类

概念:我们把":enabled",":disabled",":checked（只兼容Opera）"伪类称为UI元素状态伪类

兼容性:IE9+、FireFox、Chrome、Safari、Opera

enabled选择器：被用来指定当元素处于可用状态时的样式。
disabled选择器：被用来指定当元素处于不可用状态时的样式。

chcked伪类选择器：用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:enabled伪类选择器与E:disabled伪类选择器</title>
    <style>
    input[type="text"]:enabled{
        background: green;
        color: #ffffff;
    }
    input[type="text"]:disabled{
        background: #727272;
    }
</style>
</head>
<body>
    <h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
    <form>
        姓名：<input type="text" placeholder="请输入姓名" disabled>
        <br/>
        <br/>
        学校：<input type="text" placeholder="请输入学校">
    </form>
</body>
</html>

/**CSS3结构类*/
CSS3结构类

CSS3的:nth选择器
我们把CSS3的:nth选择器也成为CSS3结构类

选择方法：
:first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、
:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty

Element:nth-last-child(N)

概念:匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数
兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

Element:nth-of-type(N)

概念: :nth-of-type(N)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

p:nth-child(2) { color: red; } 
p:nth-of-type(2) { color: red; } 
<section>
 <div>我是一个普通的div标签</div>
 <p>我是第1个p标签</p>
 <p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
注：第一种让“我是第1个p标签变红了”；第二种让“我是第2个P标签变红了”这里可以看出nth-child(n)与nth-of-type(n)的差异，nth-child(n)：是一定是这个标签，并且是父元素的第二个子元素nth-of-type(n):是父元素下第二个这种元素

Element:nth-last-of-type(N)

概念:匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数

兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

Element:only-child

概念: :only-child 选择器匹配属于其父元素的唯一子元素的每个元素

兼容性:IE9+、FireFox、Chrome、Safari、Opera

注：不能出现其他的子元素，一定要是唯一。

Element:only-of-type

概念: :only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

兼容性:IE9+、FireFox4+、Chrome、Safari、Opera

Element:empty

概念: :empty 选择器匹配没有子元素（包括文本节点）的每个元素

兼容性: IE9+、FireFox、Chrome、Safari、Opera

/**END CSS3结构类*/

否定选择器（:not）

概念: :not(Element/selector) 选择器匹配非指定元素/选择器的每个元素

语法格式:父元素:not(子元素/子选择器) （Father:not(Children/selector)）

兼容性:IE9+、FireFox、Chrome、Safari、Opera

/**伪元素*/

伪元素

CSS 伪元素用于向某些选择器设置特殊效果

语法格式：元素::伪元素 （Element::pseudo-element）

兼容性：IE9+、FireFox、Chrome、Safari、Opera

:first-line, :first-letter, :before, :after,

:section

(概念:用于设置在浏览器中选中文本后的背景色与前景色

兼容性说明:  ::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”)

/**END 伪元素*/

[title]

CSS权重

[/title]

权重:当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程

权重等级与权值:行内样式(1000)>ID选择器(100)>类、属性选择器和伪类选择器(10)>元素和伪元素(1)>*(0)

权重计算口诀:从0开始，一个行内样式+1000，一个id+100，一个属性选择器、class或者伪类+10，一个元 素名或者伪元素+1

[title]

CSS权重规则

[/title]

包含更高权重选择器的一条规则拥有更高的权重
ID选择器(#idValue)的权重比属性选择器([id="idValue"])高
带有上下文关系的选择器比单纯的元素选择器权重要高
与元素“挨得近”的规则生效(就近原则)
最后定义的这条规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器，都没有一个class选择器权重高
通配符选择器权重是0，被继承的css属性也带有权重，权重也是0

 

 

/**THE END*/

Leave a Comment