css样式中的高级选择器
- 高级选择器一
- 高级选择器二
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
高级选择器一
1：多元素选择器
多元素选择器，就是同时能够选中多个标签元素，每个元素使用逗号隔开。
如下所示：
E,F(多元素选择器)
#box,.wrap{width:100px;height:100px}
含义:同时去选中#box元素，也去匹配到.wrap元素。即可以同时去选中多个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;background: black;border: 1px solid red;margin: 50px auto;}
p{width: 100px;height: 100px;line-height: 100px;text-align: center}
.main .p1,.main .p2{background: red;margin:10px;}
</style>
</head>
<body>
<div class="main">
<p class="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
</html>显示效果如下所示:
后代选择器
什么是后代？？现实中我们说的某某人的后代的时候，这个后代包括了其所有子孙，从儿子到孙子等等。那么在前端中的后代选择器，同样也是一样，从父级标签开始，往后所有的都称为其后代。
如下所示:
E F（后代选择器）
匹配到E元素所有后代叫做F的元素（包括子、孙），以空格隔开
div ul li{ height: 0; width: 0; }
含义: 匹配到div的后代所有ul ,且ul的所有后代的li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;background: black;border: 1px solid red;margin: 50px auto;}
p{width: 100px;height: 100px;line-height: 100px;text-align: center;color: white}
.main .d1 .p2{background: red;margin:10px;} /*后代选择器选中main的后代，在选择后代d1,然后选择d1的后代p2*/
ul{color: white;margin: 30px 0px;}
.main .ul1 li{height: 20px;width: 50px;background: green;margin-top: 5px}
</style>
</head>
<body>
<div class="main">
<div class="d1">
<p class="p1">p1</p>
<p class="p2">p2</p>
<ul class="ul1">
<li>ul1</li>
<li>ul2</li>
<li>ul3</li>
<li>ul4</li>
</ul>
<ul class="ul2">
<li>ul21</li>
<li>ul22</li>
<li>ul23</li>
<li>ul24</li>
</ul>
</div>
</div>
</body>
</html>后代选择器的显示:
在上面通过后代选择器来选择p2和ul1，来设置其样式
子元素选择器(子代选择器)
什么是子代?现实中的子代即父子关系，有直系的关系，那么在前端中，父级标签下面的标签，即是这个父级标签的子级标签，这种关系也就叫做子代选择器
如下所示：
E>F（子元素选择器）
选择到E元素的直接子代F
ul > li{ height: 100px; width: 100px; }
选择到ul的直接子代li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border: 1px solid green}
.main div>p{width: 100px;height: 100px;background: deeppink}
.main div>span{color: #00aa00}
</style>
</head>
<body>
<div class="main">
<div>
<p>我就是一个小小的p</p>
<span>这是span啊，认识不啦</span>
</div>
</div>
</body>
</html>显示效果如下所示：
毗邻选择器
毗邻，什么毗邻，现实中也就是你家的邻居，但是这点也有不一样，是紧挨着你家的邻居，在前端的概念中，这样的毗邻选择器同样也是，就是紧挨着的第一个元素:
E+F（毗邻选择器）
选择到E元素紧邻的F元素
#box+p{ background: green; }
选择到#box紧邻的p
注意：类似p+p这种若后面有很多p那么除了第一个以外其他紧邻的p也会被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border: 1px solid red}
.main div+a{color:deeppink}
.main div+p{width: 100px;height: 50px;} /*因为p不是div的毗邻选择器，所以并不能选中*/
.main div a+p{width: 50px;height: 25px;background: green} /*选中紧邻a标签的p元素**/
.main div p+p{width: 100px;height: 100px;background: blue;margin-bottom: 5px} /**p+p元素是选中p元素紧邻的p元素，会依次往下选取，当然同样也会选中第一个p*/
</style>
</head>
<body>
<div class="main">
<div>
<a href="#">可点击的a标签</a>
<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
<p>第四个p</p>
</div>
</div>
</body>
</html>显示的效果如下所示:
所有的注释都在上面标注下来了
高级选择器二
高级选择器二中的所有分类其实都是针对属性来说的，那什么是属性，类似width，height，href这样的值就叫做属性，后面的值就叫做属性值，本分类下主要是根据属性，或者属性值，亦或者是多个属性来进行匹配的。
匹配属性选择器
匹配属性选择器即是匹配到指定属性的，针对同一个标签中来说的，一般情况下，如果没有这个属性的话，匹配到的将是多个元素
E[atrr] 匹配具有atrr属性的E元素
显示如下:a[href]{ color: red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border: 2px solid red}
a[style]{color: red}
</style>
</head>
<body>
<div class="main">
<a href="#" style="text-decoration: line-through">点我试试</a><br>
<a href="#">你敢点我试试？？</a>
</div>
</body>
</html>显示如下:
匹配具有attr属性且值只为val的E元素
即在匹配的过程中，是按照属性，并且按照属性值来进行匹配到指定的元素的过程
如下使用:
E[atrr=val] 匹配具有atrr属性且值只为val的E元素（注意值要打引号）
a[href=“www.baidu.com”]{ color: red; }
在这里针对上述的一个案例来进行修改：
<div class="main">
<a href="#" style="text-decoration: line-through">点我试试</a><br>
<a href="#h1">你敢点我试试？？</a>
</div>
style:
a[href="#h1"]{background: deeppink;color: #00dd00}显示的结果如下:
根据href=”#h1”的规则来进行匹配；
匹配属性为attr且值包含或者为val的E元素，用于选取属性值中包含指定词汇的元素
用于选取属性值中包含指定词汇的元素，首先是包含val或者等于val值的属性的标签。
显示如下：
E[atrr~=val] 匹配属性为atrr且值包含或者为val的E元素，用于选取属性值中包含指定词汇的元素
div[class~="somebody"]{height: 100px; width: 100px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;background: deeppink;border: 1px solid green;margin: 50px auto}
p{width: 100px;height: 100px}
p[class~="x_type1"]{background: gold}
p[class~="somebodytype"]{background: greenyellow}
</style>
</head>
<body>
<div class="main">
<p class="x_type1">p1</p>
<p class="z_type3">p2</p>
<p class="y_type2 somebodytype">p3</p>
<p class="f_type4">p4</p>
</div>
</body>
</html>显示如下所示:
注意注意:
刚开始学这个的时候，我原来以为的是这个匹配只要是在一个class中包含了这一个单词的一部分的时候就默认选择，即class=”type”，那么
p[class~=”t”]{}这样就可以去获取，但是后来没有成功，原来并不是说局部匹配规则，而是因为在前端中，类名可以是多个，它是以单个类名为最小单位来进行匹配的，那么这就是它默认匹配的最小单位应该是类名
<div class="c2">
<div class="c11-xxxxx ">1</div>
<div class="c11">2</div>
</div>
style为:
/*选择到值只为c11或者以c11开头并且以连词符“-”连接的标签*/
div[class|="c11"]{
height: 50px;
width: 200px;
background: red;
margin-bottom: 10px;
}匹配所有 有attr1属性 且有attr2属性 且attr2的值为val的E元素
这种选择器是按照两种属性匹配，即首先按照attr1来进行匹配，然后再按照attr2=val来进行匹配操作
使用如下:
E[attr1][atrr2=val] 匹配所有 有attr1属性 且有attr2属性 且attr2的值为val的E元素
a[href][title=“商品图片”]{ height:100px; width: 100px; }
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 50px auto;border: 1px solid red}
img[alt][title="first"]{width: 200px;height: 200px}
img[src][title="second"]{width: 100px;height: 100px}
</style>
</head>
<body>
<div class="main">
<div><img src="../images/1.png" alt="加载失败了" title="first"></div>
<div><img src="../images/2.png" alt="加载也失败了" title="second"></div>
</div>
</body>
</html>显示如下:
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
