CSS选择器｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天。在此总结了了CSS选择器的相关知识，自

这是我参与「第四届青训营」笔记创作活动的的第2天。在此总结了了CSS选择器的相关知识，自己对于不会的和之前不完善的知识整理了如下。

一、CSS选择器

1、基础选择器

由单个选择器组成的

1.1 标签选择器

标签名 {
        属性1:属性值1;
        属性2:属性值2;
}

1.2 类选择器

类名 {
        属性1:属性值1;
        属性2:属性值2;
}

注意：

长名称或词组可以使用中横线（"-"）来为选择器命名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义
命名规范（Web前端开发规范手册.doc）

1.3 id选择器

#id名 {
        属性1:属性值1;
        属性2:属性值2;
}

注意：类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JS搭配使用

1.4 通配符选择器

选取页面中所有元素（标签）

* {
        margin:0;
        padding:0;
}

2、复合选择器

2.1 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2（后代元素）

注意：

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

2.2 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

语法：

元素1 > 元素2（样式声明）

2.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明

任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1,元素2{ 样式声明 }

2.4 伪类选择器

I. 链接伪类选择器

a:link                      /*选择所有未被访问的链接*/
a:visited               /*选择所有已被访问的链接*/
a:hover                 /*选择鼠标指针位于其上的链接*/
a:active                /*选择活动链接（鼠标谈下未弹起的链接）*/

注意事项：

为了确保生效，请按照LVHA的顺序声明：link - ;visited - ;hover - ;active
记忆法：love hate 或者lv 包包 hao
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

实际工作开发中的写法：

a {
    color: gray;
    text-decoration: none;
}
a:hover {
    color:blue;
}

II. :focus 伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对表单元素

input:focus {
    background-color:yellow;
}

2.5 属性选择器

I.某种属性的时候

<input value="zhao" disabled/>

<style>
    [disabled] {
        background:#eee;
        color:#999;
    }
</style>

II.属性等于某种特定的值的时候

<input  type="password" value="zhao"/>

<style>
    input [type="password"]{
        border-color:red;
        color:#999;
    }
</style>

III.表达式

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
    //以#开头
    a[href^="#"]{

    }
    //以.jpg结尾
    a[href$=".jpg"]{

    }
</style>

2.6 组合（combinators）

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	AB	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中吧，如果它是A的子元素	section > p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2 + p

3、选择器的特异度

选择器权重如下

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important 重要的	∞无穷大

根据优先级，生效

示例	#（id）	. (伪)类	E 标签
#nav .list li a:link	1	2	2
.hd ul .links a	0	2	2

先比较#，再依次往后比较数字大小

CSS选择器 ｜ 青训营笔记