学习css常用基本层级伪类属性选择器
常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{}基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素，层级选择器分为a,b组合、a b后代、a>b子代、a+b a的一个是b，伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色，属性选择器[属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习css常用基本层级伪类属性选择器</title>
<style type="text/css">
/*常用选择器*/
/*html选择符*//* *{}给页面上所有的标签设置模式*/
*{
color: royalblue;
}
/*类选择符*//*.hcls{}给class是hcls的一类标签设置模式；*/
.hcls{
font-weight: bold;
}
/*id选择符*//*#h3{}给id是h3的标签设置样式 */
#h3{
font-style: italic;
}
/*关联选择符 */
div h1{
font-size: 18px;
}
/*组合选择符*/
div,button{
background-color: #ccc;
margin: 5px;
}
/*基本选择器*/
/*::first-letter */
#h3::first-letter{
font-size: 30px;
}
/*::first-line */
.h4::first-line{
color: red;
}
/*:first-child */
.shuiguo li:first-child{
color:#f90;
}
/*:last-child */
.shuiguo li:last-child{
text-decoration: line-through;
}
/*:nth-child(n) */
.shuiguo li:nth-child(2){
text-decoration: overline;
background-color: sienna;
}
/*层级选择器*/
/*a,b组合 */
#h3,.box{
background-color: #ccc;
margin: 5px;
}
/*a b a后代中的b */
.h4 p{
text-decoration: overline;
font-size: 30px;
}
/*a>b a的子元素b */
div>p{
font-style: italic;
}
/*a+b a后面的第一个元素b */
div+span{
height: 40px;
background-color: teal;
color: #fff;
}
/*伪类选择器*/
/*:hover*/
input:hover{
border-radius: 5px;
}
/*:focus焦点*/
input:focus{
outline-color: teal;
}
/*::selection文字选中背景色*/
p::selection{
color: #fff;
}
/* 属性选择器 */
.shuiguo li[title]{
font-size: 100px;
background-color: aqua;
}
/* 选择器[属性=值] 值唯一才可以用,包含多个值的测试不行*/
.shuiguo li[title=pg]{
color: red;
list-style: square;
background-color: #fff;
font-size: 60px!important;
}
/* 选择器[属性^=值]以什么开始 */
.shuiguo li[title^=pg]{
font-size: 20px;
margin: 20px;
}
/* 选择器[属性$=值]以什么结束 */
.shuiguo li[title$=xj]{
background-color: #ccc;
}
</style>
</head>
<body>
<div class="hcls" id="h3">
<h1>html+css+javascript is very much!</h1>
</div>
<div class="hcls h4"><!--多个class用空格分开,id是唯一的-->
<p>If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
If not for life, I can go to bed early and get up early</p><p>多个class用空格分开,id是唯一的</p>
<p>多个class用空格分开,id是唯一的</p>
</div>
<span>div后面的第一个元素</span>
<ul class="shuiguo">
<li title="pg">苹果</li>
<li title="xg pg">西瓜</li>
<li title="pg xj">香蕉</li>
</ul>
<button class="box">按钮</button>
<form action="">
<p>用户名</p><input type="text" name="" id="">
</form>
</body>
</html>