H5零基础-CSS选择器

CSS是网页的美容师，主要使用场景是美化网页，布局页面的。

CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离。

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

CSS规则.png

• 选择器是用于指定CSS的HTML标签，花括号内是对该样式设置的具体样式。
• 属性和属性值以”键值对“的形式出现。
• 多个”键值对“之间用英文 ; 进行区分。

选择器 分为 基础选择器和 符合选择器两大类。

一、基础选择器

基础选择器是由单个选择器组成的， 包括：标签选择器、类选择器、id选择器和通配符选择器。

1. 标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法

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

示例代码：
例：将所有p标签设置为红色，字体12px。

<style>
       p {
                 color: red;
                 font-size: 12px;
        } 
 </style>

小结：

• 作用：标签选择器可以把某一类标签全部选择出来，比如所有<div> 标签和所有<span>标签。
• 优点：能快速为页面中同类型的标签统一设置样式。
• 缺点：不能设置差异化样式，只能选择全部的当前标签。

2. 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法

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

示例代码：
例：将所有red类的HTML元素均设置为红色。

    <style>
        .red {
            color: red;
        }
    </style>

   <div class="red">我是div01</div>

小结：

• 类选择器口诀：样式点定义，结构类(class)调用；一个或多个，开发最常用。
• 作用：如果想要差异化不同的标签，但需选择一个或几个标签，可以使用类选择器。
• 类选择器在HTML中以class属性表示，在CSS中，类选择器以一个” . “号表示。

扩展：多类名使用方法

<div class="red font20">多类名使用方法</div>

(1) 在标签class属性中写多个类名；
(2) 多类名中间必须用空格分开；

示例代码：

<style>
   .red {
            color: red;
        }
   .font35 {
              font-size: 35px;
           }
</style>

<div class="red font35">刘德华</div>

小结
多类名开发使用场景：
(1) 可以把一些标签元素相同的样式(共同部分)放到一个类里面；
(2) 这些标签都可以调用这个公共的类，然后再调用自己独有的类；
(3) 节省CSS代码，同意修改非常方便。

3. id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以” # “来定义。
语法

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

示例代码：
例：将id为nav元素的内容设置为红色。

<style>
  #pink {
            color: pink;
        }
</style>

<div id="pink">迈克尔·杰克逊</div>

小结：
id选择器口诀：样式#定义，结构id调用；只能调用一次，别人切勿使用。
id属性只能在每个HTML文档中出现一次
id选择器 vs 类选择器 的区别
① 类选择器(class)好比人的名字，一个人可以有多个名字，同事一个名字也可以被多个人使用。
② id选择器好比人的身份证号码，全中国是唯一的，不的重复。
③ id选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中使用的组多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配只用。

4. 通配符选择器

在CSS中，通配符选择器使用 ” * “定义，它表示选取页面中所有元素(标签)。

语法

* {
            属性1: 属性值1;
            ......
 }

示例代码：

 * {
            color: red;
        }

小结：

• 通配符选择器不需要调用，自动就给所有的元素使用样式；
• 特殊情况才使用，如： 清楚所有元素标签的内外边距。

 * {
            margin: 0;
            padding: 0;
   }

基础选择器总结：

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，如:<p>	不能差异化选择	较多	p {color: red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.red { color: red;}
id选择器	一次只能选择1个标签	id属性只能在每个HTML文档中出现一次	一般和js搭配	#pink { color: pink; }
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red; }

• 如果是修改样式，类选择器是使用最多的。

二、复合选择器

符合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

• 复合选择器可以更准确、高效的选择目标元素(标签)
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
• 常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等。

1. 后代选择器(重要)

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

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

示例代码：

   <style>
        ol li {
            color: pink;
        }
    </style>

小结

• 元素1和元素2中间用空格隔开；
• 元素1是父级，元素2是子级，最终选择是元素2；
• 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可；
• 元素1和元素2可以是任意基础选择器。

2. 子选择器(重要)

子元素选择器(子选择器)只能选择作为某元素的最近一级的子元素。简单理解就是亲儿子元素。

语法

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

示例代码：

    <style>
        .nav>a {
            color: red;
        }
    </style>


   <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>

• 元素1和元素2中间用大于号隔开；
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2必须是亲儿子，其孙子、重孙之类都不归他管，亦可以叫亲儿子选择器。

3. 并集选择器(重要)

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法

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

上述语法表示 选择元素1和元素2。
示例代码：

  div,
  p {
        color: pink;
  }

• 元素1和元素2中间用逗号隔开；
• 逗号可以理解为和的意思；
• 并集选择器通常用于集体声明；

4. 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给连接添加特殊效果，或选择第一个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如：:hover、:first-child。
伪类选择器有多种，如：链接伪类，结构伪类等等。

4.1 链接伪类选择器

语法

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

属性示例代码：

      /* 1.选择所有未被方位的链接 */
        a:link {
            color: #333333;
            text-decoration: none;
        }

        /* 2.选择所有已被访问的连接  */
        a:visited {
            color: yellow;
        }

        /* 3.选择鼠标指经过的的连接 */
        a:hover {
            color: cyan;
        }

        /* 4. 选择活动链接(鼠标按下未弹起的链接) */
        a:active {
            color: green;
        }

开发中常用写法：

      a {
            color: #333333;
            text-decoration: none;
        }

        a:hover {
            color: green;
        }

小结

• 为了确保生效，请按照LVHA的顺序声明:link，:visited，-hover，-active。
• <a href=""></a>链接在浏览器中具有默认样式，所以实际工作中需要给链接单独指定样式。

4.2 focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。

语法

 input:focus {
        background-color: yellow;
 }

示例代码：

代码块

复合选择器总结

选择器	作用	特征	使用情况	隔开符号	用法示例
后代选择器	用来选择后代元素	可以是子孙后代	较多	空格	ol li {color: pink;}
子代选择器	选择最近一级元素	只选择亲儿子	较少	大于 >	.nav>a {color: red; }
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	逗号,	div,p {color: pink; }
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点a{} 和a:hover	a { color: #333333;} a:hover { color: green;}
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus { }	input:focus { background-color: yellow; }

• 开发中，后代选择器，并集选择器，链接伪类选择器使用居多。

END !