目录
基本选择器
标签选择器 选中所有的p标签
标签名 {
CSS属性名: 属性值
CSS属性名: 属性值
...
}
p {
color: aqua;
}
id选择器
#id属性值 {
CSS属性名: 属性值
CSS属性名: 属性值
...
}
#box1 {
color: pink;
}
类选择器
.类名 {
CSS属性名: 属性值
CSS属性名: 属性值
...
}
.box2 {
color: blueviolet;
}
通配符选择器
* {
CSS属性名: 属性值
CSS属性名: 属性值
...
}
*{
}
包含选择器
子代选择器 选中亲生儿子
选择器1>选择器2{
CSS属性名: 属性值
CSS属性名: 属性值
...
}
.a>li {
background-color: pink;
}
后代选择器 找到后代所有要找的元素
选择器1 选择器2{
CSS属性名: 属性值
CSS属性名: 属性值
...
}
.a li {
color: blueviolet;
}
属性选择器
<style>
input {
background-color: pink;
}
input[type="password"] {
background-color: aquamarine;
}
div[id] {
width: 300px;
height: 300px;
background-color: blue;
}
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}
</style>
...<body>
<input type="text">
<br>
<input type="password">
<br>
<input type="search">
<br>
<input type="url">
<br>
<input type="number">
<br>
<div id="aquamarine">1</div>
<br>
</body>...伪类选择器
选择器:hover {
CSS属性名: 属性值
CSS属性名: 属性值
...
}
hover/*鼠标经过时*/
a:hover div{
对div的更改
}
a:hover +div{
对div更改的
}
...<a>
<div></div>
</a>...结构伪类选择器
父元素
...<style>
/*选中第1个li，last-child选中最后一个“孩子”*/
ul li:first-child{
...
}
/*选中第几个li并进行背景颜色设计*/
ul li:nth-child(4){
...
}
/*选中第li的奇数，even是偶数，先看（）里面的，再看li，所以是整体ul里面的第几个*/
ul li:nth-child(odd){
...
}
/*先看li再看（）里面的，所以是li的的第几*/
ul li:nth-of-type(..){
...
}
</style>
...<body>伪元素选择器
/*创建伪元素，在每一行li前面加content里面的内容*/
<style>
1.ul li::before(or after){
content:"~"
}
2.input ::placeholder{ /*表单提示词*/
color:red
}
3.ul li:nth-child(4)::selection{ /*选中时*/
。。。
}
</style>
...<body>
<form>
<input type="text" name="" placeholder="输入框内固定的较浅的提示词">
</form>
<ul>
<li>1213</li>
<li>34234</li>
...
</ul>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
