css选择器

来源：互联网发布：淘宝买苹果7手机可靠吗编辑：程序博客网时间：2024/05/29 18:22

css选择器是css的重中之重，所以总结如下：

一共可分为六大类：

1>元素选择器：文档的元素就是最基本的选择器

eg:html{ color:red;} h1{color:red;}p{color:red}

2>id选择器:：允许以一种独立于文档元素的方式来指定样式

eg:#intro{color:red}

3>class选择器：选择属于同一类的元素

eg:.special{color:red;}

4>后代选择器：选择作为某元素的后代元素

eg:<ul>
<li>List item 1
<ol><li>List item 1-1</li><li>List item 1-2</li>
<li>List item 1-3<ol>
<li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li></ol>
</li> <li>List item 1-4</li></ol>/li><li>List item 2</li><li>List item 3</li></ul>

css样式: ul em{color:red; font-weight:bold;}

5>子元素选择器：与后代元素相比，子元素选择器只能作为某元素子元素的元素

eg:<h1>This is <strong>very</strong><strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em>important.</h1>

css: h1 > strong{color:red;}

这个规则会把第一个h1下面的两个strong变为红色，但第二个h1中的strong不受影响

This is very veryimportant.

This is really veryimportant.

6>组合选择器：如果需要几个元素或class等等都添加一个样式，就需要组合原则器

eg: body, h2, p, table, th, td, pre, strong, em{color:gray;}

7>相邻兄弟选择器：用于定位同一个父元素下某个元素之后的元素

请记住：用一个结合符只能选择两个相邻兄弟中的第二个元素，请看下面例子

eg: <div>

</div>

li + li { font-weight: bold;}

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

8>属性类选择器：可以根据某个属性是否存在或属性的值来寻找元素，因此能够实现某些非常有意思和强大的效果

[attr] 用于选取带有指定属性的元素

[attr = value] 用于选取带有指定属性和值的元素

[attr ~= value] 用于选取属性中包含指定词汇的元素

[attr |= value] 用于选取以指定值开头的属性值的元素，该值必须是整个单词

[attr ^= value] 匹配属性值以指定开头的每个元素

[attr $= value] 匹配属性值以指定结尾的每个元素

[atte *= value] 匹配属性值中包含指定值的每个元素

eg:<style type="text/css">
h2[title]/*h2元素有title属性的元素才可以应用改样式*/
{
color:red;
}
</style>

<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a><hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>

可以应用样式：

Hello world

W3School

无法应用样式：

Hello world

W3School

9>伪类选择器：是

:link 用来寻找没有被访问过的链接

:visited 用来寻找被访问过的链接

:hover 用来寻找鼠标悬停处的元素

:active 用来寻找被激活的元素

:focus 用来寻找元素被选择并且准备输入时

注：运用顺序：L V H F A

10>伪元素选择器：在css2中由一个单冒号（:）来定义，在css3中，为了更好的向后兼容由一个双冒号（::）来定义

:first-line 向文本的首行添加特殊样式

:first-letter 向文本的首字母添加特殊样式

:before 在元素之前添加内容

:after 在元素之后添加内容

eg: h1:after {content:url(/i/w3school_logo_white.gif)}

11>css3属性选择器

:first-child : last-child

选择其属于父元素的首(最后一个)个子元素

eg:<style>
p:first-child
{
background-color:yellow;
}
</style>

<body>
<p>这个段落是其父元素（body）的首个子元素。</p>
<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p
<div>
<p>这个段落是其父元素（div）的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>

<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p>
</body>

:root ：匹配元素所在文档的根元素，也就是html

eg:root{background-color:red;} <=> html{background-color:red;}

:not ：除某个元素之外的所有元素

eg: div :not([id="footer"]){
background: orange;
}

:empty：用来选择不含任何内容的元素，也就是什么都不含，哪怕一个空格

eg: <p>我是一个段落</p>

p{background-color:red; padding:30px;} p:empty{display:none;}

:target：目标选择器，匹配某个标识符的目标元素。

eg：<h2><a href="#brand">Brand</a></h2>

content for Brand

</div>

:target{display:block;};y

这里的target就指的是id="brand"的对象

:nth-child(n/2n/3n+1)：用来定位某个父元素的一个或多个特定的子元素

:nth-last-child(n)：从父元素的最后一个子元素开始

:first-of-type：父元素下某个类型的第一个子元素

:nth-of-type(n)：父元素下某个类型的一个或多个特定的子元素

:last-of-type：父元素下某个类型的最后一个子元素

:nth-last-of-child(n)：

:only-child：匹配的父元素中仅有一个子元素，而且是唯一的子元素

eg: <div class="post">

<p>我是一个段落</p><p>我是一个段落</p>

</div>

<p>我是一个段落</p>

</div>

.post p:only-child{ background: orange;}/*即第二个post的p元素背景为orange*/

:only-of-type：同上，匹配父元素中仅有的某个类型的一个子元素，唯一的

:enable和:disable：可用和不可用，根据标签中的属性

:checked：匹配选中状态的元素

::selection：伪元素是用来匹配突出显示的文本（用鼠标双击选择文本是的文本，即可显示设置的样式）

:read-only：伪类选择器用来指定处于只读状态元素的样式。元素中设置了"readonly='readonly'"属性的

:read-write：与read-only刚好相反，没有该属性的

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的的场景最多的就是清楚浮动

css选择器的优先级：

！important》ID选择器》Class类选择器》关联选择器（各种子、后代等等组合式选择器）》独立元素选择器

0 0