CSS选择器

 

1.1 基本选择器

1.1.1 id选择器

1)做用css

根据指定的id名称,在当前界面中找到对应的惟一一个的标签,而后设置属性html

 

2)格式前端

id 名称{css3

      属性:值浏览器

}ide

 

3)注意点性能

一、在企业开发中若是仅仅只是为了设置样式,一般不会使用id,在前端开发中id一般是留给js使用的学习

二、每一个标签均可以设置惟一一个id,id就至关于人/标签的身份证,所以在同一界面内id毫不能重复字体

三、引用id必定要加#url

四、id的命名只能由字符、数字、下划线组成,且不能以数字开头,更不能是html关键字如p,a,img等 

1.1.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            color: burlywood;
        }
    </style>
</head>
<body>
    <p id="p1">就是1</p>
    <p id="p2">就是2</p>
</body>
</html>
View Code

1.2 类选择器

1.2.1 做用

1)根据指定的类名称,在当前界面中找到对应的标签,而后设置属性

2)格式:

      .类名称{

           属性值:值

}

1.2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            color: yellow;
        }
    </style>
</head>
<body>
    <p class="p1">就是1</p>
    <p class="p2">就是2</p>
</body>
</html>
View Code

 

1.2.3  小练习

第一行与第三行的颜色都是红色

第一行与第二行的字体大小都是50px

第二行与第三行内容有个下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            color: red;
        }
        .p2{
            font-size: 50px;
        }
        .p3{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class="p1 p2">就是1</p>
    <p class="p2 p3">就是2</p>
    <p class="p1 p3">就是3</p>
</body>
</html>
View Code

 

1.3 标签选择器

1)做用: 根据指定的标签名称,在当前界面中找到全部该名称的标签,而后设置属性
2)格式 

标签名称 {

    属性:值;

}

 

3)注意点:

一、只要是HTML的标签都能当作标签选择器

二、标签选择器选中的是当前界面中的全部标签,而不能单独选中某一标签

三、标签选择器,不管嵌套多少层都能选中

 

1.3.1 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这什么</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>这颗心叫作七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>

 
View Code

1.4 通配符选择器

一、做用:选择全部的标签

二、格式

* {

    属性:值;

}

三、注意点

一、在企业开发中通常不会使用通配符选择器

    理由是:

    因为通配符选择器是设置界面上全部的标签的属性,

    因此在设置以前会遍历全部的标签

    若是当前界面上的标签比较多,那么性能就会比较差

1.4.1 示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>通配符选择器</title>

 

    <style type="text/css">

 

        * {

            color: red;

        }

 

    </style>

</head>

<body>

    <h1 >我是标题</h1>

    <p >我是段落</p>

    <a href="#">我是超连接</a>

</body>

</html>

 
View Code

第2章 后代选择器、子元素选择器

2.1 做用

1)做用: 找到指定标签的全部后代(儿子,孙子,重孙子、、、)标签,设置属性

2)格式:

    标签名1 xxx {

        属性:值;

}

3)注意:

一、后代选择器必须用空格隔开

二、后代不只仅是儿子,也包括孙子、重孙子

三、后代选择器不只仅可使用标签名称,还可使用其余选择器好比id或class

四、后代选择器能够经过空格一直延续下去

 

2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }


    </style>
</head>
<body>
    <div id="id1" class="part1">
        <p>我是div下的段落2</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul</p>
                <p class="ddd">我是ul</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="">点我啊2</a>
            </li>
        </ul>
    </div>

</body>
</html>

 
View Code

 

2.3 子元素选择器

2.3.1 做用

1) 做用:找到制定标签的全部特定的直接子元素,而后设置属性

2)格式:

    标签名1>标签名2 {

        属性:值;

}

3)注意:

一、子元素选择器之间须要用>符号连接,而且不能有空格

    好比div >p会找div标签的全部后代标签,标签名为">p"

二、子元素选择器只会查找儿子,不会查找其余嵌套的标签

三、子元素选择器不只能够用标签名称,还可使用其余选择器,好比id或class

四、子元素选择器能够经过>符号一直延续下去

2.3.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }


    </style>
</head>
<body>
    <div id="id1" class="part1">
        <p>我是div下的段落2</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul</p>
                <p class="ddd">我是ul</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="">点我啊2</a>
            </li>
        </ul>
    </div>

</body>
</html>

 
View Code

第3章 兄弟选择器

3.1 相邻兄弟选择器,CSS2退出

3.1.1 做用

1)、做用:给指定选择器后面紧跟的那个选择器选中的标签设置属性

 

2)、格式

选择器1+选择器2 {

    属性:值;

}

 

3.2 通用选择器,CSS3推出

3.2.1 做用

