首页 > > 网页制作 > css >

CSS3——复杂选择器

2018-06-24 01:07:16来源：未知阅读 ()

1、兄弟选择器：同一位置级别，可称为兄弟元素

a、相邻兄弟选择器：next
紧紧跟在【当前元素之后的】(一个)，指定选择器的元素
　　　　　语法：通过“+”作为结合符
eg: div+p ->紧跟在div后面的p元素

 1 <!-- demo.html -->
 2 <html>
 3     <head>
 4         <title></title>
 5     </head>
 6     <body>
 7         <p>这是第一个段落</p>
 8 　　  <div id="d1">这是一个div</div>
 9 　　  <span>这是一个span</span>
10         <p class="p1">这是第二个段落</p>
11 　　  <b>Hello World</b>
12 　　  <p class="p2">这是第三个段落</p>
13     </body>
14 </html>
15 
16 /*demo.css*/
17 div+p{
18     background: yellow;
19 }
20 #d1+p{
21     background: red;
22 }
23 span+.p1{
24     background: blue;
25 }

b、通用兄弟选择器：next_all
匹配某元素【后面所有】的满足指定选择器的兄弟元素
语法：使用“~”作为结合符
eg：div~p{} ->匹配div后面所有的p

2、属性选择器：使用元素所附带的属性，用于选择器当中，作为选择元素的条件
语法：[属性相关内容]
eg：[id] ->具备id属性的所有元素
p[id] ->具备id属性的p元素
a、[id],p[id]
b、p[id][class] ->既具备id又具备class的p元素
c、p[id="p1"] ->id值为"p1"的p元素
d、p[class~="value"]
e、p[class^="b"] ->匹配class属性值以b开始的p标记
f、p[class*="b"] ->匹配class属性值中包含b的p标记
g、p[class$="b"] ->匹配class属性值以b结尾的p标记

 1 <!-- demo.html -->　　　　　
 2  <html>
 3      <head>
 4          <title></title>
 5      </head>
 6      <body>
 7         <p class="clear p1 myself">
 8         这是第四个段落
 9         </p>
10         <div class="userContent">
11         文本内容
12         </div>
13      </body>
14 </html>
15 
16 /*demo.css*/
17 p[class]{
18 color: #e4393c;
19 }
20 p[class~='p1']{
21 background-color: #cd2c2d;
22 color: #fff;
23 }
24 div[class ^= "us"]{
25 background-color: #bfb;
26 }
27 div[class$="t"]{
28 background-color: #bfb;
29 color: #333;
30 }

3、伪类选择器
a、目标伪类：突出显示活动的HTML锚点
语法：:target
b、元素状态伪类：多数用在表单元素上
1、:enabled ->匹配每个已启用的元素
2、:disabled ->匹配每个已被禁用的元素
3、:checked ->匹配已被选中的表单元素(只适用于checkbox,radio)
c、结构伪类
1、:first-child ->匹配属于其父元素中的第一个子元素
2、:last-child ->匹配属于其父元素中的最后一个子元素
3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)
4、:only-child ->匹配属于其父元素中的唯一子元素
d、否定伪类：匹配非指定选择器的元素
语法：:not(selector)

 1 <!-- demo01.html 目标伪类 -->
 2  <html>
 3      <head>
 4          <title></title>
 5      </head>
 6      <body>
 7     <a href="#Tom">猫和老鼠(Tom and Jerry)</a>
 8     <a href="#Atongmu">铁臂阿童木</a>
 9     <a href="#BlackCat">黑猫警长</a>
10     <br>
11     <a name="Tom">第一部：Tom and Jerry</a>
12     <p style="height: 500px;">Tom and Jerry</p>
13     <div id="Atongmu" style="height: 500px;">我是阿童木</div>
14     <div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>    
15      </body>
16 </html>
17 
18 /*demo01.css*/
19 a:target,div:target{
20     background-color: #bfb;
21     font-size: 20pt;
22 }

 1 <!-- demo02.html 结构伪类 -->　　　　　
 2  <html>
 3      <head>
 4          <title></title>
 5      </head>
 6      <body>
 7     <div id="d1"></div>
 8     <div id="d2">
 9         <p>This is a p</p>
10     </div>
11     <div id="d3">
12         This id d3
13     </div>
14     <div id="d4">
15         <b>first</b>
16         <b>second</b>
17         <b>third</b>
18         <b>last</b>
19     </div>    
20      </body>
21 </html>
22 
23 /*demo02.css*/
24 div{
25     width: 100px;
26     height: 100px;
27 }
28 b{
29     display: block;
30 }
31 div:empty{
32     background-color: #bfb;
33 }
34 p:only-child{
35     background-color: #fbf;
36 }
37 b:first-child{
38     font-size: 2em;
39     color: #fbb;
40 }
41 b:last-child{
42     font-size: 3em;
43     font-weight: normal;
44     color: #bbf;
45 }

 1  <!-- demo03.html 伪元素状态伪类 -->
 2   <html>
 3       <head>
 4           <title></title>
 5       </head>
 6       <body>
 7          用户名称：<input type="text"><br>
 8     用户昵称：<input type="text" disabled value="请输入您的昵称">
 9     <br>
10     性别：<input type="radio" name="rdoGender">男
11               <input type="radio" name="rdoGender">女 
12       </body>
13  </html>
14  
15  /*demo03.css*/
16  input:enabled{
17     color: red;
18 }
19 input:disabled{
20     border: 1px solid #f00;
21 }
22 input[name=rdoGender]:checked{
23     background-color: #bfb;
24 }

 1  <!-- demo04.html 否定伪类 -->
 2   <html>
 3       <head>
 4           <title></title>
 5       </head>
 6       <body>
 7          <div>
 8         用户名称：<input type="text"><br>
 9         用户密码：<input type="password"><br>
10         <input type="submit" value="提交">
11         <input type="button" value="按钮">
12     </div>
13       </body>
14  </html>
15  
16  /*demo04.css*/
17 input:not(:last-child){
18     border: 1px solid #f00;
19 }

4、伪元素选择器：匹配出来的都是文本内容
a、:first-letter ->匹配首字符
b、:first-line -> 匹配首行
以上两个选择器，行内元素无效，行内块、块级可以
c、::selection ->用于欧赔用户选中的文本样式(火狐貌似不兼容)

 1  <!-- demo.html 为元素选择器 -->
 2   <html>
 3       <head>
 4           <title></title>
 5       </head>
 6       <body>
 7          <p>
 8         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
 9     </p>
10     <span>
11         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
12     </span>
13       </body>
14  </html>
15  
16  /*demo.css*/
17 p{
18     width: 200px;
19     border: 1px solid #bfb;
20     margin: 10% auto;
21     text-indent: 5px;
22 }
23 span{
24     /*float: right;*/
25     /*display: inline-block;*/
26     position: absolute;
27     top: 300px;
28     left: 500px;
29     
30 }
31 p:first-letter{
32     font-size: 20pt;
33     color: #fbb;
34 }
35 p:first-line{
36     font-style: italic;
37 }
38 span:first-line{
39     font-style: italic;
40     background-color: #ffb;
41 }
42 p::selection{
43     background-color: #bbf;
44     color: #fbf;
45 }