CSS3选择器

分享于 

19分钟阅读

Web开发

  繁體 雙語
本文是关于CSS选择器以及它如何工作的。 下面是CSS中使用的大部分选择器的解释。

第一个是css示例和它将要工作的Html代码,所以要尝试自己创建Html页面和相关 Html。 在我提供的大多数选择链接中,你可以访问并查看结果。

在 below post中,你可能会发现一些新的CSS选择器,它们是新CSS3的一部分。 所有的below 示例和演示都由我在最新的Chrome 版本中试用。

-: 选择具有给定类名的所有元素。


.MyIntro


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div class="MyIntro">


<p>My name is Pranay Rana.</p>


<p>I am working as Soft Engg.</p>


</div>



#id -: 选择具有给定id名称的所有元素。


 #MyIntro


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div id="MyIntro">


<p>My name is Pranay Rana.</p>


<p>I am working as Soft Engg.</p>


</div>



指向注意:在HTML页面中可以有多个具有相同类型的元素,但只能有一个元素。
Select选择名称为given的所有html元素。


 p


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div>


<p>My name is Pranay Rana.</p>


<p>I am working as Soft Engg.</p>


</div>



将目录中的所有html元素都添加到目录中。


div p


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div >


<p>My name is Pranay Rana.</p>


<Span>


 <p> data </p>


</Span>


</div>


<p>I am working as Soft Engg.</p>



本例中,所有p 元素 inside div都以读颜色突出显示,但div外部的p 元素不会受到影响。
演示> - 选择html元素的所有子元素。


div > p


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div >


<p>My name is Pranay Rana.</p>


<Span>


 <p> data </p>


</Span>


</div>


<p>I am working as Soft Engg.</p>



在这个例子中,所有p 元素都是div子元素,但是它不会受到任何子元素的影响。
演示 HtmlElement HtmlElement - 选择html元素之后立即显示的所有html元素。


div + p


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div >


<p>My name is Pranay Rana.</p>


</div>


<p>I am working as Soft Engg.</p>


<p> data </p>



本例中,在div突出显示后立即显示的p 元素,在本例中,这里文本将高亮显示。
演示 - 选择html元素之前的所有html元素。


div ~ p


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div >


<p>My name is Pranay Rana.</p>


 <span>


 <p> data </p>


 </span> 


</div>


<p>I am working as Soft Engg.</p>


<p>My Demo Page.</p>



在本例中,位于div前面的p 元素以读颜色突出显示,在本例中,"我的工作是软 Engg。"和"我的演示页面。"。
演示 [attribute] - 选择所有拥有属性的html元素。


[data-name]


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div >


<p data-name="pranay">My name is Pranay Rana.</p>


 <span>


 <p> data </p>


 </span> 


</div>


<p>I am working as Soft Engg.</p>


<p data-name="demo">My Demo Page.</p>



在这个例子中,任何具有属性"数据名称"div的元素都以红色突出显示,在本例中,"我叫 Pranay Rana。"和"我的演示页面。"文本。
用显示 [attribute = data] Select选择所有具有等于数据的属性值的html元素。


[data-name = 'demo']


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div >


<p data-name="pranay">My name is Pranay Rana.</p>


 <span>


 <p> data </p>


 </span> 


</div>


<p>I am working as Soft Engg.</p>


<p data-name="demo">My Demo Page.</p>



在本示例中,任何具有属性"数据名称"和值="演示"的元素都用红色突出显示,在本示例中显示"我的演示页面。"文本。
按以下步骤计算: Demo [attribute ^= data] - 选择属性值开始的所有html元素。


[data-name ^= 'pra']


{


 font:15px arial,sans-serif;


 color:red;


}



因这里,在应用 上面的"我叫 Pranay Rana。"文本时,因为它的"数据名称"属性值起始于"pra",所以使用。 按需收费 [attribute $= data] - 选择所有属性值为data的html元素。


[data-name ^= 'pra']


{


 font:15px arial,sans-serif;


 color:red;


}



当使用 上面 html时,应用这里"我叫 Pranay Rana。"文本的原因是它的"数据名称"属性值以"nay"结尾。 用显示 [attribute *= data] Select Select attribute属性值包含数据的所有html元素。


[data-name *= 'rana']


{


 font:15px arial,sans-serif;


 color:red;


}



因此,当应用 上面 html时,应用这里"我叫 Pranay Rana。"文本会得到突出显示,因为它的"数据名称"属性值包含"青蛙"。 收费为Demo [attribute ~= data] 选择所有属性值包含单词数据的html元素。


[data-name ~= 'page']


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div >


<p data-name="pranay_page">My name is Pranay Rana.</p>


 <span>


 <p> data </p>


 </span> 


</div>


<p>I am working as Soft Engg.</p>


<p data-name="demo page">My Demo Page.</p>



在这个示例中,属性"数据名称"值包含单词="页面"的任何元素都用红色突出显示,在本例中,"我的演示页面。"
演示: first - 选择父元素的第一个元素( 第一个子级)。


