首页 > 代码库 > 常用的选择器

常用的选择器

2024-08-12 04:58:05   220人阅读

1、类型选择器

  用来寻找特定类型的元素，一般指css中被通俗定义并广泛应用的元素，如段落、标题、正文等

<也称为元素选择器或简单选择器>

p{font-size:16px;color:black;}

2、后代选择器

 用来寻找特定元素或元素组的后代，中间以空格表示

body p{font-size:14px;}

3、ID选择器

 用于寻找具有指定ID的元素，由字符#表示

#intro{font-weight:bold;}
<p id="intro">Hello World!</p>

4、类选择器

 用于寻找具有指定类名的元素，由点号.表示

.date-posted{color:#ccc;}
<p class="date-posted">12/12/2012</p>

5、伪类选择器

 对目标元素出现某种特殊的状态应用样式

常见的有: :link,:visited(链接伪类，只能应用于锚元素)

             :hover,:active,:focus(动态伪类，理论上可应用于任何元素)

a:link{color:blue;text-decoration:none;}
a:visited{color:grey;}

a:hover,:active,:focus{color:red;}

6、通用选择器

 

 匹配所有可用元素，由*表示

*{padding:0;margin:0;}

7、高级选择器

 1）子选择器

  只选择元素的直接后代，即子元素，定义符号是>

body>p{color:green;}
<body>
 <p>这一段是绿的</p>
 <div><p>这一段不是绿的</p></div>
 <p>这一段是绿的</p>
</body>

2）相邻同胞选择器（相邻选择器）
定位同一父元素下某个元素之后的元素，定义符号是+
h2+p{color:red;}

<h2>红的？</h2>
<p>是红的</p>
<p>不是红的</p>
<h2>红的？</h2>
<div><p>不是红的</p></div>
<p>不是红的</p>
<h2>红的？</h2>
不是红的
<p>红的</p>
<p>不是红的</p>

3）属性选择器
根据某个属性是否存在或属性的值来寻找元素，定义方式是将属性和值写在[]内
a[name]{color:red;}                        /*选中具有name属性的a元素*/
[special]                                  /*选中具有special属性的任何元素*/
img[alt="so"][class="pic"]{margin:20px;}   /*同时匹配两个属性和值*/
[special~="wo"]{color:red;}
<h2 special="wo">文字是红色的</h2>          /*具有special属性且值得字符中含有wo*/
 
常用的选择器






























        

            
                
                  
                
                

                    联系

                    我们