一、选择器
1.+ ：下一个兄弟选择器
2.~ ：下面所有兄弟
选中item元素之后的每一个li*
.item:hover~li{
font-size: 30px;
}
3.属性选择器
/*满足href为baidu的a标签，改变样式 需要精确的路径才能选择准确*/
a[href="baidu"] {
font-size: 20px;
font-weight: bold;
}
/*模糊查找 以b字母开头的路径 */
a[href^="b"]{
color: red;
}
4.以某项内容结尾的$
/*以三为结尾的选中 4数字键有$*/
a[href$="3"]{
text-decoration:none;
}
5.包含某个字母的标签内容
/*路径中包含i的a标签*/
a[href*="i"]{
background-color: orange;
}
6.不可用的input disabled/enable
/*不可用的input*/
input[type="text"]:disabled{
background-color: blue;
}
/*可用的input，激活了*/
input[type="text"]:enabled{
background-color: red;
}
7.可以改变全局的样式，不需要选择
input[type="checkbox"]{
width: 100px;
height: 100px;
}
/*可以用来修改全局的样式，不用我们用类名和标签单独查找了*/
8.伪元素类的选择器
/*每一个p标签，第一行文字改变的样式*/
p::first-line{
color: red;
}
/*每一个p标签的第一个文字改变样式*/
p::first-letter{
font-size: 30px;
font-weight: bold;
}
/*选中文字，和系统自带的颜色不相同，为orange的颜色*/
p::selection{
background-color: orange;
color: #eee;
}
/*first-letter和selection属性有冲突，使用时，需要注意*/
二、边框和圆角
<style>
p{
width: 400px;
height: 400px;
margin:20px;
float: left;
text-align: center;
}
.p1{
background-color: orange;
border-radius: 100px;
}
.p2{
background-color: orange;
border-radius: 50%;
}
.p3{
background-color: orange;
border-radius: 200px 0;
/*四个值：左上角 右上角 右下角 左下角 如果只设置一个值,则默认其他也相同
如果只设置两个值 左上和右下值相同,右上和左下值相同*/
}
.p4{
background-color: orange;
border-radius: 200px 0 200px 200px;
}
.p5{
border-radius: 50%;
height: 200px;
background-color: orange;
}
.p6{
width: 0;
height: 0;
border:200px solid orange;
border-radius: 50%;
/*给右边框设置透明*/
border-right-color: transparent;
/*transparent 透明*/
}
.p7{
width: 0;
height: 0;
border:200px solid orange;
border-radius: 50%;
border-color: red transparent yellow transparent;
/*上有下左设置边框
可以使用border-left-color*/
}
.p8{
background-color: red;
/*每个角占两个边，可以根据每个边设置圆角属性*/
border-radius: 50px/200px;
/*第一个参数代表圆角的水平参数，第二个参数是圆角的垂直线*/
}
/*画一个三角形，等边三角形*/
.p9{
width: 0;
height: 0;
border:200px solid;
border-color:blue transparent transparent transparent;
}
/*等腰三角形*/
.p10{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<p class="p5">p5</p>
<p class="p6">p6</p>
<p class="p7">p7</p>
<p class="p8">p8</p>
<p class="p9">p9</p>
<p class="p10">p10</p>
</body>
三、文本阴影
文本阴影 text-shadow
属性：水平阴影的位置 垂直阴影的位置 模糊的大小（可以理解为模糊的距离 可选） 阴影的颜色
四、盒阴影
盒阴影 box-shadow
属性：水平阴影的位置 垂直阴影的位置 阴影的模糊距离（从此开始，可选可不选） 阴影的模糊的大小 阴影的颜色 阴影开始的位置（有两个值，inset从内层开始改变内阴影，默认的是outset从外层开始改变 外阴影）
结尾： 上一篇： 【HTML08】（初识css终）显示与隐藏、鼠标的样式、轮廓线 下一篇： 【HTML10】css3新增的内容2
1612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
