CSS选择器

选择器的用处就是告知浏览器,我这一大堆的样式要用在哪些元素

选择器很重要,学好了,可以减少很多CSS代码,不用像以前一样,一大堆类选择器。

以下为了方便查看CSS代码,我采用内联样式的方法,但在实际开发中,建议用外联样式,这有利于页面的性能优化。

id选择器

id选择器,要在标签添加id属性和其值,css根据id来赋予元素样式。

在一个网页文件中,id名不能重复,如下代码有个id="div",就不能再来一个id="div"了,但可以是其他的值,Id名就像身份证一样,每个只有一个,并且不能重复。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*  这个是CSS的注释写法 是多行注释  */
            /*id选择器的写法  #id名   id的值也就是id名*/
            #div{
                color: red;
            }
             #div2{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div id="div">
            红色
        </div>
        <div id="div2">
            蓝色
        </div>
    </body>
</html>

类选择器

这个是利用html元素的class属性,一个元素只能有一个class属性,但class属性可以有多个值,而且在一个html文件中,类名是可以重复,它就像衣服一样,给一些元素穿上同样的衣服。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*  */
            /*类选择器的写法  .类名   class的值就是类名*/
            .bg{
                background: red;
            }
            
        </style>
    </head>
    <body>
        <div class="bg">
            背景为红色
        </div>
        <p class="bg">
            背景为红色
        </p>
    </body>
</html>

