CSS3选择器

爱被打了一巴掌 2021-12-20 01:04 425阅读 0赞

CSS是层叠样式表（Cascading Style Sheets）的简称，并且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，当然包括CSS2的内容，CSS3也称作级联样式表或者是层级样式表。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的，

选择器：指定特定标签的方式。

**一，基本选择器。通配符\*，标签，类class，id，子，兄弟，群组。**

**二，属性选择器。=全等，~=约等，^=开头，$=结尾，\*=含有，|=特别**

**二，伪类选择器。（我们的对象是HTML标签，就是冒号前面的标签。）**

**1，动态伪类： a :likn a:visited a:hover a:active input:focus**

**2，状(静)态伪类： input:enable input:disable input:checked**

**3，结构伪类：　 div:nth-child(n)正数 div:nth-last-child(n)倒数 div:first-of-child(n) div:last-of-child(n)**

**　　　　　　　　　　 div:nth-of-type(n)正数 div:nth-last-of-type(n)倒数 div:first-of-type div:last-of-type**

**　　　　　　　　　　 div:empty空值 div:only-child唯一子元素 div:only-of-type唯一类型子元素 :not否定**

**　　 4，伪元素： div::before div::after div::selection div::first-line div::first-letter （我们的对象不是冒号前面的标签，而是冒号前面标签里面的内容。不真正的HTML标签）**

**　　权重：\*0 > 标签，伪类1 > 类，选择器10 > id100 > 行内1000 此外还有一个：就近原则。**

![967490-20190415225011004-1363640532.png][]

![967490-20190415225045100-771385300.png][]

=================================

