css选择器基本介绍

最新推荐文章于 2025-02-27 22:10:08 发布

原创最新推荐文章于 2025-02-27 22:10:08 发布 · 341 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

css选择器基本介绍

根据获取页面中元素的不同，目前css选择器主要分为五类：基本选择器，组合选择器，伪类选择器，伪元素和属性选择器。

1.基本选择器

基本选择器主要分为标签选择器，类选择器，ID选择器和通配选择器。

（1）标签选择器是css中使用率最高的一类选择器，易于管理，它直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中的显示样式。因此标签选择器可以快速，方便的控制页面标签的默认显示效果。

复制代码

1 <head>
2    <style>
3       p{
4           font-size:12px;
5           color:red;
6        }
7    </style>
8 </head>

复制代码

（2）类选择器，是以（.）前缀开头，然后跟随一个自定义的类名，对应于html中的class属性

复制代码

1 <style>
2     .font18px{
3         font-size:18px;
4      }
5 </style>
6 
7 <p class="font18px">该段落字体大小设置为18px</p>

复制代码

注：如果把标签和类结合在一起来定义选择器，则可以限定类的使用范围，这样就可以指定该类仅适用于特定的标签范围内，这种做法也称为指定类选择器。

复制代码

1 <style>
2      p.font18px{
3           font-size:18px;
4      }
5 </style>
6 <p class="font18px">样式只对该段落有效</p>
7 <p>样式对该段落无效，因为没有类font18px的指定</p>

复制代码

（3）ID选择器，是以（#）前缀开头，然后跟随一个自定义的ID名，对应于HTML中的ID属性。

复制代码

1  <style type="text/css">
2     #box{
3        height:200px;
4        width:400px;
5     }
6  </style>
7  <div id="box">宽400px，高200px</div>

复制代码

注：一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML框架元素的ID值都是唯一的。

（4）通配选择器，如果HTML所有元素都需要定义相同的样式，这时可选择通配选择器，通配选择器是固定的，用星号（*）表示。

1 *{
2    font-size：19px；
3 }

2.组合选择器

当把两个或者多个基本选择器组合在一起时，便形成了一个复杂的选择器，通过组合选择器可以精确匹配页面元素。主要包括：包含选择器，子选择器，相邻选择器，兄弟选择器，分组选择器。

（1）包含选择器：包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器。

1 #header p{
2     font-size : 18px;
3 }

表示的是从id =header中包含的所有p元素字体大小全部设置为18px，header为祖先，其他p为后代，即选中后代。不管是儿子还是孙子，只要是都会被选中。

（2）子选择器：指定父元素所包含的子元素。子选择器使用尖角号(>)表示。子选择器只传给儿子，孙子和其他堂亲都不行。

1 div > span {
2    font-size:24px;
3 }

表示包含在div元素内的子元素span字体大小为24像素。通过这种方式，可以准确定义HTML文档某个或一组子元素的样式，而不再需要为它们定义id属性或者class属性。

（3）相邻选择器：通过（+）分隔符进行定义，前后选择符的关系是兄弟关系。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻选择器。

1 p+h3{
2    font-size:18px;
3 }

（4）兄弟选择器：通过（~）分隔符进行定义，其基本结构是第一选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素。前后选择符的关系是兄弟关系。简言之，就是查找某一个指定元素的后面的所有兄弟结点。而先前介绍的相邻选择器只能查找紧接的那一个兄弟结点。

1 p~h3{
2    font-size:18px;
3 }

（5）分组选择器：通过（，）分隔符进行定义，其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素全部都取出来，通过分组选择器可以实现集体声明，将样式表中一致的css样式放在一起，然后通过逗号连接这些选择器，减少代码的书写量。

1 h1,h2,h3,h4{
2   font-size:18px;
3 }

3.属性选择器

复制代码

1 E[attr]    //只使用了属性名，但没有确定任何属性值。
2 E[attr="value"]    //指定了属性名，并指定了该属性的属性值。
3 E[attr~="value"]    //指定了属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的~不能不写。
4 E[attr^="value"]    //指定了属性名，并且有属性值，属性值是以value开头的。
5 E[attr$="value"]    //指定了属性名，并且有属性值，属性值是以value结尾的。
6 E[attr*="value"]    //指定了属性名，并且有属性值，属性值中包含了value。
7 E[attr|="value"]    //指定了属性名，并且属性值是value或者以value-开头的值，如（zh-en）。

复制代码

注：E表示匹配元素的选择符，可以省略；中括号为属性选择器标识符，不可或缺；attr表示html属性名，value表示html属性值，或者html属性值包含的子字符串，如a[title*="site"]，则可以匹配<a title="website"></a>，因为website中包含site子字符串。

4.伪类选择器

伪类选择器包含伪类和伪对象选择器，伪选择器以冒号（：）作为前缀标识符，冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格，否则将错认为类选择器。伪类选择器主要包括4种：动态伪类，结构伪类，否定伪类和状态伪类，其基本写法如下：

1 //单纯式
2 E.pseudo-class{property:value}
3 a:link{color:red;}
4 //混用式
5 E.class:pseudo-class{property:value}
6 a.selected:hover{color:red;}

（1）动态伪类：动态伪类是行为类样式，这些伪类并不存在于HTML中，只有当用户与页面交互时才能体现出来，动态伪类选择器包含两种形式：一种是锚点伪类，这是在链接中常见的样式，如:link，:visited；另一种是行为伪类，也称为用户操作伪类，如:hover,:active,:focus。