li:first-child


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<ul>


 <li>item1</li>


 <li>item2</li>


 <li>item3</li>


 <li>item4</li>


</ul>



在本例中,"item1"元素以红色高亮显示。
演示:last-child - 选择父元素( 最后一个子)的最后一个元素。


li:last-child


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<ul>


 <li>item1</li>


 <li>item2</li>


 <li>item3</li>


 <li>item4</li>


</ul>



在本例中,"item4"元素以红色高亮显示。
演示:nth子( n ) - 选择父元素的所有元素的全部元素。


li:nth-child(2)


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<ul>


 <li>item1</li>


 <li>item2</li>


 <li>item3</li>


 <li>item4</li>


</ul>



本示例中,"第二 li"元素以红色高亮显示,在本例中,"item2"文本突出显示
演示:nth-last-child ( n ) - 选择所有最后一次从底部计数父元素的元素的元素。


li:nth-last-child(2)


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<ul>


 <li>item1</li>


 <li>item2</li>


 <li>item3</li>


 <li>item4</li>


</ul>



本示例中,"第二 li"元素以红色高亮显示,在本例中,"指派的"文本突出显示
演示:仅子 - 选择子元素which父元素的子元素。


p:only-child


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div>


 <p> pragraph 1</p>


</div> 


<div>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


 <p> pragraph 4</p>


</div>



在此示例中,"paraghaph 1"元素以红色高亮显示,它是div元素的子元素。
演示:first-of-type - 选择第一个类型的元素,第一个元素是在父元素下。


p:first-of-type


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div>


 <p> pragraph 1</p>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


</div>



在本例中,"段落 1"元素以红色高亮显示。
演示::last-of-type - 选择最后一个类型的元素,最后一个元素是在父元素下面。


p:last-of-type


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div>


 <p> pragraph 1</p>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


</div>



本例中"段落 1"元素以红色高亮显示,这意味着"pragraph 1"是div下类型为p的第一个元素。
演示:nth-of-type ( n ) - 选择给定类型的第1 个元素,位于父元素下的第1 个位置。


p:nth-of-type(2)


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div>


 <p> pragraph 1</p>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


 <p> pragraph 4</p>


</div> 



在本例中,"段落 2"元素用红色亮显,这意味着在div下,"pragraph 2"是 2th 类型的。
按收费:nth-last-of-type :( n ) - 选择给定类型的最后一个元素,从最后一个元素到最后一个元素的第n 个位置。


p:nth-last-of-type(2)


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div>


 <p> pragraph 1</p>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


 <p> pragraph 4</p>


</div> 



在这个示例中,"段落 3"元素用红色亮显,这意味着在从最后一个中"pragraph 3"类型的。
收费:only-of-type: - 选择属于父元素的给定类型元素。


p:only-of-type


{


 font:15px arial,sans-serif;


 color:red;


}



使用

<div>


 <p> pragraph 1</p>


</div> 


<div>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


 <p> pragraph 4</p>


</div> 



在本例中,"段落 1"元素以红色高亮显示,因为p 是给定类型的元素。
演示:空 - 选择空 换句话说,donent的元素有任何子元素。


div:empty


{


 width:100px;


height:20px;


background:red;


}



使用

<div></div> 


<div>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


 <p> pragraph 4</p>


</div> 



在这里 Highlight 中,文档中的所有文本都带有红色。
收费 :: 选择- Highlight 带有选中颜色的文字。


::selection


{


 background:green;


}



使用

<div> <p> pragraph 1</p> </div> 


 <div>


 <p> pragraph 2</p>


 <p> pragraph 3</p>


 <p> pragraph 4</p>


</div> 



在这里 Highlight 中,所有带有绿色的文本都可以在文档中进行选择。
演示:不使用( HTMLElement ) - 它不向指定的HTMLElement应用样式。


:not(span)


{


 font:15px arial,sans-serif;


 color:red;


}


span


{


 color:black;


}



使用

<p> pragraph 1</p>


<p> pragraph 2</p>


<p> pragraph 3</p>


<p> pragraph 4</p>


<span> span data</span>




在这里 Highlight 中,p 元素 换句话说,中的所有文本都不会将样式应用到 span 元素。
演示:启用 - 选择所有支持元素。
:禁用 - 选择所有禁用元素。


:input[type="text"]:enabled


{


background:green;


}


input[type="text"]:disabled


{


background:red;


}



使用

Name: <input type="text" value="Pranay Rana"/><br>


Country: <input type="text" disabled="disabled" value="India"/> 



这里的名字是用红色突出显示的,乡村框用绿色突出显示。
示范

结论

大部分选择器都是新的,这些是CSS3的一部分,我希望有助于理解。 我在这里介绍了大部分CSS选择器,但如果缺少一些内容,请将注释 below 放在这里。

如果你有任何疑问或者你喜欢的话,留下评论。 Pelease报告如果任何链接无效或者断开。

Select  CSS3  选择器  
相关文章