Css选择器 id class 标签 群组 后代 通用 伪类选择器 详细介绍

共享博客

个人博客 http://www.sharedblog.cn/?post=107

1.id选择器

    语法:

  <标记 id="id名"></标记>
        #id名{
	        属性:属性值;
        }

    eg:

<h1 id="box">共享博客</h1>
        #box{
        	color: red;
        }

     注:①id选择器的优先级最高,id名是唯一的,不能出现同名id;          

           ②id名的命名要语义化,常用的命名方法:驼峰命名法(#subNavTitle),下划线连接命名法(main_left_con)。

2.类选择器(class选择器)

    语法:

<标记 class="class名"></标记>
        .class名{
                属性:属性值;
        }

    eg:

<div class="box">共享博客</div>
 .box{
                color:red;
        }

    注:还可以使用类名词列表的方式设置样式,用法如下:

<标记 class="c1 c2">共享博客</标记>
        .c1{
                font-size: 12px;
                color: red;
        }
        .c2{
                text-decoration: none;
        }

    当某个元素有部分样式和其他元素相同,也有个别样式和其他元素不同时,可以使用类名词列表的方式。

3.标签选择器(类型选择符/元素选择符)

    语法:

      标记名称{
         属性:属性值;
      }

    eg:

        a{
                text-decoration:none;
        }
        body{
                font-family:"微软雅黑",Arial;
        }

    注:①如果想改变某个元素的默认样式时,可以使用类型选择符;

          ②当统一文档某个元素的显示效果时,可以使用类型选择符。

4.群组选择器

    语法:

        选择符1,选择符2,选择3,{
                属性:属性值;
        }

    eg:

        ul,ol{
                list-style:none;
        }
        .news, .intro, .job{
                float: left;
        }

    注:你想为html中多个标签元素设置同一个样式时,可以使用群组选择器(多出现在共同样式中)

5.后代选择器

    语法:

        选择符1  选择符2{
                属性:属性值;
        }

    eg:

        .box a{
                color: black;
        }

    注:选择符1和选择符2必须包含与被包含的关系

6.通用选择器(通配符)

    语法:

        *{
                属性:属性值;
        }

    eg:

        *{
                margin:0;
                padding:0;
        }

    注:*匹配html根元素所有的标签元素

7.伪类选择器

    语法:

        选择器:hover{
                属性:属性值;
        }

    超链接的四个状态:

        a:link 链接没有被访问过后的状态

        a:visited 链接被访问过后的状态

        a:hover 鼠标滑过时的状态

        a:active 鼠标按下时的状态

    注:为了方便使用,我们将a的四个状态简写一下形式

        a {
                color: black;
        }
        a:hover {
                color: red;
        }

个人博客  http://www.sharedblog.cn/?post=107

猜你喜欢

转载自blog.csdn.net/tianpeng1996/article/details/88342561