CSS选择器

1、基本选择器

1.1 通配符选择器

通配符选择器又称为通用元素选择器，会匹配所有的元素，对所有元素都生效。语法为*{}：

*{margin:0;padding:0}

1.2 ID选择器

ID选择器是比较常用的选择器之一，使用方式就是#id名{}，例如：

<div id='main'>   id选择器</div>

#main{margin:0;}

1.3 类选择器

类选择器又叫class选择器，也属于比较常用的选择器之一，使用方式就是.class名{}，例如：

<div class='main'>   class选择器</div>

.main{margin:0;}

1.4 元素选择器

元素选择器又叫做标签选择器，主要是根据HTML的标签来选择。语法为标签名{}，例如

<div><span>元素选择器</span></div>

div{margin:0;}span{padding:10px;}

1.5 属性选择器

属性选择器是通过标签里面有些属性值来进行选择，语法为标签名[属性值]

ex1:把包含标题的所有元素的字体颜色设置为蓝色：

*[title] {color:blue;}

ex2:只对有 href 属性的a标签设置字体颜色：

a[href] {color:red;}

ex3:对name属性值等于‘abc’的标签设置样式

form[name='abc']{color:red;}

2、组合选择器

组合选择器主要是对多个标签设置样式，例如：

<div id="main"><div class="box"><span>组合选择器</span></div></div>

/* 给div标签并且类名为box的标签设置样式 */div.box{margin:0;}/* 给div，span标签和.box类设置样式*/div,span,.box{margin:0}

3、关系选择器

关系选择器包括子选择器、后代选择器、兄弟选择器和相邻兄弟选择器

3.1 子选择器

子代选择器主要是对当前标签的直系子代进行选择，通俗的说就是只会选择儿子辈，不会选择孙子辈和其他后代辈。语法为父标签名>子代标签名

<div><p><span>子代选择器</span></p></div>

/* 有效 */div>p{margin:0;}/* 无效 */div>span{margin:0;}

3.2 后代选择器

后代选择器可以说是既包括儿子辈的，又包括孙子辈的标签元素。语法为父标签后代标签

<div><p><span>后代代选择器</span><p><a>Baidu</a></p></p></div>

/*div中所有的p标签都会应用这个样式*/div p{margin:0;}

3.3 相邻兄弟选择器

相邻兄弟选择器指的是当前元素的后一个相邻的兄弟标签，只会对这一个标签有用，其他的兄弟标签不会生效。语法为兄弟标签+兄弟标签{}

<div><span class='box1'></span><span class='box2'></span><span class='box3'></span><span class='box4'></span></div>

/* 只会对box2生效 */.box+span{color:red;}

3.4 兄弟选择器

相邻兄弟选择器指的是当前元素的后一个相邻的兄弟标签，只会对这一个标签有用，其他的兄弟标签不会生效。语法为兄弟标签~兄弟标签{}

<div><span class='box1'></span><span class='box2'></span><span class='box3'></span><span class='box4'></span></div>

/* 会对box2,3,4都生效 */.box~span{color:red;}

4、伪类选择器

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

伪类选择器的语法：标签名:伪类名{}

/* 未访问的链接 */a:link {  color: #FF0000;}/* 已访问的链接 */a:visited {  color: #00FF00;}/* 鼠标悬停链接 */a:hover {  color: #FF00FF;}/* 已选择的链接 */a:active {  color: #0000FF;}

更多伪类参考**菜鸟教程**

5、伪元素选择器

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它看用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

伪元素选择器的语法为标签名::伪元素名{}

/*::first-line 伪元素用于向文本的首行添加特殊样式。下面的例子为所有 <p> 元素中的首行添加样式：*/p::first-line {  color: #ff0000;  font-variant: small-caps;}/* ::before 伪元素可用于在元素内容之前插入一些内容。 */h1::before {  content: url(smiley.gif);}/* ::after 伪元素可用于在元素内容之后插入一些内容。 */h1::after {  content: url(smiley.gif);}

更多伪元素参考**菜鸟教程**

6、选择器优先级

CSS选择器的优先级按照下面的顺序从高到低进行排列。

!important
内联样式/行内样式
ID选择器(#ID{})
类选择器(.class{})
元素选择器(div{})
通配符选择器(*{})
继承样式(*{})