div.part1+.part4\{background:\#00f;\} 只匹配.part1下面的第一个兄弟元素，且这个兄弟元素必须有.part4，否则其他的都不匹配。

<div class="**part1**">111</div>  
<div class="**part4**">111</div> 匹配  
<div class="part1123141 **part4**">111</div> 不匹配

**相邻兄弟选择器，选中的是和它同一个父元素，并且要相邻的元素，而且是它下面的那个相邻的元素（一个元素）。**

![967490-20190415225054559-852031763.png][]

\------------------------------

**.one~.two\{background:\#00f\} 只匹配.one下面含有.two的所有元素，.one上面的不匹配。**

<div class="**two**">不匹配

<div class="**two** three"> 匹配

<div class="three four > 不匹配

<div class="**two** five> 匹配

通用兄弟选择器，选中的是和它**同一个父元素**，而且是指定的它下面所有兄弟元素

![967490-20190415225102614-1868308147.png][]

![967490-20190415225109549-982109676.png][]

![967490-20190417203332315-511205262.png][]

![967490-20190415225117322-1336271790.png][]

**div\[class="part1"\]\{background: \#00f; \} 全等，只匹配class="part1" 其他都不匹配**

<div class="part1">111</div> 匹配

<div class="part1 part4">111</div> 不匹配

![967490-20190415225124456-264231663.png][]

\------------------------------

**div\[class~="part1"\]\{ background: \#00f; \} class的值一定是一个列表，其中含有单词part1才匹配，否则不匹配。**

<div class="**part1**"> 匹配

<div class=" two **part1** three fore"> 匹配

<div class="**ad-part1123141** two three **part1123141**"> 不匹配

Element\[attribute~=value\] 选择器用于选取属性值中包含**指定词汇的元素(一定是一个单独的单词)**，只要是指定的属性，并且属性值列表中包含value，而不是在某个值中以value开头或结尾。

***此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词***

![967490-20190415225132220-45396882.png][]

\------------------------------------

Element\[attribute^="value"\]匹配指定属性的指定value值开头的元素，如果class中有多个value值，第一个值中的第一个字母不是指定的值，即使后面的属性中首字母是指定的值，那么也不能匹配上

div\[class^="s"\]\{ background:red; \}

<div class="one stwo"> 一行字</div> 第一个值的首字母是"o"，即使后面的值stwo的首字母是“s”，那么也匹配不上。

E\[attr^="value"\]：指定了属性名，并且有属性值，属性值是以value开头的

如下例子：

**div\[class^=“part”\]**

class="**part** two aside" 匹配

class="**part123423**" 匹配

其他都不匹配。

![967490-20190415225139558-285966282.png][]

\------------------------可以和上面的attribute^="value"合起来记忆------------------------

**div\[class$="part1"\]**

class=" two three **part1**" 匹配

class=" two three **four\_part1**" 匹配

其他都不匹配

![967490-20190415225146576-974449164.png][]

============================

**div\[class\*="part1"\] 只要含有part1都匹配，**

class=" two three **part1**" 匹配

class=" two three **part111111**" 匹配

class=" **part1-four** three two" 匹配

class="two **part1-four** three" 匹配

其他都不配！！！

Elemrnt\[attribute\*="value"\]匹配的是指定属性、并且属性值中包含value的都可以匹配到，**只要有就都匹配**，不管是否是单词。

![967490-20190415225154000-760484543.png][]

\--------------------------------------

**div\[class|="part1"\] 值为part1, 和 以part1- 的匹配**

class="**part1**" 匹配 有其他值就不匹配 如：class="part1 one" 不匹配。

class="**part1-**part9 two three fore\_" 匹配

其他不匹配。

Elemrnt\[attribute|=”value”\]匹配的是指定的属性，并且属性值是**以“value-“开头的元素**，或者值**就是value**。

![967490-20190417204315971-2000829652.png][]

![967490-20190415225210005-775402164.png][]

![967490-20190415225217119-1822373900.png][]

**:link :visited :hover :active 在超链接中最常使用。**

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>属性选择器</title>  
<style type="text/css">  
input\{  
width: 300px;  
height: 60px;  
border: 2px solid \#333;  
\}  
input:hover\{  
border: 2px solid red;  
\}  
input.one:**focus**\{  
background: orange;  
\}  
input.two:**focus**\{  
background: yellow;  
\}  
</style>  
</head>  
<body>  
用户名：<input type="text" class="one"><br/><br/>  
密码：<input type="password" class="two">  
</body>  
</html>  
========================================

**user interface 用户界面的状态伪类**

![967490-20190415225224938-10111636.png][]

**:checked** 选择器匹配每个已被选中的 input 元素、只用于单选按钮和复选框，目前主流的浏览器都能兼容。

\----------------

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>属性选择器</title>  
<style type="text/css">  
input\{  **/\*这里默认可以写为：input:enabled\{...\} ,所以先设定好宽高，再禁用 \*/**  
width: 300px;  
height: 60px;  
\}  
.one**:enabled**\{ /\*默认可用的输入框是可以设置宽高的\*/  
background: orange;  
\}  
.two**:**disabled\{  **/\*默认禁用的输入框是不可以设置宽高的，但是可以在先前设定好宽高，再禁用\*/**  
background: yellow;  
\}  
.three**:**disabled\{  /\*默认禁用的输入框是不可以设置宽高的**，但是可以在先前设定好宽高，再禁用**\*/  
background: black;  
\}  
</style>  
</head>  
<body>  
用户名：<input type="text" class="one"><br/><br/>  
用户名：<input type="text" class="two" disabled="disabled" value="不可以输入"><br/><br/>  
用户名：<input type="text" class="three" disabled="disabled" value="不可以输入"><br/><br/>  
密码：<input type="password" class="four">  
</body>  
</html>  
============================

================================================**注意**==========================================

**以下所有CSS3的选择器全部都是要相对于每个父元素而言的，**

**一定记得找每个父元素，每个父元素。**

![967490-20190415225234063-722441503.png][]

![967490-20190415225240609-1218596043.png][]

**解释：**

**div:first-child\{...\} 所有父元素中，第一个子元素是div，则匹配。如果第一个子元素不是div就不匹配。和 last-child刚刚好相反：**

**div:last-child\{...\}  所有父元素中，最后一个元素是div，则匹配，如果最后一个元素不是div就不匹配。**

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>属性选择器</title>  
<style type="text/css">  
div:first-child\{ /\*所有第一个div子元素进行改变\*/  
background: \#f00;  
border: 1px solid \#000;  
\}  
</style>  
</head>  
<body>  
<div>****  
<div>1</div>****  
<div>2</div>  
<div>3</div>  
</div>  
<div>  
<div>4</div>****  
<div>5</div>  
<div>6</div>  
</div>  
<div>  
<div>7</div>****  
<div>8</div>  
<div>9</div>  
</div>  
</body>  
</html>  
显示：

![967490-20190417214050821-1597982652.png][]

一般都会指定特定范围内的第一个div如下：

.header > container > content > div:first-child\{....\}

=============================

**解释：**

**div:first-child\{...\} 所有父元素中，第一个子元素是div。如果第一个子元素不是div就不匹配。和 last-child刚刚好相反：**

**div:last-child\{...\}  所有父元素中，最后一个元素是div，如果最后一个元素不是div就不匹配。**

![967490-20190415225247074-1600355735.png][]

\--------------

**div:nth-child(3)\{...\} ：  
说白了就是第（3）n个子元素是不是div，是就匹配，不是就不匹配。**

**div:nth-child(3)\{...\} 所有父元素的第三个子元素是div（前面的两个子元素不论类型，只要第三个子元素是div类型就匹配），才匹配。如果第三个子元素不是div ，那么不匹配。**

**这里是从第一个开始计算1.**

一般都会指定具体路径，不然很难控制。如：

**.header > .nav > div:nth-child(3)\{...\}**

![967490-20190415225252984-2011136347.png][]

![967490-20190415225300155-655889524.png][]

**odd number 奇数 even number 偶数**

**2n even 偶数, 2n+1=1 odd 奇数, 3n-1 , 3n+1 , 4n-1 , 4n+1...等等，这里的n是从0开始的。**

**--------------**

**div:nth-last-child(3)\{...\} ：  
说白了就是倒数第（3）n个子元素是不是div，是就匹配，不是就不匹配。**

![967490-20190415225307783-868138768.png][]

**div:nth-last-child(3)\{...\} 所有父元素的倒数第三个子元素是div（前面的两个子元素不论类型，只要第三个子元素是div类型就匹配），才匹配。如果倒数第三个子元素不是div ，那么不匹配。**

**这里是从最后一个开始计算。**

一般都会指定具体路径，不然很难控制。如：

**.header > .nav > div:nth-last-child(3)\{...\}**

\------------------

**div:nth-of-type(3)\{ background: red;\}**

**匹配：第三个div类型。**

![967490-20190415225314398-2075116888.png][]

div:nth-of-type(3)\{ background: red;\} 匹配所有**父元素下面****的第三个**div**（不是第三个子元素是不是div，而是所有div中的第三个div）**。如果有第三个div则匹配第三个，如果没有则不匹配。相反：

div:nth-last-of-type(3)\{ background: red;\} 匹配所有**父元素下面****的倒数第三个div（不是第三个子元素是不是div，而是所有div中的第三个div）**。如果有倒数第三个div则匹配倒数第三个，如果没有则不匹配。

====================

**div:nth-last-of-type(3)\{ background: red;\}**

**匹配：倒数第三个div类型。**

![967490-20190415225320632-1038323952.png][]

相反， div:nth-of-type(3)\{ background: red;\} 匹配所有**父元素下面****的第三个**div**（不是第三个子元素是不是div，而是所有div中的第三个div）**。如果有第三个div则匹配第三个，如果没有则不匹配。

==================

![967490-20190415225326831-145603565.png][]

first-of-type\{ background: red;\} 匹配所有**父元素下面****的第一个div（不是第一个子元素是不是div，而是所有div中的第一个div）**。如果有一个div则匹配第一个，如果没有div则不匹配。

这里的div不一定是要排在父元素下面的第一个子元素，只要存在该类型，且是第一个div就可以了，

\-----------------------

![967490-20190415225333327-1770973612.png][]

last-of-type\{ background: red;\} 匹配所有**父元素下面****的倒数第一个div（不是倒数第一个子元素是不是div，而是所有div中的倒数第一个div）**。如果有**倒数**第一个div则匹配**倒数**第一个，如果没有div则不匹配。

这里的div不一定是要排在父元素下面的**倒数**第一个子元素，只要存在该类型，且是**倒数**第一个div就可以了，

\---------------------------------

![967490-20190415225339889-1786680145.png][]

div:only-child\{ ... \} 如果父元素下面**有且只有**一个div子元素，则匹配。如果有两个子元素，不匹配。存在唯一子元素，但不是div元素，则不匹配。

\--------------------------------------------

![967490-20190415225346404-1956837761.png][]

div:only-child\{ ... \} 不管父元素下面有多少子元素，只要存在div元素是唯一的一个div就匹配。如果存在两个div则不匹配。

\------------------------------

![967490-20190415225355025-191971747.png][]

\--------------------

a:not(last-of-type)\{....\} 最后一个a标签不匹配。

a:not(first-of-type)\{....\} 第一个a标签不匹配。

a:not(nth-child(3))\{....\} 第三个a标签不匹配。

![967490-20190415225402864-1713184467.png][]

**div:not(\[class="one"\]):not(.two):not(.four)\{color: red;\} 除了.one .two .four 的div进行匹配**

**div:not(p)\{font-size: 50px;\} 除了p的div进行匹配**

**p:not(\[name="one"\]):not(\[name="three"\])\{background: \#ff0;\} 除了name="one" name="three"的p进行匹配。**

**`:not(table) a` 将依旧会应用在table内部的[`<a>`][a] 上, 因为 [`<tr>`][tr]将会被 `:not()`这部分选择器匹配。**

**:not(\[class="container"\]) > span\{font-size: 50px\} 除了.container > span ，其他span都匹配。**

**not(section) span\{。。。\} 这样写所有的span都会匹配，所以错误。**

**:not(ul) li a \{color: red;\} 匹配所有 li 下面的子元素 a 标签。**

**:not(ul)>li>a \{color: red;\} 除了ul>li>a 其他a标签都匹配。注意。。。。**

================================

![967490-20190418130939907-38485230.png][]

![967490-20190418131324337-882250354.png][]

![967490-20190418131418898-727624055.png][]

========================================================

之所以叫**伪元素**，那是因为在开发者工具中是找不到被控制的元素对象（因为在伪元素中**被控制的只是元素的内容**，而不是元素对象。），只能在浏览器中看到效果。

而**元素选择器**则不一样，它是可在开发者工具中找到被控制的元素对象。（元素选择器中，**被控制的是整个元素对象**）

**总共有五个伪元素：**

**Element::first-line 控制块级元素的第一行。**

**Element::first-letter 控制块级元素的第个字母/汉子。**

**Element::before 在指定元素的内容之前添加内容，是该元素的第一个子元素。**

**Element::after 在指定元素的内容之后添加内容，是该元素的最后一个子元素。**

![967490-20190418131616004-201658907.png][]

’

![967490-20190415225414213-1417572922.png][]

![967490-20190415225423882-1647478600.png][]

\-------------------------------------------------------

![967490-20190415225430146-511816492.png][]

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>伪元素</title>  
 **<style type="text/css">**  
 **div::before\{**   
 **content: "我爱你你爱我吗？";**  
 **font-size: 20px;**  
 **color: red;**  
 **display: block;**  
 **background: \#abcdef;**  
 **\}**  
 **</style>**  
</head>  
<body>  
 **<div>伪元素</div>**  
</body>  
</html>

**::before 伪元素：**

1，第一个子元素。

2，默认是行级元素，可以进行所有的CSS样式设置

3，内容是通过content属性来添加的。

4，在开发者工具中是找不到对应的标签的。

5，在页面显示中内容是无法被选中的。

显示如下：

![967490-20190418133310613-44090638.png][]

![967490-20190418133250151-1938555031.png][]

![967490-20190415225437693-1840253533.png][]

![967490-20190415225444601-2014733602.png][]

div::selection\{  
color: red;  
background: \#ff0;  
\}

使用鼠标选中时，改变其CSS样式，如下显示：

![967490-20190418140537028-634840002.png][]

=====================================

![967490-20190415225450854-812312364.png][]

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10713962.html

[967490-20190415225011004-1363640532.png]: /images/20211220/c2e5479e8e0e416a8c4d278aee1788c7.png
[967490-20190415225045100-771385300.png]: /images/20211220/97217009ffea4959b4bfadef74bf414e.png
[967490-20190415225054559-852031763.png]: /images/20211220/dbc9c2b0b24144638751b8fc68a79096.png
[967490-20190415225102614-1868308147.png]: /images/20211220/2f9b60cb3628422fb54ef94a1272218b.png
[967490-20190415225109549-982109676.png]: /images/20211220/8202c64341d54bb38c76827ec2657b91.png
[967490-20190417203332315-511205262.png]: /images/20211220/1f37f89e44a84110a2feff6a32017d4e.png
[967490-20190415225117322-1336271790.png]: /images/20211220/fdc7ba0f1fdc4469b480a3dab86fa71c.png
[967490-20190415225124456-264231663.png]: /images/20211220/71d2b65dfae8418abb0be326c64fdad0.png
[967490-20190415225132220-45396882.png]: /images/20211220/6edb2bae10e243e58ac68f7c91551d37.png
[967490-20190415225139558-285966282.png]: /images/20211220/3145260612e441fba033f3cdff7c3706.png
[967490-20190415225146576-974449164.png]: /images/20211220/2fc32f464316431da669b11663820e22.png
[967490-20190415225154000-760484543.png]: /images/20211220/6265fe7a30b64bc4a2f8b3d875a9e508.png
[967490-20190417204315971-2000829652.png]: /images/20211220/739c3f559ef9412b935259687d4d43da.png
[967490-20190415225210005-775402164.png]: /images/20211220/66c8470339ce4ba48674b145511c6fce.png
[967490-20190415225217119-1822373900.png]: /images/20211220/532e9d4fdccc4379b9795e6cb914511e.png
[967490-20190415225224938-10111636.png]: /images/20211220/b229948290744600af05a5b3c61d786c.png
[967490-20190415225234063-722441503.png]: /images/20211220/8995464bdcfb43de9d171e6c9a5ccf97.png
[967490-20190415225240609-1218596043.png]: /images/20211220/49bdb93c343e445aa2612d33c8a2c1b2.png
[967490-20190417214050821-1597982652.png]: /images/20211220/e645dc71dd0f4297899a9d8255ad335c.png
[967490-20190415225247074-1600355735.png]: /images/20211220/da62a3719d784d7da565039db28ec304.png
[967490-20190415225252984-2011136347.png]: /images/20211220/388ed6777ed047c3bfc0cce56be22c09.png
[967490-20190415225300155-655889524.png]: /images/20211220/5094638152534f9498c08dd25f9441aa.png
[967490-20190415225307783-868138768.png]: /images/20211220/dc08216270874e129f0acd9742d4586b.png
[967490-20190415225314398-2075116888.png]: /images/20211220/477bf46a520148559ba51bf745412e8d.png
[967490-20190415225320632-1038323952.png]: /images/20211220/486c75ecfc8e4bdfa8302f72c7cbd576.png
[967490-20190415225326831-145603565.png]: /images/20211220/bc592faf5ad44aa1a0327c719b1614fa.png
[967490-20190415225333327-1770973612.png]: /images/20211220/7a2360910dd842f9b305fe778bf25766.png
[967490-20190415225339889-1786680145.png]: /images/20211220/4d502816d7a64624866b87aa8e8a8afb.png
[967490-20190415225346404-1956837761.png]: /images/20211220/7265bb85c9b54dfab4e0c38be596720a.png
[967490-20190415225355025-191971747.png]: /images/20211220/84d8eb41c8a642ec82683940d54542e3.png
[967490-20190415225402864-1713184467.png]: /images/20211220/12be5ee402c34973929eda58c4d4722c.png
[a]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
[tr]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr
[967490-20190418130939907-38485230.png]: /images/20211220/1a7586b0fabc40f49e6c38588ca74d87.png
[967490-20190418131324337-882250354.png]: /images/20211220/7777f92a52a2412bbf1e86e3c71bc9a8.png
[967490-20190418131418898-727624055.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190418131418898-727624055.png
[967490-20190418131616004-201658907.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190418131616004-201658907.png
[967490-20190415225414213-1417572922.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190415225414213-1417572922.png
[967490-20190415225423882-1647478600.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190415225423882-1647478600.png
[967490-20190415225430146-511816492.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190415225430146-511816492.png
[967490-20190418133310613-44090638.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190418133310613-44090638.png
[967490-20190418133250151-1938555031.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190418133250151-1938555031.png
[967490-20190415225437693-1840253533.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190415225437693-1840253533.png
[967490-20190415225444601-2014733602.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190415225444601-2014733602.png
[967490-20190418140537028-634840002.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190418140537028-634840002.png
[967490-20190415225450854-812312364.png]: https://img2018.cnblogs.com/blog/967490/201904/967490-20190415225450854-812312364.png