第四章
一、选择器
1.标签选择器
选择器{
属性名:属性值
}
h1 {
font-size:12px;
color:#F00;
}
直接选择标签,对标签的样式就行修改。复制
2.类选择器
<div class="yi"></div>
.yi{
width: 300px;
background-color: aliceblue;
}
在css中使用需要与htmlclass值相等才能使用(最常使用)复制
3.Id选择器
<div id="yi"></div>
#yi{
width: 300px;
background-color: aliceblue;
}
id在使用的过程中要保证id值唯一(不唯一也能用但是不好,id以后要进行参数的传递)复制
优先级
id>class>标签
二.css引入方式
一、链入式(最常使用)
<link rel="stylesheet" href="../css/shop.css">
rel必须写否则无法识别复制
二、导入式
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
不经常使用复制
三、css样式
一、行内样式
<p style="font-size:20px;">
</p>
直接在html标签内进行设置样式(在以后拉代码,无法改变样式时,直接采取行内样式覆盖原样式)复制
二、内部样式
<style>
.yi{
width: 300px;
background-color: aliceblue;
}
</style>
可以写在html页面任何位置(最好写在body以上)复制
三、外部样式
<link rel="stylesheet" href="../css/shop.css">
rel必须写否则无法识别
直接引入外部样式复制
优先级采取就近原则(但内部和外部不绝对,谁离的近,采取谁的样式)
四、层次选择器
一、E F
相当于选择父级元素下所有的F标签
body h2{
font-size: 16px;
}
<body>
<h2 class="er"> 如何做菜?</h2>
<p>烹饪美食,雇佣好友帮忙,装修个性餐厅,获得顾客美誉。</p>
<p>步步精心经营,细心打理,我们都能成为餐饮大亨哦。</p>
<h2 >如何经营餐厅?</h2>
</body>
复制
二、E>F
只选择E的儿子,不选择E的孙子
body>h2{
font-size: 16px;
}
<body>
<h2 class="er"> 如何做菜?</h2>
<p>烹饪美食,雇佣好友帮忙,装修个性餐厅,获得顾客美誉。</p>
<ul>
<li>
<h2>
我不会被选择
</h2>
</li>
</ul>
<p>步步精心经营,细心打理,我们都能成为餐饮大亨哦。</p>
<h2 >如何经营餐厅?</h2>
</body>
复制
三、相邻兄弟选择器
h2+p{
color:blue;
}
<body>
<h2 class="er"> 如何做菜?</h2>(不会变色)
<p>烹饪美食,雇佣好友帮忙,装修个性餐厅,获得顾客美誉。</p>(会变色)
<p>步步精心经营,细心打理,我们都能成为餐饮大亨哦。</p>(不会变色)
<h2 >如何经营餐厅?</h2>
</body>
只会选择相邻的下一个兄弟(只选择一个)复制
四、通用兄弟选择器
h2~h2{
color: blue;
}
<h2 class="er"> 如何做菜?</h2>(不会变色)
<h2 >如何经营餐厅?</h2>(会变色)
<h2 >111?</h2>(会变色)
<h2 >222?</h2>(会变色)
<h2 >333?</h2>(会变色)
自己本身不能选择复制
五、结构伪类选择器
一、E:first/last-child
p:first-child{
color:red;
}
p:last-child{
color: blue;
}
<body>
<p>111</p>(变红色)
<p>2222</p>
<ul>
<li>11</li>
<li>22</li>
</ul>
<p>444</p>(变蓝色)
</body>
另外一种情况;
p:first-child{
color:red;
}
p:last-child{
color: blue;
}
<body>
<p>111</p>(变红色)
<p>2222</p>
<ul>
<li>11</li>
<li>22</li>
</ul>
<h1>444</h1>(不会变色)
</body>
如果最后一个孩子不是p而是h1那将会不能匹配的p元素,所以h1不会变色,只有第一个p变色。复制
二、E F:nth-child(n)
<style>
body p:nth-child(1){
color: rgb(226, 154, 28);
}
ul li:nth-child(1){
color: aqua;
}
</style>
<body>
<p>111</p>(会变色)
<p>2222</p>
<ul>
<li>11</li>(会变色)
<li>22</li>
</ul>
<p>444</p>
<h1>444</h1>
</body>
选择父元素下的第几个子元素复制
三、E:first/last-of-type,E F:nth-of-type(n)
跟上面同理只是,在选择的时候先看标签类型,在看排序第几。
<style>
p:first-of-type{
color:red;
}
p:last-of-type{
color: blue;
}
</style>
<body>
<p>111</p>(变红色)
<p>2222</p>
<ul>
<li>11</li>
<li>22</li>
</ul>
<p>444</p>(变蓝色)
<h1>444</h1>
</body>复制
六、属性选择器
一、在选择的时候写完标签之后不能有空格要紧跟着写[],否则无法选择
<style>
input[type='text']{
background-color: #d9ed1eea;
}(选择属性input标签下 属性type=text的标签)
input[type^=pass]{
background-color: brown;
} (选择属性input标签下 type以pass字符串开头的标签)
</style>
前三个最常用复制