阅读 269

css - 选择器

css选择器

规则结构


每个CSS规则都有两个基本部分: 选择器和声明块
image.png

元素选择器

类型选择器

最常见的选择器是HTML元素(类型)选择器。

div {  
    color: blue;  
}
复制代码

选择器分组

当我莪们想要将多个元素一个用同一个样式的时候,可以使用选择器分组。

div, span {  
    color: blue;  
} 
复制代码

规则:将div和span选择器放在规则的左边,并用一个逗号来分隔声明块中的内容将应用到前面的两个选择器所引用的元素。

声明分组 & 成组

如果对同一个选择器具有多个声明块,那么我们可以将声明成组。如下:

div {  
    color: blue;  
}  
 
div {
	margin: 10px;
}
复制代码

div {  
    color: blue;  
    margin: 10px;
} 
复制代码

通配符选择器

css2引入了新的简单选择器,通配选择器。在这个选择器可以与任何元素匹配。相当于是一个所有元素成组的分组选择器

* {  
    color: blue;  
}  
复制代码

类选择器

要应用样式而不考虑具体的元素,最常用的方法是使用类选择器。使用选择器之前,需要先给文档元素添加class属性。

规则:类名前有一个点号(.),而且可以结合简单选择器(元素选择器或者通配选择器)。
如下面的例子div.title会将选择器的范围限定到“Class属性包含title的div标签”。.main等同于通配选择器(*.main).

.main {
	color: blue;
}
 
div.title {
	background: yellow;
}
复制代码

多类选择器

类名的顺序不限,以空格隔开。如果我们想要将同时具有main title 类属性的div设置特有的属性值字体为粗体字符。则可以如下:

div.main.title {
	font-weight: bold;
}
复制代码

ID选择器

ID选择器类似类选择器,二者之间有一些差别。ID选择器前面有一个#号(棋盘号)而不是一个点号(同样的也可以结合通配符选择器或者元素选择器)。

#main-content {
	color: blue;
}

div#main-content {
	color: blue;
}
 
*#main-content {
	color: blue;
}
复制代码

类选择器和ID选择器的选择?

  1. 类可以分配给任意多的元素,ID在一个 HTML 文档中使用且仅使用一次。因此如果有了一个id值为main-content的元素,该文档中的其他元素都不能有main-content的id值。
  2. 与类选择器不同,ID 选择器不能联合使用,因为 ID 属性不允许使用空白分隔的单词列表。
  3. class和id名称的另一个区别是,当决定某个元素应该应用哪个样式时,ID有更高的权重。

延伸

  1. 在实际中,浏览器并不总会检查 HTML 中 ID 的唯一性。如果你为多个元素设置了相同的 ID 属性值,它们可能都会被设置为相同的样式。这是不正确的实现,但这种情况很普遍。在一个文档中存在多个 ID 值相同的元素还会导致 DOM 脚本的问题,因为像getElementById()这样的函数依赖于文档中只存在一个 ID 为特定值的元素。
  2. 还要注意类和 ID 可能是大小写敏感的,这取决于文档的语言。HTML和XHTML语言把类和ID定义为大小写敏感的,因此类和ID选择器的大小写要和文档中的匹配。

属性选择器

类和ID选择器实际上是在选择属性的值。因为class和ID都是属于属性的。

分类:

  • 简单属性选择器
  • 准确属性值选择器
  • 部分匹配属性选择器
  • 头值属性选择器

简单属性选择器

/*选择所有具有class属性的div元素*/
div[class] {
	color: blue;
}
 
/*选择所有具有class属性的元素*/
*[class] {
	color: blue;
}
 
/*选择class属性包含main并且具有title属性的元素*/
.main[title] {
	color: blue;
}
 
/*选择有title属性并且同时具有href属性的元素*/
*[title][href] {
	color: blue;
}
复制代码

属性值匹配选择器【精确属性值】

在属性选择器的基础上可以进一步缩小选择器范围选择那些某个属性为某个确定值的元素。


div[class="main title"] {
	color: blue;
}
 
<div class="main title">  
    Test css rel.  
</div>  
复制代码

部分属性值匹配

