web前端学习(三)css学习笔记部分(4)-- CSS选择器详解

4.  元素选择器详解

4.1  元素选择器

4.2  选择器分组

  用英文逗号","相连,使用相同的样式表

  使用通配符对所有元素进行通用设定。

4.3  类选择器详解

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

    .class{}

  4.3.2.  结合元素选择器

    a.class{}  (只指定a标签内的class类)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
a.div{
color:red;
}
/*只改变a标签下类为div的元素样式*/
</style>
</head>
<body>
<div class="div">
hello world!
</div>
<a href="#" class="div">
hello world!
</a>
</body>
</html>

  4.3.3  多类选择器

    .class.class{}  (设置两个类的共同的独有的特性)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
color:blue;
}
.p2{
font-size:30px;
}
.p1.p2{
font-style:italic;
}
</style>
</head>
<body>
<p class="p1">
p1p1p1p1p1p1p1
</p>
<p class="p2">
p2p2p22p2p2p2p2
</p>
<p class="p1 p2">
p3p3p33p3p33p3p
</p>
</body>
</html>

4.4  id选择器详解

  4.4.1.  ID选择器类似于类选择器,不过也有一些重要差别

    例如:#id{}

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

             ID选择器不能结合使用

     当使用js的时候,需要使用到id

  

4.5  属性选择器详解

  4.5.1  简单属性选择

      [title]{}

  4.5.2  根据具体属性进行选择

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

  4.5.4  根据部分属性值选择

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[title]{
color:aqua;
}
/*title不指定具体的值就是默认
让所有的title元素都是用这个样式表
*/
[href="http://www.baidu.com"]{
font-size: 30px;
}
[title~="hello"]{
font-size: 50px;
}
/*~=符号是用来进行模糊选择的,只要类名中有提供的字眼就可以。*/
</style>
</head>
<body>
<p title="hello">
hello;
</p>
<p title="hel">
hello;
</p>
<p title="world hello">
hello;
</p>
<p title="hello">
hello;
</p> <a href="http://www.baidu.com">百度</a>
</body>
</html>

4.6  后代选择器

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

  在4.7中查看代码

4.7  子元素选择器

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

  后代选择器不能隔代选择元素,只能一代挨着一代选择

    例如:h1>strong{}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
p strong{
color:red;
}
p strong i{
color:aqua;
}
/*后代选择器可以隔代选择元素*/ p>b{
color: deepskyblue;
}
/*
p>strong>b{
color: deepskyblue;
}
子元素选择器必须这样写才可以实现效果
子元素选择器不能隔代选择元素
*/
</style>
</head>
<body>
<p><strong>
p strong后代选择器;
</strong></p>
<p>
<strong>
<i>
p,strong,i后代选择器;
</i>
</strong>
</p>
<p>
<strong>
<b>
p,strong,i后代选择器设置蓝色不起作用;
</b>
</strong>
</p>
</body>
</html>

4.8  相邻兄弟选择器

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

  例:h1+p{};

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li+li{
font-size: 50px;
color:blanchedalmond;
}
/*让同一父元素之下的第一个li标签下的其他li标签样式更改。
最终效果是两个列表下的除了第一个的li其他的li样式都会更改。
*/
</style>
</head>
<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>
</html>
上一篇:css常用命名规则


下一篇:jQuery源码-dom操作之jQuery.fn.html