CSS——选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。

在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

要把上图的小黄人分为2组，最快的方法怎办？

很多，比如一只眼睛的一组，剩下的一组

这就用到基础选择器组：

基本选择器

1.标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

2.类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

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

  标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

技巧：

 1.长名称或词组可以使用中横线来为选择器命名。
 2.不建议使用“_”下划线来命名CSS选择器。

　　输入的时候少按一个shift键; 　

　　浏览器兼容问题 (比如使用tips的选择器命名，在IE6是无效的) 　

　　能良好区分JavaScript变量命名(JS变量命名是用“”)

 3.不要纯数字、中文等命名， 尽量使用英文字母来表示。

案例：

<head>
        <meta charset="utf-8">
        <style>
        span {
        	font-size: 100px;
        }
        .blue {
        	color: blue;
        }
        .red {
        	color: red;
        }
        .orange {
			color: orange;
        }
		.green {
			color: green;
		}
        </style>
    </head>
    <body>
    	<span class="blue">G</span>
    	<span class="red">o</span>
    	<span class="orange">o</span>
    	<span class="blue">g</span>
    	<span class="green">l</span>
    	<span class="red">e</span>
    </body>

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

 1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
 2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

 <div class="pink fontWeight font20">亚瑟</div>
 <div class="font20">刘备</div>
 <div class="font14 pink">安其拉</div>
 <div class="font14">貂蝉</div>

3.id选择器　

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

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

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

4.通配符选择器（全局选择器）

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

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

注意：

这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。

5.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

 为了和我们刚才学的类选择器相区别，  类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号  比如  :link{}

动态伪类

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

1）锚点伪类

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。（h必须在l和v之后，a必须在h后，伪类名词对大小写不敏感）

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

2）用户行为伪类

:hover 鼠标放在元素上时

:active 鼠标点击元素松开之前

:focus 元素获取到焦点时

UI元素状态伪类（CSS）

：enabled 匹配可用的元素（默认）

：disabled 匹配被禁用的元素，不可设置宽高

：checked 匹配每个已被选中的input元素（只用于单选按钮和复选框）

IE9+支持

目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素（锚）。IE8及更早版本不支持。

 :target {
         color: red;
         font-size: 30px;
 }

结构(位置)伪类选择器（CSS3)

E:first-child :选取属于其父元素的首个子元素的E元素（白话：首先得是家里最大的，其次还得是E元素）
E:last-child :选取属于其父元素的最后一个子元素的E元素（白话：首先得是家里最小的，其次还得是E元素）
E:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型（白话：首先得是家里第n个孩子，其次还得是E元素）
E:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式
E:nth-of-type(n)：匹配属于父元素的特定类型的第n个子元素的每一个元素。（白话：家里排行n的E元素）。IE9+/火狐4+/谷歌/safari/opera
E:nth-last-of-type(n)：匹配属于父元素的特定类型的第n个子元素的每一个元素，从最后一个子元素开始计数。IE9+/火狐4+/谷歌/safari/opera
E:first-of-type：匹配属于其父元素的特定类型的首个子元素的每个元素。IE9+/火狐4+/谷歌/safari/opera
E:last-of-type：匹配属于其父元素的特定类型的最后一个子元素的每个元素。IE9+/火狐4+/谷歌/safari/opera
E:only-child：匹配属于其父元素的唯一子元素的每个元素。（白话：匹配独生子E元素，没有兄弟姐妹）IE9+/火狐/谷歌/safari/opera
E:only-of-type：匹配属于其父元素的特定类型的唯一子元素的每个元素。（白话：匹配唯一的E元素，E元素可以有兄弟姐妹，但E元素只有一个！）IE9+/火狐4+/谷歌/safari/opera
E:empty：匹配没有子元素（包括文本）的每个元素。IE9+/火狐/谷歌/safari/opera

li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}

奇数2n+1偶数2n每隔x条一个xn+1等等。。。里面可以是数字或表达式，从1开始计数

否定选择器

IE9+/火狐/谷歌/safari/opera

*伪元素选择器

用于向某些选择器设置特殊效果。严格来说不是选择器。

E::first-letter：为文本的第一个字符或字（如中文、日文、韩文等）设置特殊样式，只能用于块级元素；
E::first-line ：根据first-line伪元素的样式对 E元素的第一行文本进行格式化，只能用于块级元素；
E::selection：可改变选中文本的背景色与前景色，即文本背景颜色和文字颜色，在IE中只有IE9+支持，在火狐中需要加前缀“ -moz ”；
E::before：在元素内容前面插入新内容，常与“content”配合使用；
E::after：在元素内容后面插入新内容，常与“content”配合使用；多用于清除浮动。

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。":" 与 "::" 区别在于区分伪类和伪元素

 p::first-letter {
   font-size: 20px;
   color: hotpink;
 }
 
 /* 首行特殊样式 */
 p::first-line {
   color: skyblue;
 }
 
 p::selection {
   /* font-size: 50px; */
   color: orange;
 }

 div::befor {
   content:"开始";
 }
 div::after {
   content:"结束";
 }

复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

1.交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：

交集选择器是并且的意思。即...又...的意思

 比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

2.并集选择器（群组选择器）

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧：

并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

 比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

3.后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。（所有符合条件的后代元素）

4.子元素选择器

子元素选择器只能选择作为某元素子元素的元素。（所有符合条件的子元素）

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话：这里的子指的是亲儿子不包含孙子重孙子之类。

  比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

测试题

 <div class="nav">    <!-- 主导航栏 -->
   <ul>
     <li><a href="#">公司首页</a></li>
     <li><a href="#">公司简介</a></li>
     <li><a href="#">公司产品</a></li>
     <li>
          <a href="#">联系我们</a>
          <ul>
                     <li><a href="#">公司邮箱</a></li>
                     <li><a href="#">公司电话</a></li>
          </ul>
     </li>
   </ul>
 </div>
 <div class="sitenav">    <!-- 侧导航栏 -->
   <div class="site-l">左侧侧导航栏</div>
   <div class="site-r"><a href="#">登录</a></div>
 </div>

在不修改以上代码的前提下，完成以下任务：

链接登录的颜色为红色,同时主导航栏里面的所有的链接改为蓝色 (简单)
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)
主导航栏里面的一级菜单链接文字颜色为绿色。（难)

5 相邻兄弟元素选择器

选择紧接在另一元素后的元素，而且她们具有一个相同的父亲。（只匹配元素后面的第一个兄弟元素）

6 通用兄弟选择器

选择某元素后面的所有兄弟元素，而且她们具有一个相同的父元素。

7.属性选择器

选取标签带有某些指定属性的选择器我们成为属性选择器。

使用CSS3属性选择器，可以只指定元素的某个属性，或者同时指定元素的某个属性和其对应的属性值。

E[attribute]：选择所有带有attribute属性的元素。
E[attribute = "value"]：选择所有使用attribute = "value"的元素。
E[attribute ~= "value"]：选择attribute属性包含单词 "value"的元素。适用于由空格分隔的属性值。只能是 "value"，一个字符都不能差。
E[attribute ^= "value"]：选择attribute属性值以 "value"开头的元素。
E[attribute $= "value"]：选择attribute属性值以 "value"结尾的元素。
E[attribute *= "value"]：选择attribute属性值包含 "value"的元素。只要属性值中有"value"这几个字符就行。
E[attribute |= "value"]：选择attribute属性值为 "value"或以 "value-"开头的元素。