1,标签选择器:通过元素的标签名称来选择元素,如p选择所有<p>元素。
<style>
p{
color:颜色;
}
</style>
<body>
<p>
文字
<p>
</body>
2,id选择器 在id前加#:通过元素的id属性值来选择元素,如#id选择id属性值为"id"的元素。
<style>
#box1{
color:颜色;
}
</style>
<body>
<div id="box1"></div>
</body>
3,类选择器(多个标签归类是同一个class可以复用):通过元素的class属性值来选择元素,如.class选择所有class属性值为"class"的元素。
<style>
.biao1{
color:aquq;
}
.biao2{
color:red;
}
</style>
<body>
<h1 class="biao1">标题一</h1>
<h1 class="biao2">标题二</h1>
<h1 class="biao1">标题一</h1>
<p class="biao2">标签1</p>
4,通配符选择器
*{
操作
}
5,子代选择器,选中亲儿子:选择元素的直接子元素,如A > B选择所有A元素的直接子元素中的B元素。
<style>
.a>li{
在此操作
}
</style>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
</ul>
</ul>
</body>
6,后代选择器,找到后代中所有要找的元素:选择元素的后代元素,如A> B选择所有A元素的后代中的B元素。
<style>
.a li{
在此操作
}
</style>
<body>
<ul class="a">
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
</ul>
</ul>
</body>
7,逗好选择器
<style>
div,
p,
span{
操作
}
</style>
<body>
<p>1</p>
<span>1</span>
<div>1</div>
</body>
8,属性选择器:通过元素的某个属性值来选择元素,如[name="value"]选择所有name属性值为"value"的元素。
<style>
input[type="password"]{
操作
}
div[id]{
操作
}(以te开头)
input[type^="te"]{
操作
}(以1结尾)
input[type$="1"]{
操作
}(包含e)
input[type*="e"]{
操作
}
</style>
<body>
<input type="text"><br />
<input type="password"><br />
<div id="aquamarinre">1</div>
</body>
9,伪类选择器:通过元素的状态或特殊性质来选择元素,如:hover选择鼠标悬停在元素上的状态。
<style>
(重要)a:hover{
font-size: 40px;(悬停字体变大) cursor: cell;(鼠标样式)
}
a:link{
color:颜色
}
a:visited{
color:颜色;(访问后变色)
}
a:active{
font-size:70px;(字体变大)
}
</style>
<body>
<a href="#">去百度</a>
10,结构伪类选择器
even:偶数,odd:奇数,
<style>
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: green;
}
ul li:nth-child(3) {
background-color: blue;
}
ul li:nth-of-type(4) {
background-color: chartreuse;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
11,结构伪类选择器
<style>
ul li:nth-child() {
background-color: pink;
}(总的第n个)
ul li:nth-of-type(n) {
background-color: rgb(215, 30, 61);
}(同一类的第n个)
div span:nth-child(2) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<p>我是文字</p>
<li>1</li>
<li>2</li>
</ul>
<div>
<span>1</span>
<span>kjdscnkdscn</span>
</div>
</body>
12,伪元素选择器
<style>
ul li::before {
content: "输入内容";
}(引号内输入的内容会出现在<li>后输入的内容的前方)
ul li::after {
content: url();
}
input::placeholder {
color: rgb(62, 226, 56);
}(表单提示词)
ul li:nth-child(4)::selection {
color: pink;
}(选中时)
</style>
<body>
<input type="text" name="" id="" placeholder="jdhcndsk">
<ul>
<li>1dcdscdscdcd</li>
<li>2cdcdcdcdc</li>
<li>3cdcdscdsc</li>
<li>4cdcdcdcddcds</li>
</ul>
</body>