如果一个元素有多个类要怎么写?

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            .bg{
                background: pink;
            }
            .font{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="bg font">
            背景为粉色,字体为蓝
        </div>
        <p class="bg">
            背景为粉色
        </p>
    </body>
</html>

类名与id名的合法值

就像编程语言的变量有合法的标识符一样,这里的id和class也有合法的值

id名和类名的值由,英文大小写字母和数字,还有下划线 _ ,以及中划线 - 组成,开头不能是数字

为了见名之意,建议采用驼峰标识,或以下划线或中划线来分割单词

比如class="bg-color"

因为最常用的就是类选择器,所以也拥有一些命名规范,比如BEM,其实这玩意我也不太了解啊,因为我也没有注意这种命名的问题,特别是学了vue的组件化开发后。

但是就针对一开始学的话,CSS一大堆类名,要管理起来确实不容易,有时候出bug找个类名都难找,而且类名一多,就开始乱起了,就很麻烦,我以前用的好像是OOCSS的那一套,不过OOCSS需要对CSS样式有个比较全面的了解,所以,后面再说。

快捷方式:在sublime_text这个编辑器有个关于id和类选择器的快捷方式

div#name按下tab键会变成<div id="name"></div>

div.div按下tab键会变成<div class="div"></div>

标签选择器

这个就是利用标签名了,被指定的所有标签都会有相同的样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*直接写上标签名 */
            div{
                background: pink;
                color: blue;
            }
            p{
                background: green;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            div背景为粉色,字体为蓝
        </div>
        <div>
            div背景为粉色,字体为蓝
        </div>
        <p>
            p背景为绿色,字体粉色
        </p>
        <p>
            p背景为绿色,字体粉色
        </p>
    </body>
</html>

群组选择器

多个选择器的组合,只要是在这个组的都有同样的样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            div,ul,p{
                background: pink;
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            div背景为粉色,字体为蓝
        </div>
        <div>
            div背景为粉色,字体为蓝
        </div>
        <p>
            p背景为粉色,字体为蓝
        </p>
        <p>
            p背景为粉色,字体为蓝
        </p>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </body>
</html>

看到这可能会有疑惑,会什么明明没有指定li标签的字体颜色,为何它也变色了,这就是CSS属性的继承了,比如字体颜色是可以继承的,老爹有什么颜色,儿子就是什么颜色的,除非儿子重新定义自己的颜色。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            div,ul,p{
                background: pink;
                color: blue;
            }
            /*加上这个代码*/
            li{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            div背景为粉色,字体为蓝
        </div>
        <div>
            div背景为粉色,字体为蓝
        </div>
        <p>
            p背景为粉色,字体为蓝
        </p>
        <p>
            p背景为粉色,字体为蓝
        </p>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </body>
</html>

既然字体颜色可以继承,那么其实要让所有的字体颜色一样,其实只要在body上设置就行了。

后代选择器

下面这CSS代码的意思是,我这个叫bg的类名,它的后代,不管是儿子还是孙子,还什么,只要它叫p,都用这个样式。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*选择器 选择器      中间是空格*/
            .bg p{
                background: pink;
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="bg">
            <p>背景为粉色,字体为蓝</p>
            <div>
                <p>背景为粉色,字体为蓝</p>
                <p>背景为粉色,字体为蓝</p>
            </div>
            <p>背景为粉色,字体为蓝</p>
        </div>
    </body>
</html>

后代选择器并不是只能弄两级,可以有很多层级

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            .bg p span{
                background: pink;
                color: blue;
            }
            
        </style>
    </head>
    <body>
        <div class="bg">
            <p>背景为粉色,字体为蓝</p>
            <div>
                <p>背景为粉色,字体为蓝 <span>p里面的span</span></p>
                <p>背景为粉色,字体为蓝 <span>p里面的span</span></p>
            </div>
            <p>背景为粉色,字体为蓝</p>
            <span>span</span>
        </div>
    </body>
</html>

上面这段代码,就是类名bg中的p里面的span套用这个样式

子选择器

它和后代选择器不同,它就是选择它儿子的,至于后代不关它的事

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            .bg > p {
                background: pink;
                color: blue;
            }
            
        </style>
    </head>
    <body>
        <div class="bg">
            <p>背景为粉色,字体为蓝</p>
            <div>
                <p>背景为粉色,字体为蓝 
                <p>背景为粉色,字体为蓝
            </div>
            <p>背景为粉色,字体为蓝</p>
        </div>
    </body>
</html>

中间两行并没有相应的样式,因为它们不是类名bg的儿子,它们是孙子。

但可以这样

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*将.bg 改成 div*/
            div > p {
                background: pink;
                color: blue;
            }
            
        </style>
    </head>
    <body>
        <div class="bg">
            <p>背景为粉色,字体为蓝</p>
            <div>
                <p>背景为粉色,字体为蓝 
                <p>背景为粉色,字体为蓝
            </div>
            <p>背景为粉色,字体为蓝</p>
        </div>
    </body>
</html>

这样就是div标签的儿子们,名为p的标签就用这些样式,所以全部都有样式了。

兄弟选择器

这个只能选择某个选择器的第一个弟弟元素

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            .bg + p{
                background: pink;
                color: blue;
            }
            
        </style>
    </head>
    <body>
        <p>我是类名bg的哥哥</p>
        <p>我是类名bg的哥哥</p>
        <div class="bg">
            我是类名bg
        </div>
        <p>我是类名bg的第一个弟弟</p>
        <p>我是类名bg的第二个弟弟</p>
    </body>
</html>

那把.bg + p换成这样 .bg + p + p会是什么结果

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            .bg + p + p{
                background: pink;
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>我是类名bg的哥哥</p>
        <p>我是类名bg的哥哥</p>
        <div class="bg">
            我是类名bg
        </div>
        <p>我是类名bg的第一个弟弟</p>
        <p>我是类名bg的第二个弟弟</p>
        <p>我是类名bg的第三个弟弟</p>
    </body>
</html>

这样子就是选择类名bg的一个弟弟的一个弟弟了

弟弟选择器

这个是自己命名的,它选择某元素的所有弟弟,不再是第一个弟弟了

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            div~p{
                background: pink;
                color: red;
            }
        </style>
    </head>
    <body>
        <div>div</div>
        <p>p</p>
        <p>p</p>
        <p>p</p>
        <p>p</p>
        <p>p</p>
    </body>
</html>

属性选择器

第一种

只要标签上有某个指定属性的就用这些样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*写法: 
            选择器[属性名] 不一定要标签名[属性名]  可以是 类名[属性名]
            当然前面这个选择器也是可以省略的,不过那样就只要我的标签有这个属性就用这些样式
            前面这个选择器就是限定了,我a标签里面的有这个target属性时运用样式
            */
            a[target]{
                background: pink;
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="#" >标签1</a>
        <a href="#" target="_blank">标签2</a>
        <a href="#" target="_top">标签3</a>
    </body>
</html>

第二种

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*写法: 选择器[属性=值]*/
            a[target=_blank]{
                background: pink;
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="#" >标签1</a>
        <a href="#" target="_blank">标签2</a>
        <a href="#" target="_top">标签3</a>
    </body>
</html>

第三种

只要我这个属性的值有我指定的字段,就套用这些样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            a[title~=this]{
                background: pink;
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="#" title="this that">标签1</a>
        <a href="#" title="as this that">标签2</a>
        <a href="#" title="b that">标签3</a>
        <a href="#" title="this1">标签4</a>
    </body>
</html>

再来看另一个

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*如果把a去掉,下面的div就可以有这样式,如果不去掉,div就无法用这样式*/
            [title~=this]{
                background: pink;
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="#" title="this that">标签1</a>
        <a href="#" title="as this that">标签2</a>
        <a href="#" title="b that">标签3</a>
        <a href="#" title="this1">标签4</a>
        <div title="this">div</div>
    </body>
</html>

第四种

选择属性值以某个字段开头的元素

这里稍微有点问题,这个值必须是单词的形式,如果是句子是不行的

title="this-is"这种是可行的

title="this"`这种也是可行的

title="this1s" 这是不行的

title="this 1s"` 这也是不行的

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            [title|=this]{
                background: pink;
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="#" title="this1s">标签1</a>
        <a href="#" title="this-is-sb">标签2</a>
        <a href="#" title="that-is-250 ss">标签3</a>
        <a href="#" title="this is">标签4</a>
        <a href="#" title="this">标签5</a>
    </body>
</html>

第五种

通过正则来匹配值的选择器

  • [属性^=值] [href^="https"] 值以https开头的
  • [属性$=值] [href$="com"] 值以com结尾的
  • [属性*=值] [href*="baidu"] 值baidu这个字符串
<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            [href^=https]{
                background: pink;
                color: red;
            }
            [href$=cn]{
                background: #444;
                color: yellow;
            }
            [href*=baidu]{
                background: #444;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
        <a href="https://www.852.com" >标签1</a>
        <a href="https://www.456.com" >标签2</a>
        <a href="http://www.baidu.cn1" >标签3</a>
        <a href="http://www.123.cn" >标签4</a>
        <a href="http://www.123.cn" >标签5</a>
    </body>
</html>

伪元素选择器

为什么叫伪元素选择器,这种命名的概念问题不要纠结,主要我也不清楚啊,还是看都有哪些作用吧

first-line、first-letter、before和after

first-line 设置文本中第一行的样式

first-letter设置文本中第一个字的样式

before在某个元素前插入内容

after在某个元素后插入内容

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*伪元素选择器, ::first-line  这是两个冒号,但经过测试,一个冒号也是有效的*/
            .p1:first-line{
                color: red;
            }
            .p2:first-letter{
                font-size: 24px;
            }
            .p3:before{
                content: "※"
            }
            .p4:after{
                content: "__hellow world"
            }
        </style>
    </head>
    <body>
        <p class="p1">文本中的第一行 <br> 文本中的第二行 </p>

        <p class="p2">天生我才必有用</p>

        <p class="p3">在前面插入内容</p>

        <p class="p4">在后面插入内容</p>
    </body>
</html>

root、not、empty和target选择器

root选择器绑定页面的根元素,也就是html元素

一般可以在这设置一些全局的样式,比如重新设置字体的默认颜色,大小,字体样式,比如楷体,宋体之类的

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            :root{
                background: green;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>

not选择器,用于排除哪个元素不使用该样式,写法为 选择器 *:not(排除的选择)

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            div *:not(h1){
                background: green

            }

        </style>
    </head>
    <body>
        <div>
            <h1>h1</h1>
            <p>文本</p>
        </div>
        
    </body>
</html>
<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            div *:not(.p){
                color: red;

            }

        </style>
    </head>
    <body>
        <div>
            <h1>h1</h1>
            <p>文本</p>
            <p>文本</p>
            <p class="p">文本</p>
        </div>
        
    </body>
</html>

empty选择器 当元素内容为空时使用该样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            :empty{
                background: red;

            }
            div{
                width: 50px;
                height: 50px;

            }
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
        <div></div>
        <p></p>
    </body>
</html>

在这里是给div设置了高度和宽度,因为第一个div它有内容,p标签,所以没有改变颜色,但第二个div因为没有内容,所以符合empty选择器,所以改变了颜色,至于p标签页没有内容,但却也没有改变颜色,那是因为p的高度为0,改变颜色也看不出来,可以给p设置高度,这样就会看到效果了。

target选择器,用于a标签的锚点功能,跳到对应内容,那内容会获得相应的样式,点击a标签,可看到效果。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            :target{
                background: yellow;
            }
        </style>
    </head>
    <body>
        <p id="menu">
            <a href="#text1">文字1</a>
            <a href="#text2">文字2</a>
            <a href="#text3">文字3</a>
            <a href="#text4">文字4</a>
            <a href="#text5">文字5</a>
        </p>
        <div id="text1">
            <h2>文字1</h2>
            <p>内容1</p>
        </div>
        <div id="text2">
            <h2>文字2</h2>
            <p>内容2</p>
        </div>
        <div id="text3">
            <h2>文字3</h2>
            <p>内容3</p>
        </div>
        <div id="text4">
            <h2>文字4</h2>
            <p>内容4</p>
        </div>
        <div id="text5">
            <h2>文字5</h2>
            <p>内容5</p>
        </div>
    </body>
</html>

first-child、last-child、nth-child、nth-last-child

  • first-child 单独指定第一个子元素
  • last-child 单独指定最后一个子元素
<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /*注意是 li 不是 ul */
            li:first-child{
                background: yellow;
            }
            li:last-child{
                background: green;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
            <li>项目5</li>
        </ul>
    </body>
</html>

nth-child不仅可以指定父元素中的第一个子元素和最后一个元素,还可以根据序号指定元素

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /* li:nth-child(0) 是 无效的 */
            li:nth-child(1){
                background: yellow;
            }
            li:nth-child(2){
                background: red;
            }
            li:nth-child(3){
                background: blue;
            }
            li:nth-child(4){
                background: green;
            }
            li:nth-child(5){
                background: pink;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
            <li>项目5</li>
        </ul>
    </body>
</html>

不仅可以指定序号还可以指定奇偶

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            table{
                width: 80%;
                height: 300px;
                margin: 0 auto;
                text-align: center;
            }

            /*odd 是指 奇数*/
            tr:nth-child(odd){
                background: pink;
            }
            /*even 是指 偶数*/
            tr:nth-child(even){
                background: brown;
            }
            tr:first-child{
                background: #fff;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>单元格1</th>
                <th>单元格2</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

那么问题来了,为什么第一行没有被改变颜色

<tr>
    <th>单元格1</th>
    <th>单元格2</th>
</tr>

因为被最后的样式给覆盖了

 tr:first-child{
     background: #fff;
}

原先是表格中tr是奇数时改为背景粉色,后来因这段代码,又变成了白色。

nth-last-childnth-child用法一样,只不过是从后面数起。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            li:nth-last-child(1){
                background: yellow;
            }
            li:nth-last-child(2){
                background: red;
            }
            li:nth-last-child(3){
                background: blue;
            }
            li:nth-last-child(4){
                background: green;
            }
            li:nth-last-child(5){
                background: pink;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
            <li>项目5</li>
        </ul>
    </body>
</html>

不过nth-child会引发一个很重要的问题

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            h2:nth-child(odd){
                background: yellow;
            }
            h2:nth-child(even){
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>文章标题1</h2>
            <p>内容1</p>
            <h2>文章标题2</h2>
            <p>内容2</p>
            <h2>文章标题3</h2>
            <p>内容3</p>
            <h2>文章标题4</h2>
            <p>内容4</p>
            <h2>文章标题5</h2>
            <p>内容5</p>
            <h2>文章标题6</h2>
            <p>内容6</p>
            <h2>文章标题7</h2>
            <p>内容7</p>
            <h2>文章标题8</h2>
            <p>内容8</p>
            <h2>文章标题9</h2>
            <p>内容9</p>
            <h2>文章标题10</h2>
            <p>内容10</p>
        </div>
    </body>
</html>

这里的h2的背景颜色都是黄色,我们原先设想的是奇数的h2是黄色,偶数的是浅蓝色,为何会出现这种情况

那是因为nth-child在计算奇偶时,是将父元素下所有的元素一起算的,它的语义并不是div元素中第奇数个h2元素,而是在div元素中的第奇数个子元素如果是h2元素就用这些样式,因此上面的h2元素因为p元素的关系,永远都处于奇数的位置。

那么有没有解决的办法,是有的

nth-of-type和nth-last-of-type

这两个前者是从前往后数,后者是从后往前数,所以我只写第一个,它们用法是一样的

上面那代码,只要改成这个nth-of-type选择器就行了,它的意思就是div元素中第奇数个h2元素

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            h2:nth-of-type(odd){
                background: yellow;
            }
            h2:nth-of-type(even){
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>文章标题1</h2>
            <p>内容1</p>
            <h2>文章标题2</h2>
            <p>内容2</p>
            <h2>文章标题3</h2>
            <p>内容3</p>
            <h2>文章标题4</h2>
            <p>内容4</p>
            <h2>文章标题5</h2>
            <p>内容5</p>
            <h2>文章标题6</h2>
            <p>内容6</p>
            <h2>文章标题7</h2>
            <p>内容7</p>
            <h2>文章标题8</h2>
            <p>内容8</p>
            <h2>文章标题9</h2>
            <p>内容9</p>
            <h2>文章标题10</h2>
            <p>内容10</p>
        </div>
    </body>
</html>

nth的循环使用

nth-child、nth-last-child、nth-of-type、nth-last-of-type都可以使用循环样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /* n 会从0开始循环相加  4n+1 也就是 第一个,第五个,第九个,第十三个,如此类推,符合的都会用到相应的颜色*/
            li:nth-child(4n+1){
                background: red;
            }
            li:nth-child(4n+2){
                background: green;
            }
            li:nth-child(4n+3){
                background: yellow;
            }
            li:nth-child(4n+4){
                background: blue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
        </ul>
    </body>
</html>

only-child

当父元素有且只有一个子元素时使用

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            p:only-child{
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>p1</p>
        </div>
        <div>
            <p>p1</p>
            <p>p2</p>
        </div>
    </body>
</html>

这个相当于nth-childnth-last-child一起使用

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            p:nth-child(1):nth-last-child(1){
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>p1</p>
        </div>
        <div>
            <p>p1</p>
            <p>p2</p>
        </div>
    </body>
</html>

伪类选择器

元素处于某种状态下时会触发的选择器

E:hover、E:active、E:focus

上面的E代表着选择器的意思,比如类选择器,标签选择器,属性选择器等

E:hover 当鼠标放上去时触发该类

E:active 元素被激活,鼠标在元素上按下且不松开

E:focus 元素聚焦时

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            div:hover{
                color: red;
            }
            p:active{
                color: blue;
            }
            input:focus{
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
            鼠标放上去时变为红色
        </div>
        <p>鼠标在这里按下别松开</p>

        <input type="text" name="">
    </body>
</html>

E:enabled与E:disabled

E:enabled 当指定元素处于可用状态时

E:disabled 当指定元素处于不可用状态时

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            input:enabled{
                background: #ccc;
            }
            input:disabled{
                background: skyblue;
            }
        </style>
    </head>
    <body>
        
        <input type="text" placeholder="可用">
        <input type="text" placeholder="禁用" disabled>
    </body>
</html>

E:read-only和E:read-write

E:read-only 指定元素处于只读状态时的样式

E:read-write 指定当元素处于非只读状态时的样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            input:read-only{
                background: pink;
            }
            input:read-write{
                background: skyblue;
            }
        </style>
    </head>
    <body>
        
        <input type="text" placeholder="非只读">
        <input type="text" placeholder="只读" readonly>
    </body>
</html>

E:checked、E:default和E:indeterminate

E:checked 用来指定表单中的单选框或复选框处于选择时的状态

一般情况下,复选框在非选择状态时边框默认为黑色

E:default 用户打开网页时默认处于选取模式下的控件的样式,哪怕你手动将多选框取消选中,它依然是这个样式

E:indeterminate 当打开网页时,复选框或单选框没有选择时的样式,选择后者样式将会被取消,但是目前只有opera支持这个选择器

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            input:checked{
                outline: 1px solid pink;
            }
            input:default{
                outline: 1px solid blue;
            }
            input:indeterminate{
                outline: 1px solid red;
            }
        </style>
    </head>
    <body>
        <h2>请选择你的技能</h2>
        <div>
            <label for="jn1">矢量操控</label><input type="checkbox" id="jn1" checked> 
        </div>
        <div>
            <label for="jn2">轮回眼</label><input type="checkbox" id="jn2"> 
        </div>
        <div>
            <label for="jn3">幻想杀手</label><input type="checkbox" id="jn3"> 
        </div>
        <div>
            <label for="jn4">全属性灭龙魔导士</label><input type="checkbox" id="jn4"> 
        </div>
    </body>
</html>

E:selection

当元素被选择的时候,就是鼠标选取文字的时候,你要复制文本的时候,默认是蓝色背景,白色文字,你可以用这选择去修改它的样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            /* 注意:这是两个冒号,如果只有一个,那是没有效果的 */
            div::selection,p::selection{
                background: #000;
                color: pink;
            }

        </style>
    </head>
    <body>
        <p>p的文本</p>
        <div>div的文本</div>
    </body>
</html>

通配符 *

通配符就是指定了页面上的所有元素,也就是所有的标签

比如上面那段代码,如果确定网页上的所有文字被选取时都是那样式的时候,其实可以这样写

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            *::selection{
                background: #000;
                color: pink;
            }

        </style>
    </head>
    <body>
        <p>p的文本</p>
        <div>div的文本</div>
    </body>
</html>

E:invalid和E:valid

E:invalid 当元素不能通过HTML5自带的验证时的样式

E:valid 当元素通过HTML5自带的验证时的样式

可以先输入数字,在鼠标点击其他地方,让输入框失去焦点,会根据符不符合来选取对应的样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            
            input:invalid{
                border: 1px solid red;
            }
            input:valid{
                border: 1px solid skyblue;
            }
        </style>
    </head>
    <body>
        <input type="email" name="">
    </body>
</html>

E:required与E:optional

E:required 拥有required这个属性时的样式

E:optional 没有required这个属性时的样式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            input:required{
                background: red;
            }
            input:optional{
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <input type="text" name="" required>
        <input type="text" name="" >
    </body>
</html>

E:in-range与E:out-of-range

前者是值在范围内时的样式,后者是值在范围外,比如对于<input type="number" min="1" max="100">

如果数字在1到100之间,那就是第一个选择器的样式,如果不在这个范围就第二个选择器的样式

试下输入50和500会有什么效果

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            input:in-range{
                background: red;
            }
            input:out-of-range{
                background: skyblue;
            }
        </style>
    </head>
    <body>
        <input type="number" min="1" max="100">
    </body>
</html>

说下a标签的状态

a标签有四个状态

  • :link 链接未被点击
  • :visited 链接被点击过了
  • :hover 鼠标在链接上面
  • :active 鼠标在链接上按下并不要松开
<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            a:link{
                color: red;
            }
            a:visited{
                color: green;
            }
            a:hover{
                color: blue;
            }
            a:active{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </body>
</html>

注意:

如果你发现你点击标签后,:hover的样式失效了,请检查你的书写顺序,虽然按逻辑来看是链接未被点击,鼠标在链接上,链接激活也就是鼠标点击了的瞬间,然后就是鼠标点击后,如果按照这样子的排列方式就出现上面所说的:hover丢失样式的bug,应该像上面代码那样写,:link->:visited->:hover->:active

上一篇:标签导航栏


下一篇:6行css就可以解决的瀑布流布局的方法