CSS前端新手知识3-CSS选择器(选择符)详解

394 阅读2分钟

CSS选择器是什么?

  每一条CSS样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素      

1.CSS选择器有几大类?

1.类型选择器
2.ID选择器
3.类选择器
4.群组选择器
5.包含选择器
6.伪类选择器
7.通用选择器

1.类型选择器(标签选择符)

所有的HTML里面的标签都可以直接当作选择器进行应用。
    例如 :<DIV>,<P><Body><span><a><em><i><strong>

        特点:能选中当前结构里面全部同名标签。</font>  
        应用:想统一某一个标签样式的时候或者是清除某个标签默认样式的时候。      

2.ID选择器(唯一)

    语法: 起名字: <标签 ID="名称"></标签> 用名字写样式: #名称{ 属性:属性值 }

    特点:唯一性!在同一个页面里面,一个ID名只能用一次。
    应用:来划分网页外围结构

3.类选择器(Class选择器)

    语法: 其名称: <标签 class="名称1 名称2 名称3 名称4..."></标签> 用类名写样式 .名称{属性:属性值;}

    特点:
        1:一个元素可以有多个类名,类名可以重复出现
        2:可以制定一类样式.  

4.群组选择器

    语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式. 选择符1,选择符2,选择符3,选择符4{ 属性:属性值; } #box,.con,h3,#wrap{ width:300px; }

5.包含选择器(后代选择器或者子代选择器)

    语法:.ul .li{} 父元素 子元素{ 属性:属性值; }

6.伪类选择器

    a:link {color: red;}                    /* 未访问的链接状态 */
    a:visited {color: green;}	            /* 已访问的链接状态 */
    a:hover {color: blue;}                  /* 鼠标滑过链接状态 */
    a:active {color: yellow;}               /* 鼠标按下去时的状态 */

7.通配符选择器

     *{}
     特点:可以选择HTML网页中所有标签,一般用于重置样式使用。

          以上内容全部由本人编写分享欢迎学习指导 :H5逆战班欢迎你