如果属性能接受词列表(词之间用空格分隔),可以根据其中的一个词匹配选择。最经典的例子就是class属性了。用上面的例子来说:如果使用属性选择器达成部分属性值匹配,则需要如下:

div[title~="main"] {
	color: blue;
}

<div title="main title">  
    Test css rel.  
</div> 
复制代码

~: 这个符号就是边界(空白分割的单词就是边界,详情可以访问文章)匹配的效果。请看下面子串匹配属性选择器

image.png

[Foo~="bar"] :边界

div[title~="main"] {
  color: blue;
}
复制代码
<!-- 匹配 -->
<div title="1 main title">  
	Test css rel.  
</div> 

<!-- 不匹配 -->
<div title="1main title">  
	Test css rel.  
</div> 
复制代码

[Foo*="bar"] :子串

div[title*="main"] {
  color: blue;
}
复制代码
<!-- 匹配 -->
<div title="1 main title">  
	Test css rel.  
</div> 

<!-- 匹配 -->
<div title="1main title">  
	Test css rel.  
</div> 
复制代码

[Foo^="bar"] :开头

div[title^="main"] {
  color: blue;
}
复制代码
<!-- 不匹配 -->
<div title="1 main title">  
	Test css rel.  
</div> 

<!-- 匹配 -->
<div title="main title">  
	Test css rel.  
</div> 
复制代码

[Foo$="bar"] :结尾

div[title$="main"] {
  color: blue;
}
复制代码
<!-- 不匹配 -->
<div title="1 main title">  
	Test css rel.  
</div> 

<!-- 匹配 -->
<div title="main"> 
	Test css rel.  
</div> 
复制代码

[Foo|="bar"] :以bar为开头并且用连接符"-"分割的字符串。

div[title$="main"] {
  color: blue;
}
复制代码
<!-- 不匹配 -->
<div title="1-main-title">  
  Test css rel.  
</div> 

<!-- 匹配 -->
<div title="main-title">  
  Test css rel.  
</div>

<!-- 匹配 -->
<div title="main">  
  Test css rel.  
</div>
复制代码

延伸:忽略大小写标识符

知道正则表达式的都知道修饰符i的意义:执行对大小写不敏感的匹配。

CSS Selectors level 4 为属性选择器引入了忽略大小写选项。在中括号关闭之前使用i允许选择器匹配属性值的时候忽略大小写,无视文档语言的规则。

div[title~="Main" i] {
	color: blue;
}
复制代码


从图中红框内的内容可以看出当前的main执行的是忽略大小写的匹配。
* 至 2017 年底,Opera Mini、Android 浏览器和 Edge 不支持此能力

关系选择器

CSS 之强大在于它利用文档结构决定(元素的)样式和样式作用于元素的方式。结构确实在样式作用于文档时扮演了非常重要的角色。

后代选择器

解释:选择器之间的空格是一个组合器的例子。每个空格组合器都可以被译作“在……中”、“是……的一部分”或“是……的后代”,前提是选择器从右向左读。
因此,h1 em可以被译作“把样式作用于任何em元素,如果它是h1元素的后代”。(如果选择器从左向右读,则是:“选择任何h1,如果它包含一个em元素,规则将会作用于它包含的em”)。

h1 em {color: gray;}
复制代码

子元素选择器

选择元素的范围在子元素中。可以使用子元素选择器,它是一个大括号(>)。

h1 > strong {color: red;}
复制代码

选择相邻兄弟选择器

选择紧接在另一个元素后的元素,且二者具有相同的父元素。相邻兄弟选择器使用了加好(+),即相邻兄弟结合符

li:nth-child(2) + li {  
  font-weight:bold;  
} 
复制代码
<ul>  
    <li>List item 1</li>  
    <li>List item 2</li>  
    <li>List item 3</li>  
</ul>
复制代码


上面的代码作用于第二个li元素的相邻兄弟元素。是第三个li元素。
image.png

兄弟选择符

与相邻选择符不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。使用符号(~)

div ~ p {  
    font-weight:bold;  
}
复制代码

伪类选择器

伪类选择器非常有趣,它们是一些根据元素状态变化而产生作用的幽灵类。伪类选择器可以根据某些确定元素的状态、文档中的标记模式甚至文档本身的状态选择元素并添加样式。

链接伪类

