选择器：

1、常用选择器

• 元素/标签选择器：选择页面中的所有指定元素

**标签名{ }**

• id 选择器：通过元素的id选中唯一的一个元素

整个页面中相同的id只能有一个
**#id名{ }**

• class/类选择器：通过class名选中一组元素

**.class{ }**
可以同时为一个元素设置多个class属性值，多个值用空格隔开
<div class="p1 myClass"></div>

• 通配选择器

***{ }** 选中页面所有的元素

2、选择器分组

通过选择器分组可以同时选中多个选择器对应的元素
比如 选择 class为p1的和 id为p2的

**语法: 选择器1，选择器2，选择器n{ }**

3、复合选择器

选中满足多个条件的元素
语法 **选择器1选择器2选择器3**
紧紧挨着

4、元素之间的关系

父元素
直接包含子元素的元素

祖先元素
直接或间接包含后代元素的元素

子元素
直接被父元素包含的元素

后代元素
直接或间接被祖先元素包含的元素

兄弟元素
拥有相同父元素的元素叫兄弟元素

后代元素选择器
选中指定元素的指定后代元素
语法：**祖先元素 后代元素{}**

子元素选择器
选中指定父元素的指定子元素
`父元素 > 子元素{}**`

5、伪类选择器

专门用来表示元素特殊状态
比如访问过的超链接【获取焦点…..】
：link{} //正常
：visited{}// 访问过的
由于涉及到了用户的隐私，所以使用visited伪类只能设置字体颜色

：hover {} // 鼠标悬停
：active{} // 正在点击

否定伪类

• 可以从已选中的元素中剔除掉某些元素
• :not(选择器){}
• p:not(.hello){} // 选中所有p 但是不要class为hello的

  6、伪元素

  使用伪元素来表示元素中的一些特殊的位置
  ：first-letter{} 第一个字母

：first-line{} 第一行

：before{} 元素最前面的部分
一般都需要结合content属性结合使用
通过content可以向before/after的位置添加一些内容
p:before{ content:”张三”;}

：after{} 元素的最后面

p：first-child{} 第一个子元素 【必须是p而且 还得是父元素的第一个子元素】

p: last-child{} 最后一个子元素 【必须是p而且 还得是父元素的第一个子元素】

p:nth- child（1）{} 可以选中任意位置的元素 【选中第一个】
该选择器后边可以放参数 （even） 偶数 （odd） 奇数

7、属性选择器

title属性，这个属性可以给任何标签指定

hello world

作用：根据元素中的属性和属性值，选取指定元素
语法 p[title] {} // 表示既是p 还得有title属性的元素

• p[title=”hello”] 不仅得有title 值还得是 hello
• p[title^=”ab”] 有title而且为ab开头，可选择多个
• p[title$=”ab”] 有title而且为ab结尾，可选择多个
• p[title*=”ab”] 有title而且包含ab，可选择多个

  8、兄弟元素选择器

  span + p {}
  可以选中一个元素 后紧挨着的指定的兄弟元素

span ~ p{}
选中span后的所有p