CSS选择器
2019-06-06 本文已影响0人
biyu6
元素选择器
最常见的选择器，文档的元素就是最基本的选择器，如：h1{}、a{}等
*{ //通配符
margin:0px;
padding:0px;
}
h1{
color:red;
font-size:14px;
}
p{//p标签：段落
width:150px; //宽度150
padding: 10px;//内边距 10px
font-family:"sans serif"; //值大于1个单词，需要加上引号
}
h1,h2,h3{//选择器分组，多个标签可以共用一个样式
color:red;
}
body{//继承：body中的所有没有设置样式的元素都可以继承body的样式
color:green;
}
类选择器详解
类选择器允许以一种独立与文档元素的方式来指定样式,class是可以重复的，先设置样式，然后再找结构内容，一般用于具体内部数据的构造.
class="cdf"
.cdf{ //类选择器以一个点“.”来定义
}
类选择器可以结合元素选择器，例如：
<a class="adb">aaaa</a>
a.adb{}
多类选择器：
<p class="p1"> P1 </p>
<p class="p2"> P2 </p>
<p class="p1 p2"> P3 </p> //表示该标签会有p1、p2两个样式的效果
.p1{
color:blue;
}
.p2{
font-size:30px;
}
.p1.p2{
font-style: italic；//字体斜体的效果
}
类选择器也可也用作派生选择器
ID选择器详解
id选择器：可以为标有id的HTML元素指定特定的样式，id选择器以“#”来定义；
目前比较常用的方式是id选择器常常用于建立派生选择器；
id是唯一的，先找结构内容，然后再设置样式，一般用于框架级的设计上；
id选择器不能结合使用；
当使用js时，需要用到id
id="abc"
#abc{
}
属性选择器详解
属性选择器：对带有指定属性的HTML元素设置样式;
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。例如：
a[href="http://www.baidu.com"]{}
属性和属性值必须完全匹配，te和上面的值te必须对应，不对应就不会设置red
<style type="text/css">
[title]{
color: blue;
}
[title=te]{
color:red;
}
</style>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
模糊匹配：属性值必须包含样式中的属性title
[title~="title"]{
color:red
}
<p title="title">hello</p> //红色
<p title="t">hello</p> //不对应，只有t
<p title="title hello">hello</p> //红色,title hello 中包含title
后代选择器
可以选择作为某元素后代的元素
<p>这是<strong>我的</strong>代码</p> //只有 “我的” 是红色
p strong{
color: red;
}
子元素选择器
只能选择作为某元素子元素的元素，例如：h1>strong{}
<h1>你好 <strong>hello</strong> bubu</h1> //hello 是红色的
h1 > strong{
color:blue;
}
相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有相同父元素，例如：h1+p{}
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
li+li{ //上面，第一个li元素后面的所有元素都为蓝色
color:blue;
}
CSS派生选择器：
通过依据元素在其位置的上下文关系来定义样式
<body>
<p><strong>p标签：Hello CSS</strong></p>
<ul>
<li><strong>li标签：Hello CSS</strong></li>
</ul>
</body>
li strong{//派生选择器：li 下的 strong 是红色
color:red;
}
strong{ //body下的未特别设置的strong是蓝色
color:blue;
}