复制代码

 1 //尊重先后顺序：link-visited-hover-active
 2 <style>
 3     //链接没有被访问时前景色为灰色
 4     .demo a:link{color:gray;}
 5    //链接被访问过后前景色为黄色
 6     .demo a:visited{color:yellow;}
 7     //鼠标悬浮在链接上时前景色为绿色
 8     .demo a:hover{color:green;}
 9     //鼠标击中激活链接那一下前景色为蓝色
10     .demo a:active{color:blue;}
11 </style>

复制代码

（2）结构伪类：它是通过文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更加简洁。

复制代码

 1 :first-child //选择某个元素的第一个子元素
 2 :last-child //选择某个元素的最后一个子元素
 3 :nth-child() //选择某个元素的一个或者多个特定的子元素
 4 :nth-last-child() //选择某个元素的一个或者多个特定的子元素，从这个元素的最后一个子元素开始计算
 5 :nth-of-type() //选择指定的元素
 6 :nth-last-of-type() //选择指定的元素，从元素的最后一个开始计算
 7 :first-of-type //选择一个上级元素下的第一个同类子元素
 8 :last-of-type //选择一个上级元素的最后一个同类子元素
 9 :only-child //选择的元素是它的父元素的唯一一个子元素
10 :only-of-type //选择一个元素是它的上级元素的唯一一个相同类型的子元素
11 :empty //选择的元素里面没有任何内容

复制代码

 1 <style>
 2     body{
 3         background:#ccc;
 4         height:2617px;
 5         width:980px;
 6     }
 7     #wrap{
 8         position:absolute;
 9         width:249px;
10         height:249px;
11         z-index:1;
12         left:712px;
13         top:201px;
14     }
15     #wrap ul{
16         list-style-type:none;
17         margin:0;
18         padding:0;
19         font-size:12px;
20         color:#777;
21         border:1px solid red;
22     }
23     #wrap li{
24         background:url(image.JPG) no-repeat 2px 5px;
25         padding:1px 0px 0px 28px;
26         line-height:30px;
27     }
28     #wrap li a{
29         text-decoration:underline;
30         color:#777;
31     }
32     #wrap li a:hover{
33         color:blue;
34     }
35     #wrap li:first-child{
36         background-position:2px 0px;
37         font-weight:bold;
38     }
39     #wrap li:last-child{
40         background-position:2px -277px;
41         <!-- font-weight:bold; -->
42     }
43     #wrap li:nth-child(2){
44         background-position:2px -31px;
45     }
46     #wrap li:nth-child(3){
47         background-position:2px -72px;
48     }
49     #wrap li:nth-child(4){
50         background-position:2px -113px;
51     }
52     #wrap li:nth-child(5){
53         background-position:2px -154px;
54     }
55     #wrap li:nth-child(6){
56         background-position:2px -195px;
57     }
58     #wrap li:nth-child(7){
59         background-position:2px -236px;
60     }
61     
62     #wrap li:nth-of-type(even){
63         color:lightgray;
64     }
65 </style>
66 <body>
67     <div id="wrap">
68         <ul id="container">
69             <li><a href="#">送君千里，终须一别</a></li>
70             <li><a href="#">旅行的意义</a></li>
71             <li><a href="#">南师虽去，精神永存</a></li>
72             <li><a href="#">榴莲糯米糍</a></li>
73             <li><a href="#">阿尔及利亚，天命之年</a></li>
74             <li><a href="#">白菜鸡肉粉丝包</a></li>
75             <li><a href="#">展望塔上的杀人</a></li>
76             <li><a href="#">我们，只会在路上相遇</a></li>
77         </ul>
78     </div>
79 </body>

复制代码

 1 <style>
 2     .post p{
 3         background-color:#efefef;
 4     }
 5     <!-- :only-child如果需要在div.post只有一个P元素的时候，改变这个p的样式，那么便可以用:only-child选择器来实现 -->
 6     .post p:only-child{
 7         background-color:red;
 8     }
 9     <!-- :only-of-type表示一个元素中包含很多个子元素，而其中只有一个子元素唯一，那么久使用这个方法选中这个唯一的子元素 -->
10     .post p:only-of-type{
11         background-color:blue;
12     }
13 </style>
14 <div class="post">
15     <p>第一段文本内容</p>
16     <p>第二段文本内容</p>
17 
18 </div>
19 <div class="post">
20     <p>第三段文本内容</p>
21 </div>
22 <div class="post">
23     <div>子块一</div>
24     <p>文本段</p>
25     <div>子块二</div>
26 </div>

复制代码

（3）否定伪类：:not()表示否定选择器，即排除或者过滤掉特定元素。前面介绍的选择器都是匹配操作，而唯独:not()操作相反，它表示过滤操作，与jquery中的:not()选择器用法相同。

1 input:not([type="submit"]){
2   border:1px solid red;  
3 }

（4）状态伪类：状态伪类主要针对表单进行设计的，由于表单是UI设计的灵魂，UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。比如：:enabled, :disabled;:checked

（5）目标伪类：目标伪类选择器形式如E:target，它表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能有效。

复制代码

1 <style>
2 div.target{
3     background-color:red;
4 }
5 </style>
6 <div>
7     <div id="red">red</div>
8     <div id="blue">blue</div>
9 </div>