2024年04月11日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
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://so.lmcjl.com/news/1762/