<day03>CSS选择器
作者:互联网
元素选择器
以标签名为选择器
语法
<style>
p {
color: red;
}
</style>
id选择器
id是每个标签公有的属性,id的值是唯一的
语法
<style>
#id值 {
color: red;
}
</style>
<p id="id值">xxxxxx</p>
类选择器
每个标签共有的属性class
语法
<style>
.类名 {
color: red;
}
</style>
<p class="类名">xxxxxx</p>
复合选择器
后代选择器
后面的选择器是前面选择器的后代,选择器之间用空格隔开
.out .inner p {
color: pink;
}
<div class="out">
<div class="inner">
<p>xxx</p>
</div>
</div>
子代选择器
后面选择器是前面选择器的儿子,选择器之间用 > 隔开
.out > .one > .inner {
width: 100px;
height: 100px;
}
<div class="out">
<div class="one">
<div class="inner">
<p>段落标记</p>
</div>
</div>
<p>段落标记</p>
<div class="inner">inner</div>
</div>
群集选择器
<style>
/* .one {
color: red;
}
.two {
color: red;
}
和下面的是等价的
*/
.one,
.two {
color: red;
}
</style>
</head>
<body>
<div class="one">sssssss</div>
<div class="two">two</div>
</body>
优先级
引入方式的优先级
内联样式优先级最高, 内嵌样式 和外联样式使用的是就近原则
选择器的优先级
!important >id选择器(100)> 类选择器(10)>元素选择器(1)
<style>
/* !important >id选择器(100)> 类选择器(10)>元素选择器(1) */
.main {
color: red;
}
#one {
color: blue;
}
div {
color: yellow !important;
}
</style>
</head>
<body>
<div id="one" class="main">我是div标记</div>
</body>
复合选择器优先级
<style>
/*11 */
.one p {
color: red;
}
/* 21 */
.one > .active > p {
color: yellow;
}
/* 1 */
p {
color: blue;
}
/* 11 */
.active > p {
color: blueviolet;
}
</style>
</head>
<body>
<div class="one">
<div class="active">
<p>我是p标记</p>
</div>
</div>
</body>
标签:优先级,color,two,选择器,red,id,CSS 来源: https://www.cnblogs.com/toufuwqm/p/16475647.html