标签：属性 code ref back lan 网页 ast 字体 漂亮
选择器属性
通过属性的复杂叠加才能做出漂亮的网页
选择器
通过选择器找到对应的标签设置样式
选择器的作用
选择对应的标签，为之添加样式
标签选择器
根据标签名找到标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
div{
color: red;
}
p{
color: greenyellow;
}
</style>
</head>
<body>
<div>22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p>1111111111111111</p>
</body>
</html>代码：这是普通的页内样式； 注意style中的注释方式不一样。
上图：
可以看到业内样式设计成功； 那怎么将其中部分内容单独进行设计呢，使用行内样式的确可以做到，但是body中一般都是做内容和结构，所以尽量不要使用行内设计。
所以我们可以通过类选择器来设计，为某个或多个内容进行类命名，然后针对命名的类进行设计。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
div{
color: red;
}
p{
color: greenyellow;
}
/*类选择器*/
.test1{
color: blue;
}
</style>
</head>
<body>
<div>22222222222</div>
<div>22222222222</div>
<div class="test1">22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p class="test1">1111111111111111</p>
</body>
</html>代码↓
在body中为两个内容进行类命名为 test1；
通过点“.”+类选择器名称，对类命名为test1的内容进行设计。
上图：可以看到类选择器的设计为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
div{
color: red;
}
p{
color: greenyellow;
}
/*类选择器*/
.test1{
color: blue;
}
/*id选择器*/
#main{
font-size: 60px;
}
</style>
</head>
<body>
<div id="main">22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div class="test1">22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p class="test1">1111111111111111</p>
</body>
</html>代码↓：
在body中，在内容中使用 id="" 来定义id，这个id是唯一的，不可重复，否则会报错；不过在html中多个内容使用同一个id也是可以成功的，这是因为html是弱类型语言，在JS中就会报错。
在style中使用#main{} 来设计该id的样式
p , #main{
border: 4px dashed green;
}代码↓：
在style中加入上面的代码； 表示或p或#main的标签都会被设计；
可以放多种标签进行同时设计
复合选择器就是与的关系。
不管放了几个标签，都必须同时符合才会生效设计内容。
/*复合选择器*/
p.test1{
font-size: 66px;
}
div#main{
font-size: 10px;
}代码：新增上面的代码； 设计了两个复合选择器； 每个复合选择器的两个条件都必须同时满足，注意复合标签之间不能有空格。
上图：可以看到同时满足两个复合条件的标签的字体大小改变了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
div{
color: red;
}
p{
color: greenyellow;
}
/*类选择器*/
.test1{
color: blue;
}
/*id选择器*/
#main{
font-size: 60px;
}
/*并列选择器*/
p , #main{
border: 4px dashed green;
}
/*复合选择器*/
p.test1{
font-size: 66px;
}
div#main{
font-size: 10px;
}
/*后代选择器*/
div .test3 a{
font-size: 66px;
}
</style>
</head>
<body>
<div id="main">22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div class="test1">22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p class="test1">1111111111111111</p>
<div id="test2">
<p class="test3">
<a href="#">我是超链接</a>
</p>
</div>
</body>
</html>代码↓：
body下面增加了部分内容；
style中增加了后代选择器设计，先满足div标签，div后面要满足.test3标签，test3后面要满足a标签；
/*后代选择器*/
/*div .test3 a{*/
/* font-size: 66px;*/
/*}*/
div a{
font-size: 66px;
}代码：如果把中间的某一个标签去掉也是可以的，因为a也属于div的后代。
/*后代选择器*/
/*div .test3 a{*/
/* font-size: 66px;*/
/*}*/
/*div a{*/
/* font-size: 66px;*/
/*}*/
#test2 .test3 a{
font-size: 66px;
}
代码：将最前面的标签改成#test2 也是满足条件的。
与后代选择器效果差不多，但要求必须是紧挨着的下一级符合才可以，跳过匹配某个标签的后代是不生效的。
上图：
必须是div下面紧挨着的p标签才会生效；
div下的span的p标签是不生效的；
直接后代选择器表达： div > p{}
上图：倒数第2个p标签与其上面的div标签相邻
上图：匹配div标签，且div中有名为name的属性； 第1条和第2条会相匹配。
上图：多属性选择器的匹配方法。 第二条匹配。
上图：匹配div，名为name的属性，且name属性的值要是“jack”，满足这三个条件才能匹配
其中常用的有focus和hover
/*伪类选择器*/
input:focus{
width: 500px;
height: 60px;<input type="text" value="">上2代码：body中添加input内容； style添加针对input:focus的设计；
上图：默认没有点击的样式
上图：点击后的样式，就变成我们设计的样子了，高度和宽度再点击（聚焦）的时候就改变了。
input:focus{
width: 500px;
height: 60px;
/*调整边框*/
outline: none;
border: 1px solid red;代码：调整边框，先将原来的边框给去掉（outline: none），才能重新定义新的边框。
上图：如果不先去掉原来的边框，新的border 样式就不会生效。
/*id选择器*/
#main{
font-size: 60px;
width: 500px;
height: 200px;
background: deepskyblue;
}代码：修改id选择器的设计样式
上图：当前修改后的样式
#main:hover{
width: 100px;
height: 100px;
}代码：在style中增加上面的代码的样式
上图：将鼠标悬浮在上面的时候，可以看到边框大小改变了。
#test4:first-letter{
font-size: 55px;
}<p id="test4">我是段落</p>上2代码：
body增加一个段落，并且使用id选择器；
style中增加first-letter伪元素
上图：文本的第一个字母的样式改变了
标签：属性 code ref back lan 网页 ast 字体 漂亮
原文地址：https://blog.51cto.com/daimalaobing/2445586
