CSS基本选择器(对指定的标签设置样式，要把指定的标签选择出来)：元素选择器、类选择器、id选择器、组合选择器、通用选择器
1. 元素选择器(类型选择器或标记选择器)：声明哪些元素采用css样式
2. 类选择器(class)：应用样式而不考虑具体设计的元素，为了将类选择器的样式与元素进行关联，必须将元素中的class属性指定一个适当的值。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。也可以指定特定的HTML元素使用class。
在HTML中，一个class属性还可能包含多个属性值，各个值之间用空格分隔，表示将多类应用到同一个标记中。可以使用多次，表示类别。
Document
/*class 选择器用于描述一组元素的样式*/
/*所有的 p 元素使用 */
p.special{
color: red;
}
应用类属性
应用段落
3. id选择器(id)：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
不同与类选择器，id选择器不能组合使用，不容许有空格分隔的多个值，仅仅使用一次。
#red {color:red;}
这个段落是红色。
4.组合选择器：
多个选择器(元素选择器、类选择器、id选择器等)通过逗号连接。
样式一样的可以进行组合。
html5语义化
header, section, footer, aside, nav, article, figure
{
display: block;
}
nav,header,p,article{
width: 1200px;
margin:0 auto;
}
ul{
height:40px;
background-color: #fff;
list-style: none;
display: inline-block;
width: 1200px;
padding: 0px;
}
li{
line-height: 40px;
text-align: center;
float: left;
width: 400px;
margin:0 auto;
}
li:hover{
background: pink;
}
a{
text-decoration: none;
}
.post{
border:1px dashed #000;
padding: 0 0 20px 20px;
margin-bottom: 40px;
padding-top: 10px;
background-color: #fff;
}
#content{
border:1px solid #ccc;
padding:30px 40px;
background-color: rgb(247,244,255);
margin-top: 20px;
}
页面导航
- 查看相关内容
- 返回首页
- 返回本页
马上要去工作了，也不知道会怎么样
作者，初级码农
培训的，大概培训了半年，js、jquery、bootstrap、angular、vue、Ajax、数据库、php、面向对象、Web服务器、移动端
我觉得还行
作者：Amy
工作机会还多的，php是轻量级网站开发最好的选择
不错了
作者：键盘侠
学历本科、信息专业、会这么多，不会找不到的，对自己有信心一点
我的帖子我做主
关于楼主
用户组：菜鸟初级
阅读量：20
发表时间：2020-03-18
my logo
5. 通用选择器： 星号(*)
该选择器可以与任何元素进行匹配，可以对文档中的所有元素设定属性和属性值。
div布局
/*通用选择器*/
*{margin: 0;
padding: 0;
border: 0;
}
/*id选择器*/
#header{
width: 100%;
height: 80px;
line-height: 80px;
background-color: rgb(255,165,0);
}
/*id选择器*/
#main{
height:200px;
}
/*id选择器*/
#menu{
float: left;
height:200px;
width: 10%;
background-color: yellow;
}
/*元素选择器*/
menu{
height: 200px;
}
/*元素选择器*/
b{
display: inline-block;
margin-top: 10px;
font-size: 18px;
margin-left: 5px;
}
/*元素选择器*/
ul{
margin-left: 46px;
list-style: none;
margin-top: 10px;
}
/*后代选择器*/
ul li{
line-height: 40px;
}
/*id选择器*/
#content{
float: left;
height:200px;
background-color: pink;
width: 90%;
}
/*后代选择器*/
#content p{
text-align: center;
line-height: 200px;
}
/*id选择器*/
#footer{
background-color: gray;
height:80px;
line-height: 80px;
text-align: center;
}
主要页面标题
菜单
- HTML
- CSS
- JavaScript
内容在这里
版权© sjs
来源：