CSS2.1 定义了两个之应用于超链接的伪类。

  • :linlk 设置超链接a在未被访问前的样式。
  • :visited 设置超链接a在其链接地址已被访问过时的样式。

超链接的4种状态,需要有下面的书写顺序才能生效。其他的两个属于动态伪类


a:link {  
    color: #FF0000; /* 未访问的链接 */  
    }         
a:visited {  
    color: #00FF00; /* 已访问的链接 */  
    }     
a:hover {  
    color: #FF00FF; /* 鼠标移动到链接上 */  
    }     
a:active {  
    color: #0000FF; /* 选定的链接 */   
}  
复制代码

动态伪类

CSS2.1 定义了三个动态伪类,可以根据用户行为改变文档的外观。这些动态伪类以前总是用类设置超链接的样式。但是现在动态伪类可以应用到任何元素上,这一点是非常重要的。

  • :hover 设置元素在其鼠标悬停时的样式。
  • :focus 设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。
  • :active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8" />
        <style>
            h1 {
                font-size: 16px;
            }
 
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
 
            input:focus {
                background: #f6f6f6;
            }
 
            input:hover {
                background: blue;
            }
 
            input:active {
                background: red;
            }
        </style>
    </head>
    <body>
        <h1>请聚焦到以下输入框</h1>
        <form action="#">
            <ul>
                <li><input value="姓名" /></li>
                <li><input value="单位" /></li>
                <li><input value="年龄" /></li>
                <li><input value="职业" /></li>
            </ul>
        </form>
    </body>
</html>
复制代码

20180524224754326 (1).gif

结构性伪类

大部分伪类都是结构性的,既它们是与文档的标记结构相关的。

选择第一个子元素

**:first-child **匹配父元素的第一个子元素E。要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>
复制代码

child的其他伪类

  • E:last-child { sRules }         匹配父元素的最后一个子元素E。
  • E:only-child { sRules }         匹配父元素仅有的一个子元素E。
  • E:nth-child(n) { sRules }       匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
  • E:nth-last-child(n) { sRules }  匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。

匹配语言

**:lang(fr) 匹配使用特殊语言的元素。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8" />
        <style>
            p:lang(zh-cmn-Hans) {
                color: #f00;
            }
            p:lang(en) {
                color: #090;
            }
        </style>
    </head>
    <body>
        <p lang="zh-cmn-Hans">大段测试文字</p>
        <p lang="en">english</p>
    </body>
</html>
复制代码

选择根元素

:root 这是结构简单性的精髓:伪类选择器:root选择文档的根元素。在 HTML 中,根元素永远是html元素。

:root {border: 10px dotted gray;}
复制代码

选择空元素

使用伪类:empty,可以选择任何没有子节点的元素——没有任何类型的子元素:不包含文本节点,不包括文字和空白。

<p></p>
<p> </p>
<p>
</p>
<p><!—-a comment--></p>
复制代码

第二个和第三个段落不会匹配:empty,因为它们不是空的:它们各自包含一个空格和一个换行符,都会被当做文本节点,因此不是空状态。最后一个段落能够匹配,因为注释既不会被当成内容,也不会被当成空白。但是如果在注释的任何一侧添加一个空格或者换行,p:empty将不再匹配它。

选择非元素的所有元素

:not(s) 匹配不含有s选择符的元素E。

.demo li:not(:last-child) {
	border-bottom: 1px solid #ddd;
}
复制代码

给该列表中除最后一项外的所有列表项加一条底边线

选择第一个特定类型的元素

E:first-of-type { sRules } 匹配同类型中的第一个同级兄弟元素E。要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body该选择符总是能命中父元素的第1个为E的子元素,不论第1个子元素是否为E