1)做用:给指定选择器后面的全部选择器中的全部标签设置属性

 

2)格式:

选择器1~选择器2 {

    属性:值;

}

 

3)注意点:

一、通用兄弟选择器必须用~来连接

二、通用兄弟选择器选中的是指选择器后面的某个选择器选中的全部标签

不管有没有被隔开,均可以被选中

3.2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1+p{
            font-size: 30px;
        }

        h1~p{
            color: red;
        }

    </style>

</head>
<body>
    <h1>我是标题1</h1>
    <a href="">有了这个标签,p就再也不是紧跟h1标签了,但通用兄弟选择器仍能选中</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是标题2</h1>
    <p>我是段落</p>
</body>
</html>
View Code

第4章 交集选择器与并集选择器

4.1 做用

#一、做用:给全部选择器选中的标签中,相交的那部分标签设置属性

 

#二、格式:

    选择器1选择器2 {

        属性:值;

    }

 

#三、注意:

一、选择器与选择器之间没有任何连接符号

二、选择器可使用标签名称、id、class

三、交集选择器在企业开发中并很少见,了解便可

   由于:p.part1 彻底能够用.part1取代

4.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        p.part1 {

            color: red;

        }

        p#p1{

            font-size: 100px;

        }

    </style>

</head>

<body>

    <p class="part1">我是段落</p>

    <p id="p1">我是段落</p>

    <p class="part1">我是段落</p>

    <p>我是段落</p>

    <p>我是段落</p>

    <p>我是段落</p>

 

</body>

</html>
View Code

 

4.3 并集选择器

4.3.1 做用

1)做用:给全部知足条件的标签设置属性

 

2)格式:

    选择器1,选择器2 {

        属性:值;

    }

 

3)注意:

一、选择器与选择器之间必须用逗号来连接

二、选择器可使用标签名称、id、class

4.3.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        .part1,h1,a {

            color: red;

        }

    </style>

</head>

<body>

    <h1>哈哈啊</h1>

    <p class="part1">我是段落</p>

    <p id="p1">我是段落</p>

    <p class="part1">我是段落</p>

    <a href="#">我是我</a>

    <p>我是段落</p>

    <p>我是段落</p>

    <p>我是段落</p>

 

</body>

</html>

 
View Code

第5章 序列选择器

5.1 做用

1)做用:

css3中新推出的选择器中,最具表明性的的9个,又称为序列选择器,过去的选择器中要选中某个必须加id或class,学习了这9个后,不用加id或class,想选中同级别的第几个就选第几个

 

2)格式

#2.1 同级别

:first-child    p:first-child    同级别的第一个

:last-child    p:last-child    同级别的最后一个

:nth-child(n)                    同级别的第n个

:nth-last-child(n)            同级别的倒数第n个

 

#2.2 同级别同类型

:first-of-type                    同级别同类型的第一个

:last-of-type                    同级别同类型的最后一个

:nth-of-type(n)                    同级别同类型的第n个

:nth-last-of-type(n)            同级别同类型的倒数第n个

 

#2.3 其余

:only-of-type                    同类型的惟一一个

:only-child                         同级别的惟一一个

5.2 同级别示例

#一、同级别的第一个

#1.1 示范一

p:first-child {

    color: red;

}

表明:同级别的第一个,而且第一个要求是一个p标签

 

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

 

这样的话第一个p和div中的第一个p都变成红色,

 

#1.2 示范二

p:first-child {

    color: red;

}

表明:同级别的第一个,而且第一个要求是一个p标签

 

<h1>w我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

 

这样的话只有div中的第一个p变红,由于在有在div内同一级别的第一个才是p

 

注意点:

    :fist-child就是第一个孩子,不区分类型

 

#二、同级别的最后一个

p:last-child {

    color: red;

}

表明:同级别的最后一个,而且最后一个要求是一个p标签

 

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

<p>我是段落7</p>

这样的话只有6跟7都变红

 

#三、同级别的第n个

p:nth-child(3) {

    color: red;

}

表明:同级别的第3个,而且第3个要求是一个p标签

 

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是标题</h1>

</div>

<p>我是段落7</p>

这样的话只有“我是段落2”变红

 

#四、同级别的倒数第n个

p:nth-last-child(3) {

    color: red;

}

表明:同级别的倒数第3个,而且第3个要求是一个p标签

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是标题</h1>

</div>

<p>我是段落7</p>

这样的话只有“我是段落6.1”和“我是段落5”被选中

 

 

 

5.3 同级同类型

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是标题</h1>

</div>

<p>我是段落7</p>

#一、同级别同类型的第一个

p:first-of-type {

    color: red;

}

“我是段落1”和“我是段落6.1”被选中

 

#二、同级别同类型的最后一个

