属性选择器
1、作用：根据指定的属性名称找到对应的标签，然后设置属性
该选择器，最常用于input标签
2、格式与具体用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
例1：找到所有包含id属性的标签
[id]
例2：找到所有包含id属性的p标签
p[id]
例3：找到所有class属性值为part1的p标签
p[class="part1"]
例4：找到所有href属性值以https开头的a标签
a[href^="https"]
例5：找到所有src属性值以png结果的img标签
img[src$="png"]
例6：找到所有class属性值中包含part2的标签
[class*="part"]
<head>
<meta charset="UTF-8">
<title>系列选择器</title>
<style>
[id] {color: red}
p[id] {font-size: 30px;}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
100px;
}
[class*="part"]{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
伪类选择器
1、作用：常用的几种伪类选择器。
1.1 没有访问的超链接a标签样式：
a:link {
color: blue;
}
1.2 访问过的超链接a标签样式：
a:visited {
color: gray;
}
1.3 鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
1.4 鼠标点击瞬间的样式：
a:active {
color: green;
}
1.5 input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}
2 注意：
a标签的伪类选择器可以单独出现，也可以一起出现
a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
link，visited，hover，active
hover是所有其他标签都可以使用的
focus只给input标签使用
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link {
color: #cccccc;
}
a:visited {
color: #55BBBB;
}
a:hover {
color: green;
}
a:active {
color:red;
}
input:hover {
outline: none;
background-color: #cccccc;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>
<input type="text">
</body>
伪元素选择器
1、常用的伪元素。
1.1 first-letter：杂志类文章首字母样式调整
例如：
p:first-letter {
font-size: 48px;
}
1.2 before
用于在元素的内容前面插入新内容。
例如：
p:before {
content: "*";
color: red;}
在所有p标签的内容前面加上一个红色的*。
1.3 after
用于在元素的内容后面插入新内容。
例如：
p:after {
content: "?";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-letter {
font-size: 50px;
}
a::after {
content:"?";
color: green;
}
a:before {
content: "-";
color: green;
}
</style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>