基本选择器：
标签选择器 选中所有的p标签
p {
color: aqua;
}
id选择器
#box1 {
color: pink;
}
类选择器
.box2 {
color: blueviolet;
}
通配符选择器
*{
}
<p>我是一段文字</p>
<div id="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>
<div class="box2">我是盒子3</div>
<p>我是一段文字</p>
包含选择器：
子代选择器 选中亲生儿子
.a>li {
background-color: pink;
}
后代选择器 找到后代所有要找的元素
.a li {
color: blueviolet;
}
复合选择器:
/* div {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,
p,
span {
color: red;
}
属性选择器：
<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/*鼠标经过时*/
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>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>....
伪元素选择器
/*创建伪元素，在每一行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>
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
