1. css入门基础知识-选择器
2019-09-23 本文已影响0人
瑟闻风倾
1.1 介绍及语法
介绍 ：css指层叠样式表，用来定义样式，使用css样式表极大地提高了工作效率。
(1) css基础语法
selector{
property : value
}
说明：多个属性之间用分号隔开；属性值为多个单词时需加引号。
- 元素选择器：根据元素便签进行使用
h1{
color: red;
font-size: 14px;
font-family: sans-serif;
}
p{
color: green;
}
<body>
<h1>css基础语法</h1>
<p>单独设置元素样式</p>
</body>
说明：p元素、a元素等等都可单独设置其样式。
(2) css高级语法
- 选择器分组：为多个元素设置同一个样式
h1,h2,h3,h4,h5,h6,a{
color: red;
font-family: sans-serif;
}
<body>
<h1>css高级语法</h1>
<h2>为多个元素设置同一个样式</h2>
</body>
通配符*：标签未指定样式时都将使用通配符定义的的样式（通配符常用来设置内外边距为0px，需要为元素单独设置该属性时可覆盖）。如
*{
color: gray;
margin: 0px;
padding: 0px;
}
h1,h2,h3,h4,h5,h6,a{
color: red;
font-family: sans-serif;
}
p{
margin: 10px;
}
<body>
<h1>通配符</h1>
<p>标签首先使用通配符的样式，自身定义的样式会覆盖通配符的样式</p>
</body>
- 继承：子元素未被设置样式时，采用父元素定义的样式
body{
color: green;
}
h1{
color: red;
font-size: 14px;
font-family: sans-serif;
}
<body>
<h1>子元素被设置样式，采用自身样式</h1>
<h2>子元素未被设置样式时，采用父元素定义的样式</h2>
</body>
1.2 选择器
selector.PNG
说明：元素选择器和选择器分组在上面的css基本语法和高级语法中已经讲述，这里不再重复叙述。
- 派生选择器
- id选择器
- 类选择器
- 属性选择器/属性和值选择器
1.2.1 派生选择器(后代选择器)：根据元素在其位置的上下文关系来定义样式
li strong{
color: green
}
/* p strong i{
color: blue;
} */
p i{
color: blue;
}
strong{
color: red;
}
<body>
<p><strong>p标签中的strong属性<i>-</i>未具体指定的会采用strong的样式</strong></p>
<ul>
<li><strong>li标签中的strong属性-已经定义的效果不会被覆盖</strong></li>
</ul>
</body>
1.2.2 id选择器：可以为标有id的html元素指定特定的样式
说明：id选择器以#定义；id选择器常常用于建立派生选择器，两者结合起来使用。
(1)id选择器简单单独使用
#divid{
color: green
}
<body>
<div id="divid">
id选择器可以为标有id的html元素指定特定的样式
</div>
</body>
(2)id选择器+派生选择器组合使用(可看做id选择器+元素选择器)
#divid p{
color: red
}
<body>
<div id="divid">
id选择器可以为标有id的html元素指定特定的样式
<p>id选择器和派生选择器组合使用</p>
</div>
</body>
区别类选择器和id选择器：id选择器类似于类选择器但又有一些重要差别。
- id选择器是唯一的，类选择器是可重复的
<body>
<div id="mydiv">id选择器在文档中只能使用一次</div>
<div class="div">类选择器可使用多次</div>
<div class="div">类选择器可使用多次</div>
<div class="div">类选择器可使用多次</div>
</body>
- id选择器不能结合使用(
元素选择器+id选择器不能组合使用，但id选择器+元素选择器可组合使用) - 当使用js时需用到id选择器(getElementById)
- 资源加载上，id选择器先找结构内容再加载样式，类选择器先加载样式再找结构内容
- 应用上，id选择器常用于框架级的设计上，类选择器常用于内部具体数据的构造来引用一些效果
1.2.3 类选择器
说明：类选择器以点.定义；类选择器也可用于派生选择器，两者结合起来使用。
(1)类选择器简单单独使用
.pclass{
color: red;
}
<body>
<p class="pclass">类选择器简单单独使用</p>
</body>
(2)类选择器+派生选择器组合使用(可看做类选择器+元素选择器)
.divclass p{
color: red;
}
<body>
<div class="divclass">
类选择器
<p>类选择器和派生选择器组合使用</p>
</div>
</body>
(3)元素选择器+类选择器组合使用
a.div{
color: blue;
}
<body>
<div class='div'>类选择器</div>
<a class="div">元素选择器和类选择器结合使用</a>
</body>
(4)多类选择器
.p1{
color: blueviolet;
}
.p2{
font-size: 20px;
}
.p1.p2{
font-style: italic;
}
<body>
<div>
<p class="p1">选择器p1的效果</p>
<p class="p2">选择器p2的效果</p>
<p class="p1 p2">既有选择器p1和p2的效果，又有多类选择器自定义的效果</p>
</div>
</body>
1.2.4 属性选择器/属性和值选择器:对带有指定属性的html元素指定样式
- 简单属性选择：选择器不指定其值
- 根据具体属性值选择：常用于缩小范围，只选择具有特殊属性值的元素（如a标签有特定的href属性可缩小范围）
- 属性和属性值必须完全匹配：常用于元素有相同的属性，但是分别需要不同的效果
- 根据部分属性值选择：模糊匹配属性值
注意：属性选择器在IE6及更低的版本是不支持的。
<html>
<head>
<style type="text/css">
[title]{
color: blue;
}
[href]{
font-size: 30px;
}
[title="book"]{
color: red;
}
[href="http://www.baidu.com"]{
color: green;
}
[href="http://www.jianshu.com"]{
color: blue;
}
[title~="hello"]{
font-size: 50px;
}
</style>
</head>
<body>
<p title="">简单属性选择->选择器不指定其值时，它的值怎么写无所谓</p>
<p title="te">简单属性选择->选择器不指定其值时，它的值怎么写无所谓</p>
<p href="">根据具体属性值选择->只选择具有特殊属性值的元素</p>
<p title="book">属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值来写</p>
<a href="http://www.baidu.com">属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值写</a>
<a href="http://www.jianshu.com">属性和属性值必须完全匹配->选择器指定其值，它的值需按照指定的值写</a>
<p title="hello">根据部分属性值选择</p>
<p title="hello liy">根据部分属性值选择</p>
</body>
</html>
说明：“title”为选择器的名称。选择器不指定其值时，它的值怎么写无所谓；如果选择器指定其值，那么它的值必须按照指定的值来写，如果值变化则不再生效等同于不指定其值的情况。
1.2.5 子元素选择器
分别使用后代选择器和子元素选择器为元素i添加样式
<body>
<p><strong>p标签中的strong属性<i>-</i>未具体指定的会采用strong的样式</strong></p>
</body>
(1)后代选择器：可选择作为某元素后代的元素，可多层迭代(不仅可找到子元素，也可直接找到孙子元素以及更深的元素)
/* p strong i{
color: blue;
} */
p i{
color: blue;
}
(2)子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
p>strong>i{
color: blue;
}
1.2.6 相邻兄弟选择器
说明：相邻兄弟选择器可选择在另一个元素后的元素，且两者有相同父元素。在实际应用中很少使用。
<body>
<div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol>
<li>item11</li>
<li>item22</li>
<li>item33</li>
</ol>
</div>
</body>
li+li{
font-size: 50px;
color: yellow;
}