p:last-of-type {

    color: red;

}

“我是段落7”和“我是段落6.2”被选中

 

#三、同级别同类型的第n个

p:nth-of-type(2) {

    color: red;

}

“我是段落2”和“我是段落6.2”被选中

 

#四、同级别同类型的倒数第n个

p:nth-last-of-type(2) {

    color: red;

}

“我是段落5”和“我是段落6.1”被选中

 

 

 

第6章 属性选择器

6.1 做用

1)做用:根据指定的属性名称找到对应的标签,而后设置属性

       该选择器,最经常使用于input标签

 

2)格式与具体用法:

    [属性名]

    其余选择器[属性名]

    [属性名=值]

    [属性名^=值]

    [属性名$=值]

    [属性名*=值]

 

 

    例1:找到全部包含id属性的标签

        [id]

   

    例2:找到全部包含id属性的p标签

        p[id]

   

    例3:找到全部class属性值为part1的p标签

        p[class="part1"]

   

    例4:找到全部href属性值以https开头的a标签

        a[href^="https"]

       

    例5:找到全部src属性值以png结果的img标签

        img[src$="png"]

       

    例6:找到全部class属性值中包含part2的标签

        [class*="part"]

6.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        [id] {

            color: red;

        }

        p[id] {

            font-size: 30px;

        }

        p[class="part1"] {

            color: green;

        }

        a[href^="https"] {

            font-size: 50px;

        }

        img[src$="png"] {

            width: 100px;

        }

        [class*="part"] {

            text-decoration: line-through;

        }

 

    </style>

</head>

<body>

    <h1 id="id1">哈哈啊</h1>

    <p id="id2">我是段落</p>

    <p class="part1">我是段落</p>

    <p class="xxx part2 yyy">我是段落</p>

    <a href="#">我是我</a>

    <a href="http://www.baidu.com">http://www.baidu.com</a>

    <a href="https://www.baidu.com">https://www.baidu.com</a>

    <img src="1.png" alt="">

    <img src="2.jpg" alt="">

    <p>我是段落</p>

    <p>我是段落</p>

 

</body>

</html>

 
View Code

第7章 伪类选择器

7.1 做用

1)、做用:经常使用的几种伪类选择器。

 

#1.1 没有访问的超连接a标签样式:

 

 

2) 注意:

a标签的伪类选择器能够单独出现,也能够一块儿出现

a标签的伪类选择器若是一块儿出现,有严格的顺序要求,不然失效

    link,visited,hover,active

hover是全部其余标签均可以使用的

focus只给input标签使用

 

7.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

    <style type="text/css">

        a:link {

            color: #cccccc;

        }

        a:visited {

            color: #55BBBB;

        }

        a:hover {

            color: green;

        }

        a:active {

            color: red;

        }

        input:hover {

            outline: none;

            background-color: #cccccc;

        } 

    </style>

</head>

<body>

<a href="https://www.baidu.com/a/b/c/d.html">点击我</a>

<input type="text">

</body>

</html>

第8章 伪类元素选择器

8.1 做用

)一、经常使用的伪元素。

#1.1 first-letter:杂志类文章首字母样式调整

例如:

p:first-letter {

  font-size: 48px;

}

 

#1.2 before

用于在元素的内容前面插入新内容。

例如:

p:before {

  content: "*";

  color: red;

}

在全部p标签的内容前面加上一个红色的*。

#1.3 after

用于在元素的内容后面插入新内容。

例如:

p:after {

  content: "?";

  color: red;

}

 

在全部p标签的内容后面加上一个蓝色的?。

8.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        p:first-letter {

            font-size: 50px;

        }

        /*两个冒号与一个是同样的,老版本用的是一个冒号,考虑到兼容性推荐使用一个冒号*/

        a::after {

            content: "?";

            color: red;

        }

        a:before {

            content: "-";

            color: green;

        }

 

    </style>

</head>

<body>

<p>英雄不问出处,流氓不论岁数</p>

<a href="#" class="help">老男孩是干什么的</a>

<a href="#" class="help">老男孩是干什么的</a>

<a href="#" class="help">老男孩是干什么的</a>

</body>

</html>
View Code

第9章 CSS三大特性

9.1 继承性

1)定义:给某一个元素设置一些属性,该元素的后代也可使用,这个咱们就称之为继承性

 

2)注意:

    一、只有以color、font-、text-、line-开头的属性才能够继承

    二、a标签的文字颜色和下划线是不能继承别人的

    三、h标签的文字大小是不能继承别人的,会变大,可是会在原来字体大小的基础上变大

   

    ps:打开浏览器审查元素能够看到一些inherited from。。。的属性

3)应用场景:

一般基于继承性统一设置网页的文字颜色,字体,文字大小等样式

