css选择器

时间 2019-11-30

标签 css 选择器栏目 CSS 繁體版

原文原文链接

css以及css3都包含了很是多的选择器，这些选择器给咱们提供了极大的便利css

在这篇随笔当中，入门阶段的元素选择器，id选择器，class选择器，群组选择器就不介绍了。这里咱们要讲的是css中的层次选择器以及css3中的选择器html

1、层次选择器css3

1.后代选择器：选择元素内部中全部的某一个元素，包括子元素和其余后代元素浏览器

语法：M N{}字体

说明：在后代选择器中，“M元素”和“N元素”之间用空格隔开，表示选中M元素内部后代N元素（全部N元素）。spa

2.子代选择器：选中元素内部某一个子元素，该选择器与后代选择器有着明显区别xml

（1）后代选择器选取得是全部元素htm

（2）子代选择器选取得是内部某一类子元素（仅限子元素，不包括子孙元素）blog

语法：M>N{}get

3.兄弟选择器

语法：M~N{}

说明：选中M元素后面的某一类兄弟元素，记住，兄弟选择器只选取后面的全部兄弟元素，不包括前面的全部兄弟元素

4.相邻选择器

语法：M+N{}

表示选择M元素后面的某一个相邻的兄弟元素N。

技巧：li+li{/*样式代码*/}

使用在相邻选择器，表示选择li元素相邻的下一个li元素，由于最后一个li元素没有相邻的下一个li元素。因此对于最后一个li元素，没有下一个li元素能够选取

例如：li+li{border-top：2px soild red；}能够达到在两个li元素之间添加一个单边框的效果

2、CSS3选择器

（1）结构伪类选择器

1.第一类结构伪类选择器：（子元素选择器）

E:first-child 选择父元素的第一个子元素

E:last-child 选择父元素的最后一个子元素

E:nth-child（n）选择父元素的第n个子元素或奇偶元素，n的取值为整数或者odd/even

E:only-child 选择父元素下的惟一个子元素（只有在父元素只有一个子元素的状况下才能使用）

以上的E是子元素，须要在前面添加父元素例如：ul li：first-child{/*css代码*/}，第一类结构伪类选择器特别适合与设置列表的列表项的不一样样式，还有表格，列表中的隔行换色。

eg：

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

h1:first-child：选择的是h1，由于h1是div的第一个子元素

p：first-child:选择不到任何元素，由于p不是div的第一个子元素

2.第二类结构伪类选择器：（同级兄弟元素选择器）

E:first-of-type 选择同元素类型的第一个同级兄弟元素

E:last-of-type 选择同元素类型的最后一个同级兄弟元素

E:nth-of--type(n) 选择同元素类型的第n个或奇偶同级兄弟元素

E:only-of-type 匹配父元素中特定类型的惟一子元素（该父元素能够有多个子元素）

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

h1:first-of-type:选择的是h1，由于h1元素是全部h1元素里的第一个h1元素，并且也只有h1元素

p：first-of-type：选择的是p，由于p元素是全部p元素里的第一个p元素，并且也只有p元素

*因此，在经过第一类和第二类的比较后，咱们能够发现，第一类结构伪类选择器是选择父元素下的第一个子元素（不区分元素类型），而第二类结构伪类选择器则是选择特定类型的元素的第一个元素（区分元素类型）

3.第三类结构伪类选择器：

1. :root 选择页面的根元素，也就是html元素

2. E:not() 选择括号内元素以外的全部元素

3. E:empty 选择一个不包含任何子元素和内容的元素

用法：这个选择器很是的实用，咱们能够经过这个选择器来控制一些内容为空的表格单元格的样式

4. E:target 选取页面中某个target元素

*所谓的target元素，就是指id被当作页面内的超连接的元素

eg：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 :target选择器</title>
    <style type="text/css">
        :target h3
        {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
        <a href="#article">推荐文章</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的下图</li>
            <li>曲婉婷-在个人歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
</body>
</html>

　　其中，#表示返回顶部，#加id名，则表示返回至该页面的id所在地，也就是咱们常说的锚点连接

target选择器里的样式，只有当连接被点击的时候才会被显示出来

（2）属性选择器

所谓属性选择器，就是经过属性来选择元素

1.E[attr^="属性值"]

选取了属性以双引号内属性值开头的元素

2.E[attr$="属性值"]

选取了属性以双引号内属性值结尾的元素

3.E[attr*=“属性值”]

选取了属性包含了双引号内属性值的元素

（3）UI元素状态伪类选择器

什么叫作UI元素状态：UI元素状态包括可用，不可用，失去焦点，得到焦点，选中，未选中

包括如下选择器：

1.E:focus 指定获取焦点的元素样式

通常状况下，E:focus主要针对与表单元素单行文本框text和多行文本框textarea

eg：

input:focus{
outline:1px solid red;
}

*outline属性用于设置文本框的外边框样式

2.E:checked 选择E元素中全部被选中时的元素

说明：目前只有opera浏览器支持E:checked选择器，该选择器通常用于表单元素单选框radio和复选框checkbox，设置他们的选中与未选中的状态

3.E::selection 改变E元素中被选择的网页文本的显示效果（用鼠标选中的文本）

说明：在这里，selection选择器前面的是双引号，这说明他是伪元素，而单引号则是伪类。默认状况下，被选中的文本都是蓝色背景，白色字体，咱们能够利用这个选择器来改变这个样式

4.E:enabled 选择E元素中可用元素 || E:disabled 选择E元素中不可用元素

说明：表单元素默认状况下都是可用的，当咱们在想要禁用的表单元素中加入disabled属性，这个表单元素就是出于被禁用状态，这时就可使用这个选择器

5.E:read-write 选择E元素中可读写元素 || E:read-only 选择E元素中只读元素

说明：同上，用法相似可用于不可用元素选择器

7.E::before 在E元素以前插入内容，样式中必须有content || E::after 在E元素以后插入内容，样式中必须有content

说明：这两种伪元素选择器经常使用于清除浮动和建立小图标