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

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;
}

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