css中的基础选择器

css基础选择器

基础选择器的作用：

1. 作用：

规范了页面中哪些元素能够使用定义好的样式
目的： 匹配页面元素

基础选择器的分类：

一. 通用选择器、 元素选择器、 类选择器、 ID选择器、
群组选择器、后代选择器、 子代选择器、 伪类选择器.

1.通用选择器：

作用：

匹配页面中所有的元素

语法：

  *{样式声明;}

通用选择器的缺点:

效率较低，尽可能少用。

ex（例子）：
网页中div文字颜色为橘黄色

命令显示：

网页示例图：

2. 元素选择器：

作用：

定义页面某一标签的默认样式

语法：

 元素{
       样式声明； 
    }

ex(例子)：
页面上所有的div文字大小为12px，文字颜色为橘黄色
页面上所有的span元素颜色为红色

命令显示图

网页实例显示图

3. 类选择器

作用：

由css定义好，可以被任意标记的class属性值进行引用的选择器。

语法：

  .类名{样式声明;}

类名：
1. 不能以数字开始
2. 除_,-意外不能有其它特殊符号
引用：

引用方式 - 多类选择器的引用
可以将多个类选择器，同时应用在一个元素中
语法： <ANY class=“class1 class2 class3”>

定义方式 - 分类选择器的定义:

将元素选择器和类选择器结合起来使用，从而实现对某种元素不同
样式的细分控制

          语法：
          元素选择器.类选择器{样式声明}

ex（例子）：
1.p.redColor{}
定义 class redColor为的p元素的样式

命令显示图：

网页示例图：

ID选择器：

作用：

针对指定ID值的元素去定义样式

语法：

#ID值{样式声明}
ID值，一定要对应某个元素的ID值

ex（例子）：

定义页面中 id为header 的元素 的文字大小为 30pt，背景颜色为 orange色
定义页面中 id为main的元素文字大小18pt， 加粗显示（font-weight：bold）
2.定义页面中 id为img_list 的元素背景颜色为绿色，斜体显示文字（属性：
font-style，值： italic）

命令显示图：

网页示例图：

5. 群组选择器

作用:

选择器生命是以（，）隔开的选择器列表

语法：

选择器1，选择器2，选择器3，…{}

ex（例子）：

span，.important,#main,div.redColor{
color:red;
font-size:12px;
}
页面中的所有的span，以及class为important的元素，
id为main的元素以及class为redColor的div元素，
它们的样式为 color：red,font-size:12px;

命令显示图：

网页示例图：

6. 后代选择器

后代：

只要具备层级关系的元素，被嵌套的都可以称之为 后代元素

语法：

选择器1 选择器1，选择器2，{样式声明;}

ex(例子)：
1. #d1 span{}
作用： 匹配id为d1中的 所有的span

命令显示图：

网页示例图：

7. 子代选择器：

子代：

只具备一级层级关系的元素，被嵌套的称之为 子代元素

语法：

选择器1，选择器2，{样式声明}

8. 伪类选择器

作用：

匹配页面元素的不同状态的选择器

分类：

1. 链接伪类：
1. ：link，匹配尚未被访问的超链接状态
2. ：visited，匹配访问后的超链接的状态
推荐使用方式：
元素：伪类{}

                匹配id为anchor的元素为被访问时的样式
                #anchor：link{}

                匹配页面中id为myAn元素的访问过后的状态
                #myAn：visited{}

                 a:link{

                }

2. 动态伪类：

               1. :hover 匹配鼠标悬停在元素上的状态  （重点）
               2. ：active 匹配元素被激活时的状态 
               3. ：focus 匹配元素获取焦点时的状态（test，password，textarea）

3. 目标伪类
4. 元素状态伪类 .
6. 结构伪类
8. 否定伪类

选择器的优先级：

示例图：

命令显示图：

网页示例图：

命令显示图：

网页示例图：