css元素选择器菜鸟教程,css基本选择器

CSS基本选择器(对指定的标签设置样式，要把指定的标签选择出来)：元素选择器、类选择器、id选择器、组合选择器、通用选择器

1. 元素选择器(类型选择器或标记选择器)：声明哪些元素采用css样式

2. 类选择器(class)：应用样式而不考虑具体设计的元素，为了将类选择器的样式与元素进行关联，必须将元素中的class属性指定一个适当的值。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。也可以指定特定的HTML元素使用class。

在HTML中，一个class属性还可能包含多个属性值，各个值之间用空格分隔，表示将多类应用到同一个标记中。可以使用多次，表示类别。

Document

/*class 选择器用于描述一组元素的样式*/

/*所有的 p 元素使用 class="special" */

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

内容在这里

版权&copy sjs

来源：https://www.cnblogs.com/sjslove/p/12652336.html