1.id选择器

语法：标记>#id名{

属性:属性值;

}

eg:

共享博客

color:red;

}

注：①id选择器的优先级最高，id名是唯一的，不能出现同名id；

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

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

语法：标记>.class名{

属性:属性值；

}

eg：

共享博客.box{

color:red;

}

注：还可以使用类名词列表的方式设置样式，用法如下：共享博客标记>.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：.boxa{

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

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