9.1.1 继承性示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

 

        div {

            color: red;

            font-size: 50px;

        }

 

 

    </style>

</head>

<body>

 

<div>

    <h1>我是标题</h1>

    <p><a href="#">偶的博爱</a></p>

    <ul>

        <li>导航1</li>

        <li>导航2</li>

        <li>导航2</li>

    </ul>

</div>

 

<div>

    <div>

        <p>aaaa</p>

    </div>

    <div>

        <p>bbbb</p>

    </div>

</div>

</body>

</html>
View Code

9.2 层叠性

1)定义:CSS全称:Cascading StyleSheet层叠样式表,层叠性指的就是CSS处理冲突的一种能力,即若是有多个选择器选中了同一个标签那么会有覆盖效果

 

#二、注意:

一、层叠性只有在多个选择器选中了同一个标签,而后设置了相同的属性,

才会发生层叠性

ps:经过谷歌浏览器能够查看到,一些属性被划掉了

 

9.2.1 层叠性示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

 

        p {

            color: red;

        }

 

        .ppp {

            color: green;

        }

 

    </style>

</head>

<body>

<p class="ppp">我是段落</p>

</body>

</html>

 
View Code

9.3 优先级

1)定义:当多个选择器选中同一个标签,而且给同一个标签设置相同的属性时,如何层叠就由优先级来肯定

 

2)优先级

    总体优先级从高到底:行内样式>嵌入样式>外部样式

 

    行内样式并不推荐使用,因此咱们以嵌入为例来介绍优先级

9.3.1 大前提:直接选中>间接选中(即继承而来的)

#一、如下为直接选中

    <style type="text/css">

        #id1 {

            color: red;

        }

 

        .ppp {

            color: green;

        }

 

        p {

            color: blue;

        }

    </style>

 
View Code

#二、如下为间接选中

   <style type="text/css">

        ul {

            color: yellow;

        }

    </style>

 

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>
View Code

9.3.2 若是都是间接选中,那么谁离目标标签比较近,就听谁的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        /*离目标近*/

        li {

            color: red;

        }

        /*离目标远*/

        ul {

            color: yellow;

        }

 

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.3 若是都是直接选中,而且都是同类型的选择器,那么就是谁写的在后面就听谁的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        p {

            color: red;

        }

        /*一样都是标签选择器,谁写在后面谁生效*/

        p {

            color: yellow;

        }

 

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.4 若是都是直接选中,而且是不一样类型的选择器,那么就会按照选择器的优先级来层叠id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认(即没有设置任何属性)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        /*打开浏览器依次去掉优先级高的来进行验证*/

        #id1 {

            color: red;

        }

        .ppp {

            color: green;

        }

        p {

            color: blue;

        }

        * {

            color: yellow;

        }

        li {

            color: #7e1487;

        }

       

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.5 优先级之!important

#一、做用:还有一种不讲道理的!import方式来强制指定的属性的优先级提高为最高,可是不推荐使用。由于大量使用!import的代码是没法维护的。

#二、注意:

    一、!important只能用于直接选中,不能用于间接选中

    二、!important只能用于提高被指定的属性的优先级,其余属性的优先级不会被提高

三、!important必须写在属性值分号的前面

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        /*打开浏览器依次去掉优先级高的来进行验证*/

        #id1 {

            color: red;

        }

        .ppp {

            color: green;

        }

        p {

            color: blue;

        }

        * {

            color: yellow !important;

        }

        li {

            color: #7e1487;

        }

 

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.6 优先级之权重计算

#一、强调

若是都是直接选中,而且混杂了一系列其余的选择器一块儿使用时,则须要经过计算机权重来断定优先级

 

#二、计算方式

#一、id数多的优先级高

#二、id数相同,则断定类数多的优先级高

#三、id数、class数均相同,则断定标签数多的优先级高

#四、若id数、class数、标签数均相同,则无需继续往下计算了,谁写在后面谁的优先级高

示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

 

    <style type="text/css">

        #id1 #id2 #id3 .ppp{

            color: red;

        }

        #id2 #id3.aaa p{

            color: purple;

        }

 

        #id1.ccc>.bbb>.aaa>p {

            color: pink;

        }

 

        #id1 .aaa .ppp {

            color: green;

        }

 

        #id2 .aaa p {

            color: yellow;

        }

 

        div ul li p {

            color: blue;

        }

 

        div ul p {

            color: cyan;

        }

 

    </style>

</head>

<body>

    <div id="id1" class="ccc">

        <ul id="id2" class="bbb">

            <li id="id3" class="aaa">

                <p class="ppp">我是段落</p>

            </li>

        </ul>

    </div>

</body>

</html>
View Code
相关文章
相关标签/搜索