CSS中的选择器

一、CSS基础选择器

找到指定的HTML页面元素，选择标签。

-标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：可以把某一标签全部选择出来

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3}

-类选择器

类选择器使用"."(英文点号)进行标识，后面紧跟类名。

作用：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

注意：1 .后面跟上的类名尽量用英文字母来表示

2.多类名选择器：各个类名之间用空格隔开

语法：
.类名{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
}

<p><class='类名'></p>

-id选择器

• id选择器使用#进行标识，后面紧跟id名

• 元素的id值是唯一的，只能对应于文档中某一具体的元素

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

<p id="id名"></p>

-通配符选择器

• 通配符选择器用*号表示，* 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

• 注意：会匹配页面中的所有元素，降低页面响应速度，不建议随便使用。

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

*{
   margin: 0;     /*定义外边框*/
   padding: 0;    /*定义内边框*/
}

作用：消除HTML标记的默认边框

-基础选择器总结

二、CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

-后代选择器

• 用来选择元素或元素的子孙后代

• 其写法是将外层标签写在前面，内层标签写在后面，中间用空格隔开。

• 子孙后代都可以这样选择，就是说可以选择它任何包含在内的标签

父级 子级{属性：属性值；属性：属性值}

.class h1{color:blue;font-size:17px;}

-子元素选择器

• 子元素选择器只能选择作为某元素的亲儿子的元素

• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

• 这里的子只指亲儿子，不包括孙子、重孙子之类

.class>h1{color:blue;font-size:17px;}

-交集选择器

• 交集选择器是并且的意思,即...又...的意思。比如： p.one 选择的是： 类名为 .one 的段落标签。

• 其写法是两个选择器之间不能有空格，例如：h1.class

h1.class{color:blue;font-size:17px;}

-并集选择器

• 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

• 任何形式的选择器（包括标签选择器、class选择器、id选择器）都能作为并集选择器的一部分

• 并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

h1，class，#test {color:blue;font-size:17px;}

-链接伪类选择器

链接伪类，是利用交集选择器.

• a:link 未访问的链接

• a:visited 已访问的链接

• a:hover 鼠标移动到链接上

• a:active 选定的链接

-复合选择器总结

三、css选择器的优先级

优先级：！important>行内样式>id选择器>类选择器>标签选择器>其他