定义选择器

Posted 加号与剑豪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了定义选择器相关的知识,希望对你有一定的参考价值。

20.1ID与类(class)
1.id是唯一的,类是多项的
2.id选择器:
适合所有h2标题
h2{
color:#333;
font-size:16px;
}
只适合title的h2标题
h2#title{
color:#eee;
}
3.结合多个class和id
ul#drinks{
color:red;
}
.mis{
color:green;
}
.hot{
color:yellow;
}

<ul id="drinks">
<li class="mis"></li>
<li class="mis"></li>
<li class="hot"></li>
</ul>
4.利用class改写基本样式:
p{
color:red;
}
.bleached{
color:green;
}

20.2层叠
外部链接:
<link rel="stylesheet"type="text/css"href="css/one.css">
two
three
导入样式:
@import url(“one.css”)
two
three
越晚给的规则越重要

20.3分组
h1{
font-family:宋体,隶书;
link-height:140%
color:red;
}
h2{
font-family:宋体,隶书;
link-height:140%
color:red;
}
h3{
font-family:宋体,隶书;
link-height:140%
color:red;
}


20.4继承
h1{
color:red;
}
<h1>xxx<i>xxxx</i></h1>
从body继承
body{
margin:10px;
color:red;
}

20.5上下文选择器
h1{
color:red;
}
i{
color:green;
}
使用上下文选择器
h1 i{
color:red;
}

 


20.6子;类选择器
.box{
color:red;
}
.box1{
font-weight:bold;
}
.box2{
font-style:italic;
}
<div class="box">box</div>
<div class="box1">box1</div>
<div class="box2">box2</div>

20.7其他选择器
类型选择器:
p{
color:black;
}
a{
text-decoration:underline;
}
h1{
font-weight:bokl;
}
后代选择器:
h2 i{
color:red;
}
li a{
text-decoration:none;
}
#main h1{
color:red;
}
伪类:
a:link{
color:green;
}
a:visited{
color:green;
}
a:hover,a:active{
color:red;
}
input:focus{
background-color,yellow;
}
通用选择器:
*{
padding:0;
margin:0;
}

 

以上是关于定义选择器的主要内容,如果未能解决你的问题,请参考以下文章

详解CSS样式选择器都有哪些?

CSS里的HTML选择器、类选择器、ID选择器用于哪些范围?

Android 自定义仿京东地址选择器

伪类和自定义选择器的相对性能是啥?

选择器

自定义选择器 C# UWP 上的多项选择