CSS复合选择器

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。

1. 后代选择器

后代选择器又称为包含选择器

作用:用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。

父级 子级{属性:属性值;属性:属性值;}

语法:

.class h3{color:red;font-size:16px;}

当标签发生嵌套时,内层标签就成为外层标签的后代。

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            color: red;
        }

        ol li {
            color: green;
        }

        .demo1 ul li {
            color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>青春正能量</li>
        <li>青春正能量</li>
        <li>青春正能量</li>
    </ul>

    <ol>
        <li>青春正能量</li>
        <li>青春正能量</li>
        <li>青春正能量</li>
    </ol>

    <div class="demo1">
        <ul>
            <li>青春正能量</li>
            <li>青春正能量</li>
            <li>青春正能量</li>
        </ul>
    </div>
</body>

</html>

CSS复合选择器

2. 子元素选择器

作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接

语法:

.class>h3{color:red;font-size:14px;}

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>青春正能量1</p>
        <p><a href="#">青春正能量2</a></p>
    </div>
    <div>
        <p><a href="#">青春正能量3</a></p>
    </div>
    <div>
        <p>青春正能量4</p>
    </div>
</body>

</html>

CSS复合选择器

3. 并集选择器

如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。

并集选择器(CSS选择器分组)是各个选择器通过,连接而成的,通常用于集体声明。

任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。

并集选择器通常用于集体声明 ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为 和的意思。

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        span,
        .demo li {
            color: red;
        }
    </style>
</head>

<body>
    <div>青春正能量1</div>
    <p>青春正能量2</p>
    <span>青春正能量3</span>
    <ul>
        <li>青春正能量4</li>
    </ul>
    <ol class="demo">
        <li>青春正能量5</li>
    </ol>
</body>

</html>

CSS复合选择器

4. 链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

伪类选择器很多,比如链接伪类,结构伪类等等。

  • a:link /* 未访问的链接 */

  • a:visited /* 已访问的链接 */

  • a:hover /* 鼠标移动到链接上 */

  • a:active /* 选定的链接 */

注意

  • 写的时候,他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。

一般上面4个不全用,一般写法如下:

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候,由原来的 灰色 变成了红色 */
}

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: #333;
            /*取消下划线*/
            text-decoration: none;
        }

        /*已经访问的链接  我们点击过*/
        a:visited {
            color: orange;
        }

        /*鼠标经过链接时候的状态*/
        a:hover {
            color: red;
        }

        /*当我们点击的时候(按下鼠标,别松开的时候)*/
        a:active {
            color: green;
        }
    </style>
</head>

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

</html>

CSS复合选择器

 CSS复合选择器

这儿除了链接a可以用伪类选择器,别的标签也是可以的!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*鼠标经过链接时候的状态*/
        p:hover {
            color: red;
        }
    </style>
</head>

<body>
    <p>哈哈</p>
</body>

</html>

5. :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            /* 把获得光标的input表单选取出来 */
            background-color: pink;
            color: red;
        }
    </style>
</head>

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

</html>

CSS复合选择器

上一篇:day04 缺陷报告蜗牛壳


下一篇:R语言plot显示函数时只有>1的部分