CSS选择器
原创CSS选择器
原创
通用选择器 ： （* ）| *{}|选择所有字符，使用极少，存在意义不大
标签选择器 ： 元素名称 |div{...}|使用标签选择元素，优先级最低，使用最广泛|
类选择器 ： .<类名> |.class{...}|根据class值选择元素|
id选择器 | #id{...} |#one{...}| 根据id值选择属性，优先级最高|
属性选择器 |[<条件>] |[herf]{}|根据属性选择元素|
并集选择器 | <选择器>，<选择器> |em，strong{}|同时匹配多个选择器，取他们的并集|
后代选择器 |<选择器><选择器> |#wrap p{...id为wrap下的所有p标签....}|先应用第二个的元素，且在第一个元素中|
子代选择器 | <选择器>><选择器>|ul>li|匹配第二个选择器，属于第一个选择器的子代|
兄弟选择器 |<选择器>+<选择器> |p+a{}|匹配紧跟第一个选择器的选择器，并应用元素|
伪选择器 |::<伪元素>或:<伪类>|p::first-line、a:hover{}|w伪选择器不是直接对应HTML定义的元素,而是像选择器增加特殊效果|
基础选择器优先级从低到高为：标签，类， id选择器
```
<style type="text/css">
/标签选择器
p{
font-size: 50px;
color: blue;
}
/类选择器
.first{
font-size: 50px;
color: green;
}
/ID选择器
#one{
font-size: 50px;
color: pink;
}
</style>
```属性选择器
E[att^=value]
E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
```
a[href ^= "http://"] {
padding-right: 20px;
background: url(img/external.gif) no-repeat right top;
}
```E[att$=value]
E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性,att属性值包含后缀为value的子字符串。与E[att^=value]选择器一 样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。
```
<style>
a[href $= "doc"],
a[href $= "docx"] {
background: url('img.png) no-repeat left center;
}
</style>
.......
<a href = "a.doc">DOC文件</a>
```E[att*=value]
E[att* =value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value的子字符串。该选择器与前两个选择器一样，E元索也可以省略，如果省略则表示可以匹配满足条件的任意元素。
```
[class*="warning"] {
color: #fff;
background: red;
}
```后代选择器
```
<style type="text/css">
div p b{
font-size: 30px;
}
</style>
.......
<div>
<p><b>王维</b></p>
</div>
```并集选择器
```
<style type="text/css">
.one,#id,p,h1{
font-size: 50px;
color: yellow;
}
</style>
<body>
<div class="one">床前明月光</div>
<p >疑是地上霜</p>
<span id="id">举头望明月</span>
<h1>低头思故乡</h1>
</body>
```关系选择器
子代选择器（>）
子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素，可以这样写: h1 > strong。
```
<style type="text/css">
ul > li{
font-size: 50px;
color: red;
}
</style>
......
<ul><li>李白</li></ul>
```兄弟选择器(+、~)
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
(1)临近兄弟选择器
该选择器使用加号“+ ”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一-个元素。
(2)普通兄弟选择器
该选择器使用加号“~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一-个元素。
```
<style type="text/css">
h1+p{
font-style: italic;
font-size:52px;
}
</style>
...
<body>
<h1>兄弟选择器</h1>
<p>效果</p>
<p>格式</p>
</body>
```
伪元素选择器
:before选择器
:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。其基本语法格式如下:
<元素>:before{
content:文字/url();
}在上述语法中，被选元素位于":before"之前，“{} ”中的content属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片。
:after选择器
:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
结构化伪类选择器
:root选择器
:root选择器用于匹配文档根元素，在HTML中， 根元素始终是html元素。也就是说使用“:root选择器”定义的样式
，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。
:not选择器
如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素,让它不使用这个样式， 可以使用:not选择器。 如: body *:not(h3)。
:noly-child选择器
:only-child选择器用于匹配属于某父元素的唯一子 元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用":only-child选择器”可以选择这个子元素。
:first-child和last-child选择器
:first-child选择器和:last child选择器分别用于为父元素中的第-个或者最后一个子元素设置样式。
:nth-child(n)和nth-last-child(n)选择器
使用:first- child选择器和:last- child选择器可以选择某个父元素中第-一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是first-child选择器和:last-child选择器的扩展。
:nth-of-type(n)和:nth-last-of-type(n)选择器
这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素，而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。
:empty选择器
:empty选择器用来选择没有子元素或者文本内容为空的所有元素。
:target选择器
:target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。
链接伪类
链接伪类
在CSS中，通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类，他的名称是由系统定义的，通常由标记名、类名或id名加“:"构成。超链接标记<a>的伪类有4种，具体如下表所示。
CSS浮动与定位
在一个网页中，默认情况下块级元素独占一行，是自上而下排列，行内元素自左向右排列，但是在实际的网页布局中往往需要改变这种单调的排列方式，使网页内容变得丰富多彩，CSS的浮动和定位完美的解决了这个问题。
•CSS浮动
–CSS的浮动可以通过float属性进行设置，默认值为none（不浮动）。
•CSS定位
–在网页开发中，如果需要网页中的某个元素在网页的特定位置出现，例如弹出菜单，这时可以通过CSS的position属性进行设置，示例如下：
position:relative; /*相对定位方式*/
left:30px; /*距左边线30px*/
top:10px; /*距顶部边线10px*/
总例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
<style type="text/css">
/*为主体设置格式*/
body{
margin:0% auto;padding: 0;text-align: center;
}
/*课程表大小格式*/
.whole{
width: 900px;
height: 1024px;
background: url("");
margin: 0 auto;
}
/*课程表顶部*/
.TOP{
width: 900px;
height: 5px;
background-color: #34f0ff;
margin-top: 30px;
}
/*设置body的子代div属性*/
body>div{
margin-left: auto; margin-right: auto;text-align: center;
}
/*设置星期显示的格式*/
.WEEK{
width: 900px;
height: 60px;
background-color: #dae3ff;
filter: alpha(opacity=60);/*设置为半透明*/
opacity: 0.6;
}
/*设置WEEK的后代css样式*/
.WEEK ul{
padding-left: 60px;
}
.WEEK ul li{
font-family: 黑体;
font-size: 40px;
color: #34f0ff;
text-align: center;
width: 120px;
}
div,ul,li,p,dd,dt,dl,ol,from,img{margin: 0px;padding: 0;border:0px}
ul,li,ol{list-style:none}
.float{
float:left;
}/*浮动*/
/*设置课程格式*/
.courses{
width: 900px;
height: 860px;
margin-top: 0px;
background-color: aquamarine;
}
.Num{
width: 60px;
height: 860px;
margin-top: 1px;
background-color: aqua;
filter: alpha(opacity=60);
opacity: 0.8;/*不透明度*/
}
.Num ul li{
font-family:"Adobe 黑体 Std R";
font-size: 25px;
color: blue;
width: 60px;
height: 70px;
line-height: 70px;
text-align: center;
}
.one ul li{width: 95px;height: 150px;}
.one,.two,.three,.four,.five,.six,.seven ul{margin-top: 1px;}
.dingding li{
width: 90px;
height: 130px;
border-radius: 10px;/*加圆框*/
border: antiquewhite solid ;
margin-left: 3px;
margin-bottom: 3px;
box-shadow: coral inset 0 10px 8px;/*添加阴影效果，内投影*/
}
.dingding li p {
font-size: 15px;
color: beige;
width: 100px;
height: 150px;
display: -webkit-box;/*设置横列展示效果*/
-webkit-box-align: center;
-webkit-box-pack:center;
}
.dianlu{
background-color: black;
}
.daolun{
background-color: cyan;
}
.mzd{
background-color:red;
}
.ps{
background-color: #ff3139;
}
.ty{
background-color: darkolivegreen;
}
.web{
background-color: blanchedalmond;
}
.cao{
background-color: indigo;
}
</style>
</head>
<body>
<div class="whole">
<div class="TOP"></div>
<div class="WEEK">
<ul>
<li class="float">周一</li>
<li class="float">周二</li>
<li class="float">周三</li>
<li class="float">周四</li>
<li class="float">周五</li>
<li class="float">周六</li>
<li class="float">周日</li>
</ul>
</div>
<div class="courses">
<div class="Num float">
<ul>
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
<li >5</li>
<li >6</li>
<li >7</li>
<li >8</li>
<li >9</li>
<li>10</li>
</ul>
</div>
<!--Monday-->
<<div class="one float" >
<ul class="dingding">
<li style="border: none;box-shadow: none;width: 150px"></li>
<li ><p>UI设计平面</p></li>
<li ><p>视觉设计基础</p></li>
</ul>
</div>
<!--Tuesday-->
<div class="two float">
<ul class="dingding">
<li ><p>UI设计平面</p></li>
<li class="ps"><p>PS</p></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li class="cao"><p>操作系统</p></li>
</ul>
</div>
<!--Wednesday-->
<div class="three float">
<ul class="dingding">
<li class="cao"><p>操作系统</p></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li class="web"><p>Web前端</p></li>
<li class="daolun"><p>软件工程导论</p></li>
</ul>
</div>
<!--Thursday-->
<div class="two float">
<ul class="dingding">
<li class="mzd" ><p>毛泽东中国特色思想理论</p></li>
<li class="dianlu"><p>电子与电路</p></li>
<li style="border: none;box-shadow: none;width: 130px"></li>
<li class="cao"><p>操作系统</p></li>
<li class="ty"><p>大学体育</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
