css选择器 http://www.imdsx.cn/index.php/2017/07/27/html1/

Posted 公子兔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css选择器 http://www.imdsx.cn/index.php/2017/07/27/html1/相关的知识,希望对你有一定的参考价值。

CSS选择器

1、id选择器

2、class选择器

3、标签选择器

4、层级选择器(空格)

5、组合选择器(逗号)

6、属性选择器(中括号)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

/* id选择器 --> */

#i1{

height: 48px;

background-color: red;

}

/* class选择器 最常用 */

.div{

height: 48px;

background-color: aqua;

}

/* 标签选择器 */

span{

color: red;

background-color: blue;

}



/* 层级选择器 组合选择器 span标签下面所有div标签颜色改变 层级通过空格*/

span div{

color: aqua;

background-color: red;

}



/* class 层级选择器 层级通过空格*/

.c1 div{

background-color: #336699;

height: 48px;

}



/* id 层级选择器 层级通过空格*/

#i2 div{

background-color: black;

height: 48px;

}



/* 组合选择器 id z1 z2 z3 共用一套css样式 组合 通过逗号*/

#z1,#z2,#z3{

background-color: chocolate;

height: 48px;

}



/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/

.s1,.s2,.s3{

background-color: darkmagenta;

height:48px;

}



/* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/

div[s=‘dsx‘]{

background-color: darkred;

height: 48px;

}

</style>

</head>

<body>

<!-- css style: 里面的写的就叫做css 每一个样式的间隔用; 全部相同的时候引用class-->

<div style="height: 48px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>

<div style="height: 48px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>

<div style="height: 48px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>



<!-- css class引用-->

<div id="i1"></div>

<div class="div"></div>

<div class="div"></div>



<!-- 全局标签选择器 -->

<span>标签选择器</span>



<!-- 层级选择器 组合标签选择器 -->

<span>

<div>组合标签选择器</div>

</span>



<!--层级选择器 class选择器下的div标签 -->

<div class="c1">

<div></div>

</div>



<!--层级选择器 id选择器下的div标签-->

<div id="i2">

<div></div>

</div>



<!-- id组合选择器 -->

<div id="z1"></div>

<div id="z2"></div>

<div id="z3"></div>



<!-- class组合选择器 -->

<div class="s1"></div>

<div class="s2"></div>

<div class="s3"></div>



<!-- 属性选择器 -->

<div s="dsx"></div>

<div name="nn"></div>

</body>

</html>

CSS优先级

标签中style优先级最高,其次在代码中就近找,也就是重下往上找

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>



/* css 优先级 */

.c1{

background-color: darkred;

height: 48px;

}

.c2{

background-color: black;

height: 48px;

}



</style>

</head>

<body>

<div class="c1 c2" style=" font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>

</body>

</html>

引入CSS文件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<!-- 引入css样式 -->

<link rel="stylesheet" href="tmp.css">

</head>

<body>

<div class="c1 c2" style=" font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">></div>

</body>

</html>

CSS属性

height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body style="margin: 0;">

<!-- 边框 border:宽度 实线还是虚线 颜色-->

<div style="height: 48px;border: 1px solid red"></div>

<!-- 边框 border 上下左右边框 都可单独配置 -->

<div style="height: 48px;border-left: 1px dotted red"></div>



<!-- height:高 width:宽 -->

<div style="height: 48px;width: 48px;border: 1px solid red"></div>

<!-- 宽高的设定可以是指定的像素 也可以百分比 -->

<div style="height: 48px;width: 80%;border: 1px solid red"></div>



<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->

<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>



<!-- 平行方向左右居中 text-align: center -->

<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">大师兄</div>



<!-- 垂直方向居中 line-height:垂直方向要根据标签高度-->

<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div>



<!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->

<div style="width: 20%;float: left">1</div>

<div style="width: 20%;float:left;">2</div>

<div style="width: 20%;float:right;">3</div>



<!-- 块及标签的占满100%是相对来说,相对与他外层的div -->

<div style="width: 400px;height: 400px;border: 1px solid black;">

<div style="width: 100px;height: 40px;float:left;"></div>

<div style="width: 100px;height: 40px;float:left;"></div>

<div style="width: 100px;height: 40px;float:left;"></div>

<div style="width: 100px;height: 40px;float:left;"></div>

<div style="width: 100px;height: 40px;float:left;"></div>

</div>



<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->

<div style="height: 100px;display: inline">外联标签</div>

<!-- display:block 内联标签转换为块及标签-->

<span style="height: 100px;display: block;">内联标签</span>

<!-- 行内标签:无法设置高度、宽度、padding、margin-->

<!-- 块级标签:无法设置高度、宽度、padding、margin-->

<span style="width: 100px;height: 100px;">大师兄</span>

<!-- 通过display:inline-block 可以完美的解决这个问题 &nbsp;他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->

<span style="width: 100px;height: 100px;display: inline-block;">大师兄</span>

<!-- 让标签消失 &nbsp;display:none-->

<span style="display: none">我不显示的</span>



<!-- 外边距 margin 内边距 padding-->

<!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->

<div style="border: 1px solid red;height: 100px">

<div style="height: 70px;margin-top: 30px"></div>

</div>

<!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->

<div style="border: 1px solid red;height: 100px">

<div style="height: 70px;padding: 10px">内边距增加</div>

</div>



</body>

</html>

例子

各个网站的header

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body style="margin: 0;">

<div class="p-header" style="width: 100%;">

<div style="width: 980px;margin: 0 auto">

<div style="height: 48px;line-height: 48px;float: left">收藏本站</div>

<div style="height: 48px;line-height: 48px;float: right">登录</div>

<div style="height: 48px;line-height: 48px;float: right">注册</div>

<!-- clear:both 清除浮动,将内层div拉下来从而撑开外层div-->

<div style="clear: both"></div>

</div>

</div>

</body>

</html>

 
































































































































































































































































































































































































































































以上是关于css选择器 http://www.imdsx.cn/index.php/2017/07/27/html1/的主要内容,如果未能解决你的问题,请参考以下文章

Selenium彩蛋篇-三种等待的使用方式

前端基础css 选择器

css的复合选择器

css都有哪些选择器

css都有哪些种类的选择器

CSS3选择器入门