CSS3选择器

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 此外还有一个：就近原则。

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

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

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

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

------------------------------

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

<div class="two">不匹配

<div class="two three"> 匹配

<div class="three four > 不匹配

<div class="two five> 匹配

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

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

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

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

------------------------------

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词

------------------------------------

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" 匹配

其他都不匹配。

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

div[class$="part1"]

class=" two three part1" 匹配

class=" two three four_part1" 匹配

其他都不匹配

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

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的都可以匹配到，只要有就都匹配，不管是否是单词。

--------------------------------------

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

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

class="part1-part9 two three fore_" 匹配

其他不匹配。

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

: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 用户界面的状态伪类

: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的选择器全部都是要相对于每个父元素而言的，

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

解释：

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>
显示：

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

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

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

解释：

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

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

--------------

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

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

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

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

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

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，是就匹配，不是就不匹配。

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

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

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

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

------------------

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

匹配：第三个div类型。

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类型。

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

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

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

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

-----------------------

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

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

---------------------------------

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

--------------------------------------------

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

------------------------------

--------------------

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

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

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

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> 上, 因为 <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标签都匹配。注意。。。。

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

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

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

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

总共有五个伪元素：

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

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

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

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

’

-------------------------------------------------------

<!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>