选择器是选取需设置样式的元素的模式,用来指定网页上我们想要样式化的HTML元素。
行内选择器:直接在html标签里设置style样式
<p style="color:red" >趁着万家灯火时爬上那山坡,再唱起那首歌好吗p>
id选择器:给标签指定id,并对已指定id的标签设置样式。通过#号来定义
<style>
#pName{
color: #fd0000;
}
style>
<p id="pName">趁着万家灯火时爬上那山坡,再唱起那首歌好吗p>
类选择器:对已指定class的选择器进行样式更改。
<style>
/*定义类选择器*/
.oneclass{
width:800px;
}
style>
<h2 class="oneclass towclass">你好h2>
标签选择器:又叫元素选择器,可以批量选择同名的标签进行样式更改。
<style>
span{
color: red;
}
style>
<p>学完了<span>前端span>,继续学Javap>
全局选择器:又叫通配符选择器,可以与任何元素匹配,一般只做初始化用,影响范围最大所以优先级越低
*{
margin: 0;
padding: 0;
}
各选择器之间存在优先级关系,一般来说,标签的影响范围越大,优先级越低。
并集选择器:使用逗号,来选择需要设置相同样式的标签
<style>
li,p,span,h5{
color: red;
}
style>
<ul>
<li>111li>
<li>222li>
ul>
<p>相邻选择器p>
<h5>hello htmlh5>
<span>hello javaspan>
不使用任何分隔符,选择同时满足多个条件的元素,只有同时匹配两个选择器的元素才会被选中。
<style>
box.content{
color:red;
}
}
style>
<span class="box content">hello javaspan>
后代选择器:使用空格,选择所有被父元素包含的后代元素。
<style>
ul li{
color: red;
}
style>
<ul>
<li>111li>
<li>222li>
<div>
<ol>
<li>333li>
ol>
div>
ul>
子代选择器:使用 >,选择所有被父元素包含的直接子元素,更深一层的元素不起作用。
<style>
ol>li{
color: blue;
}
style>o
<ul>
<li>111li>
<li>222li>
<div>
<ol>
<li>333li>
ol>
div>
ul>
兄弟选择器:使用 ~,在同一父元素下选择在指定元素之后的所有兄弟元素,
<style>
p~p{
color: blue;
}
style>
<p>这是第一个段落p>
<div>这是一个 div 元素div>
<p>这是第二个段落p>
<p>这是第三个段落p>
相邻兄弟选择器:使用 +,选择与父元素相邻的第一个兄弟元素。
<style>
ul+p{
color: blue;
}
style>
<ul>
<li>111li>
<li>222li>
ul>
<p>相邻选择器p>
<a href="#" target="_blank">a>
<a href="#" target="_self">a>
<img src="picture" title="flower">
<img src="picture" title="summer flower">
<p class="topcontent">Are you learning CSS?p>
<p class="top-text">Hello world!p>
<h1 class="top-header">Welcomeh1>
<div class="my-test">The third div element.div>
<div class="mytest">This is some text in a paragraph.div>
/* 选择所有带有 target 属性的 元素*/
a[target] {
background-color: yellow;
}
/* 选取所有带有 target="_blank" 属性的 元素 */
a[target="_blank"] {
background-color: yellow;
}
/* 选取 title 属性包含 "flower" 单词的所有元素 */
[title~="flower"] {
border: 5px solid yellow;
}
/* 选取 class 属性以 "top" 开头的所有元素(值必须是完整) */
[class|="top"] {
background: yellow;
}
/* 选取 class 属性以 "top" 开头的所有元素(值不一定是完整) */
[class^="top"] {
background: yellow;
}
/* 选取 class 属性以 "test" 结尾的所有元素(值不一定是完整)*/
[class$="test"] {
background: yellow;
}
/* 选取 class 属性包含 "my" 的所有元素(值不一定是完整) */
[class*="my"] {
background: yellow;
}
类型 | 举例 |
---|---|
a[target] | 选取所有带有指定属性的元素 |
a[target=“_blank”] | 选取所有带有指定属性和值的元素 |
[title~=“flower”] | 选取属性值包含指定词的元素 |
[class I=“top”] | 选取指定属性以top开头的元素 (必须完整单词) |
[class^=“top”] | 选取指定属性以指定值开头的元素 (不一定完整单词) |
[class$=“test”] | 选取指定属性以指定值结尾的元素 ( 不一定完整单词) |
[class*=“my”] | 选取属性值包含指定词的元素(不一定完整单词) |
hover 鼠标悬停状态:选择鼠标悬停在元素上的状态
<style>
h1:hover{
color:red ;
}
style>
<h1>hello javah1>
超链接伪类一共有四个状态,如果要同时设置这四个状态,一定要按顺序依次设置,否则不起作用。
<style>
a:link{
color: red;
}
a:visited{
color: aqua;
}
a:hover{
color: saddlebrown;
}
a:active{
color: cornflowerblue;
}
style>
<a href="#">boss直聘a>
focus:选择当前获取焦点的元素
<style>
input:focus{
background-color: skyblue;
}
style>
<input type="text">
结构伪类选择器:用于选择作为其父元素的第 n 个子元素的元素。
<style>
li:nth-child(2){
color: red;
}
div p:nth-child(2){
color: blue;
}
style>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
<div>
<p>111p>
<p>222p>
<p>333p>
div>
li:nth-child(2n){
background-color: #3064bb;
}
li:nth-child(2n+1){
background-color: #fd0000;
}
li:nth-child(5n){
background-color: #2c5f44;
}
li:nth-child(n+4){
background-color: black;
}
伪元素选择器:用于在元素内容的前面和后面插入生成的内容,不需要修改 HTML 结构,为元素添加自定义的样式和装饰效果。
::before: before选择器用于给选定的元素之前插入内容
::after: after选择器一般给选定的元素之后插入内容
<style>
span::before{
content: "before";
color: red;
}
span::after{
content: "after";
color: red;
}
style>
<span>伪元素选择器span>
用于选择在表单中已被勾选元素,注意只能用于表单元素,且仅用于那些可以被选中或取消选中的元素,如单选框和复选框。
<style>
input[type="radio"]:checked{
background-color: skyblue;
}
input[type="checkbox"]:checked{
background-color: skyblue;
font-size: 20px;
}
style>
<input type="radio" checked>男
<input type="checkbox" checked>同意
~~