选择器
标签选择器
格式:标签名{}
<p style = "color:red;">html</p>
<!--把p标签里面的文字设置成红色-->
类名选择器
在标签内通过class设置类名
格式:.类名{}
<head>
<style>
.a{
color: red;
}
</style>
</head>
<body>
<p class="a">html</html></p>
</body>
id选择器
唯一标识,每个标签只有一个id
格式:#id值{}
<head>
<style>
#id{
color: red;
}
</style>
</head>
<body>
<p id="a">html</p>
</body>
通配符
*,选中页面中的所有标签
<head>
<style>
*{
color: red;
}
</style>
</head>
<body>
<p>html</p>
<p>css</p>
</body>
优先级:行内样式>id选择器>类名选择器>标签选择器>通配符选择器
*{color:red !important;}
在通配符里加入!important会使通配符获得最高优先级,不推荐使用
层次选择器
后代:标签1 标签2{}
<head>
<style>
ul a{
color: red;
}
</style>
</head>
<body>
<ul>
<!--两个a标签都会变红-->
<a href="">html1</a>
<li></li>
<li></li>
<li></li>
<li>
<a href="">html2</a>
</li>
</ul>
</body>
子代:标签1>标签2{}
<head>
<style>
ul>a{
color: red;
}
</style>
</head>
<body>
<ul>
<!--只有第一个a标签颜色变红-->
<a href="">html1</a>
<li>html</li>
<li>html2</li>
<li>html3</li>
<p>
<li>
<a href="">html2</a>
</li>
</p>
</ul>
</body>
后代只要包含子代就行
子代只能是父代的第一层
格式:元素1+元素2
==>选中元素1下面第一个相邻的元素2
ul>a + li{
color: red;
}
选中ul里面的a元素下面相邻的li元素,如果相邻的不是li,就无法选中
格式:元素1~元素2
==>选中元素1下面的所有的元素2
ul>a ~ li{
color: red;
}
选中ul下面a元素下面的所有li元素,不管是否相邻
结构选择器
元素1 元素2:first - child{}
<head>
<style>
<!--系统会寻找ul下的第一个元素,如果是li则执行属性命令,如果不是,则属性命令无效-->
ul li:first - child{
color: red;
}
</style>
</head>
<body>
<ul>
<a href="">html1</a>
<span></span>
<li></li>
<li></li>
<li></li>
<li>
<a href="">html2</a>
</li>
</ul>
</body>
元素1 元素2:first - of - type{}
<head>
<style>
<!--系统会寻找ul下的第一个li元素执行属性命令-->
ul li:first-of-type{
color: red;
}
</style>
</head>
<body>
<ul>
<a href="">html1</a>
<span></span>
<li></li>
<li></li>
<li></li>
<li>
<a href="">html2</a>
</li>
</ul>
</body>
把first改为last,则寻找最后一个元素,效果同理。
ul > li:nth -child(){}
<head>
<style>
<!--系统会先寻找ul下的第三个元素,如果是li,执行属性命令-->
ul>li:nth-child(3){
color: red;
}
</style>
</head>
<body>
<ul>
<a href="">html1</a>
<span></span>
<li></li>
<li></li>
<li></li>
<li>
<a href="">html2</a>
</li>
</ul>
</body>
ul>li:nth-of-type(3){}
<head>
<style>
<!--系统会先寻找ul下的所有li元素,再选择第三个,执行属性命令-->
ul>li:nth-of-type(3){
color: red;
}
</style>
</head>
<body>
<ul>
<a href="">html1</a>
<span></span>
<li></li>
<li></li>
<li></li>
<li>
<a href="">html2</a>
</li>
</ul>
</body>
ul>li:not(:nth-child( num )){}
<head>
<style>
<!--系统会先排除第三个元素(不管第三个元素是不是li),其他所有li执行属性命令-->
ul>li:not(:nth-child(3)){
color: red;
}
</style>
</head>
<body>
<ul>
<a href="">html1</a>
<span></span>
<li></li>
<li></li>
<li></li>
<li>
<a href="">html2</a>
</li>
</ul>
</body>