type其他的类型

  • E:last-of-type { sRules }        匹配同类型中的最后一个同级兄弟元素E。
  • E:only-of-type { sRules }        匹配同类型中的唯一的一个同级兄弟元素E。
  • E:nth-of-type(n) { sRules }      匹配同类型中的第n个同级兄弟元素E。
  • E:nth-last-of-type(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E。

UI状态伪类

  • E:checked { sRules } 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
  • E:enabled { sRules } 匹配用户界面上处于可用状态的元素E。(主要用于表单元素)
  • E:disabled { sRules } 匹配用户界面上处于禁用状态的元素E。(主要用于表单元素)
  • E:target { sRules } 匹配相关URL指向的E元素。URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。

打印类伪类 (了解)

@page :first { sRules }
设置在打印时页面容器第一页使用的样式。仅用于@page规则。
该伪类选择符只允许定义margin, orphans, widows 和 page breaks相关属性

@page :left { sRules }
设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则。
该伪类选择符只允许定义margin, padding, border 和 background属性

@page :right { sRules }
设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则。
该伪类选择符只允许定义margin, padding, border 和 background属性

伪元素选择器

E:first-letter/E::first-letter { sRules }

设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。
该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

IE6在使用该选择符时有个显式的BUG:选择符与包含规则的花括号之间不能紧挨着,需留有空格或换行。同时还存在该BUG的选择符包括:E:first-line

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

即E:first-letter可转化为E::first-letter

p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
复制代码

E:first-line/E::first-line { sRules }

设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。

IE6在使用该选择符时有个显式的BUG:选择符与包含规则的花括号之间不能紧挨着,需留有空格或换行。同时还存在该BUG的选择符包括:E:first-letter

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

即E:first-line可转化为E::first-line

p:first-line {color:#090;}
p::first-line {color:#090;}
复制代码

E:before/E::before { sRules }

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

即E:before可转化为E::before

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8" />
        <style>
            p{
                position:relative;
                color:#f00;
                font-size:14px;
            }
            p:before{
                position:absolute;
                background:#fff;
                color:#000;
                content:"如果你的能看到这段文字,说明你的浏览器只支持E:before";
                font-size:14px;
            }
            p::before{
                position:absolute;
                background:#fff;
                color:#000;
                content:"如果你的能看到这段文字,说明你的浏览器支持E:before和E::before";
                font-size:14px;
            }
        </style>
    </head>
    <body>
        <p><span>Sorry, 你的浏览器不支持E:before和E::before</span></p>
    </body>
</html>
复制代码


如图,当浏览器支持before,由于内容设置为float,所以将之前的文件盖住了。

20180524224754326 (1).gif

E:after/E::after { sRules }

设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

即E:after可转化为E::after

E::placeholder { sRules }

设置对象文字占位符的样式。
::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。

当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。

需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder
Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

input::-webkit-input-placeholder {
	color: #999;
}
input:-ms-input-placeholder { // IE10+
	color: #999;
}
input:-moz-placeholder { // Firefox4-18
	color: #999;
}
input::-moz-placeholder { // Firefox19+
	color: #999;
}
复制代码

E::selection { sRules }

设置对象被选择时的样式。
需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8" />
        <style>
            p::-moz-selection{
                background:#000;
                color:#f00;
            }
            p::selection{
                background:#000;
                color:#f00;
            }
        </style>
    </head>
    <body>
        <h1>选中下面的文字,看看它的颜色</h1>
        <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p>
    </body>
</html>
复制代码

20180524225653535.gif

first-child与:first-of-type的区别

(1) 可以匹配的范围不同

first-of-type 可以匹配body元素,而first-child不行

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8" />
        <style>
            body:first-of-type {
                background:gray;
                color:#f00;
            }
            body:first-child {
                background:blue;
                color:#f00;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>第二个子元素</h1>
            <p>第一个子元素</p>
            <h1>第二个子元素</h1>
            <span>第三个子元素</span>
            <span>第四个子元素</span>
        </div>
    </body>
</html>
复制代码

如图可见当前只有first-of-type样式匹配到body元素上。

image.png

(2) 结构上的限制

:first-child匹配的同时要求当前元素必须是第一个子元素,而first-of-type则没有这个限制

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8" />
        <style>
            p:first-of-type {
                background:#000;
                color:#f00;
            }
            p:first-child {
                background:#000;
                color:#f00;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>第二个子元素</h1>
            <p>第一个子元素</p>
            <h1>第二个子元素</h1>
            <span>第三个子元素</span>
            <span>第四个子元素</span>
        </div>
    </body>
</html>
复制代码

如图p标签由于不是当前p元素的父元素div的第一个子元素,所以只匹配了first-of-type,而没有匹配first-child.

image.png

文章分类
前端
文章标签