您的位置：首页 > Web前端 > CSS

CSS选择器

2016-05-24 07:40 633 查看

本章内容

元素选择器

选择器分组

类选择器详解

ID选择器详解

属性选择器详解

后代选择器

子元素选择器

相邻兄弟选择器

元素选择器

最常见的选择器就是元素选择器，文档的元素就是最基本的选择器

例如：
h1{}、a{}


选择器分组

例子：

h1、h2{}


通配符

*{}


类选择器详解

类选择器允许以一种独立与文档元素的方式来指定样式

例如：
.class{}


结合元素选择器使用

例如：
a.class{}


示例：

<div class="div">hello div</div>
<a class="div">hello a</a>


.div{
color: brown;
}
a.div{
color: cyan;
}


多类选择器

例如：
.class.class{}


多类选择器的写法示例：

<p class="p1">p1 hello</p>
<p class="p2">p2 hello</p>
<p class="p1 p2">p3 hello</p>


CSS

.p1{
color: blueviolet;
}
.p2{
font-size: 80px;
}
.p1.p2{
font-style: italic;
}


上面的p3，既继承了p1、p2的属性，也保留了自己的斜体属性。

ID选择器详解

ID选择器

ID选择器类似于类选择器，不过也有些重要差别

例如：
#id{}


类选择器和ID选择器区别

ID只能在文档中使用一次，而类可以多次使用

ID选择器不能结合使用

当使用js时候，需要用到id

属性选择器详解

简单属性选择

例如：
[title]{}


<style>
[title]{
color: crimson;
}
</style>
<p title="">hello</p>


根据具体属性值选择

除了选择拥有某些的元素，话可以进一步缩小选择范围，只选择有特定属性值的元素

例如：
a[href="http://www.baidu.com"]{}


属性和属性值必须完全匹配

根据部分属性选择

示例：

<style>
[title]{
color: crimson;
}
[title~="title"]{
font-size: 45px;
}
[href]{
font-size: 45px;
}
</style>
.....
<body>
<p title="tit">hello</p>
<p title="title">hello</p>
<p title="t">hello</p>
<p title="title hello">hello</p>
<a href="http://www.baicu.com">a hello</a>
</body>


效果：



在这里可以把
[title~="title"]
看成是一种模糊查询，找到包含了 title 的标签。

后代选择器

后代选择器

后代选择器可以选择作为某元素后代的元素

例如：

<p>this is my<strong> web <i>page</i></strong></p>


p strong i{
color: blueviolet;
}


效果：



子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素

例如：
h1>strong{}


区别：

<body>
<p class="p1">this is my<strong> web <i>page</i></strong></p>
<p class="p2">this is my<strong> web <i>page</i></strong></p>
<p class="p3">this is my<strong> web <i>page</i></strong></p>
<p class="p4">this is my<strong> web <i>page</i></strong></p>
</body>


.p1 strong i{
color: blueviolet;
}
.p2>strong>i{
color: blueviolet;
}
.p3 i{
color: blueviolet;
}
.p4>i{
color: blueviolet;
}


效果：



可以看出直接使用子元素选择器找 i 是找不到，如果使用子元素选择器必须先找到 i 的父元素，或者使用后代选择器也可以找到

相邻兄弟选择器

可选择紧接在另一个元素后的元素，且二者有相同父元素

例如：
h1+p{}


<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{
color: blueviolet;
}


效果：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航