CSS选择器:
css选择器有四种,标签名选择器,id选择器,class选择器,属性选择器,其中属性选择器权重最低且不常用
两个选择器A和B使用,连写时,表示选择满足A或满足B的元素
#p2,#p3{
color: blue;
}
两个选择器A和B使用空格连接时,表示选择满足A选择器的元素内部的满足B选择器的元素
#list a{
text-decoration: none;
}
选择器A和B使用>连写时,表示选择满足A选择器元素的子元素中满足B的元素
#list>li{
list-style: none;
}
选择器A和B直接连写,表示满足选择器A且满足选择器B的元素
#p4.c2{
background-color: red;
}
在一个父元素中,满足冒号前选择器的元素中的第n个元素
#list li:nth-of-type(1){
font-size: 40px;
}
偶数个和奇数个
#list li:nth-of-type(2n+1){
font-weight: bold;
}
属性选择器
选择页面中包含lh属性的元素,lh为自定义属性
[lh]{
color: orange;
}
选择页面中att属性att值为val的元素
[att=val]{
color: brown;
}
效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style>
/* 标签名选择器,选择页面中所有h1标签 */
h1{
color: red;
}
/* id选择器,使用#开头,选择页面中id值为p1的元素 */
#p1{
background-color: yellow;
}
/* class选择器,使用.开头,选择页面中class值包含c1的元素 */
.c1{
color: green;
}
/* 两个选择器A和B使用,连写时,表示选择满足A或满足B的元素 */
#p2,#p3{
color: blue;
}
/* 两个选择器A和B使用空格连接时,表示选择满足A选择器的元素内部的满足B选择器的元素 */
#list a{
text-decoration: none;
}
/* 选择器A和B使用>连写时,表示选择满足A选择器元素的子元素中满足B的元素 */
#list>li{
list-style: none;
}
/* 选择器A和B直接连写,表示满足选择器A且满足选择器B的元素 */
#p4.c2{
background-color: red;
}
/* 在一个父元素中,满足冒号前选择器的元素中的第n个元素 */
#list li:nth-of-type(1){
font-size: 40px;
}
/* 倒数第n个 */
#list li:nth-last-of-type(1)>a{
color: orange;
}
/* 偶数个和奇数个 */
#list li:nth-of-type(2n+1){
font-weight: bold;
}
/* 属性选择器 */
/* 选择页面中包含lh属性的元素 */
[lh]{
color: orange;
}
/* 选择页面中att属性att值为val的元素 */
[att=val]{
color: brown;
}
</style>
</head>
<body>
<h1>CSS选择器大全</h1>
<p id="p1">id选择器用#表示</p>
<p class="c1">class选择器使用.表示</p>
<p class="c1">class选择器使用.表示</p>
<p id="p2">两个选择器使用,连写</p>
<p id="p3">两个选择器使用,连写</p>
<ul id="list">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
</ul>
<p id="p4" class="c2">两个选择器直接连写.</p>
<P lh>HTML标签的属性可以实html属性也可以是自定义属性</P>
<p att="val">属性选择器</p>
</body>
</html>
选择器优先级:
选择器权重依次为:!important>行内样式>id选择器>class选择器>标签名选择器.
当两个选择器优先级一样时,会选择靠后的选择器的样式(开发中一般不会用到,用处在于导入外部样式表后排bug等),当多个不同的选择器连用时,优先级会相加
/* 样式优先级权值参考: */
/* !important 10000 */
/* 行内样式(内联样式)(inline style) 1000 */
/* id选择器 100 */
/* class选择器 10 */
/* 标签名选择器 1 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 不同的选择器具有不同的优先级,页面中元素最终显示的样式是优先级最高的选择器的样式 */
/* 样式优先级 */
/* !important>行内样式>id选择器>class选择器>标签名选择器 */
#title{
color: red;
}
/* 当两个选择器优先级一样时,会选择靠后的选择器的样式 */
.color{
color: blue;
}
.second{
color: orange;
h1{
color: green;
}
#title.color{
color: black;
}
</style>
</head>
<body>
<h1 id="title" class="color second">css选择器优先级</h1>
</body>
</html>