CSS笔记2-选择器(续)

芝奥小婷

已于 2024-10-24 09:13:36 修改

阅读量847

点赞数 27

文章标签： css 笔记前端 1024程序员节

于 2024-07-20 16:31:22 首次发布

本文链接：https://blog.csdn.net/weixin_70903041/article/details/140571953

版权

关系选择器（4种）

1. 父子选择器: 通过父亲选中儿子.

语法: 父亲>儿子 {}

2. 后代选择器: 通过祖先选中后代

语法: 祖先后代{}

3. 兄+弟选择器: 通过兄长选中紧邻的弟弟

语法: 兄+弟{}

4. 兄~弟选择器: 通过兄长选中符合条件的所有弟弟

语法: 兄~弟{}

<head>    
    <title>关系选择器</title>
       <style>

        /* 父子选择器的演示  */
         div>span{
            font-size: 40px;
            color: blue;
        }
        /* 后代选择器的演示 */
        
        div p span{
            color: orange;

        }
        /* 兄+弟选择器的演示 */
        p+div{
            background-color: aqua;
        }

        span+span{
            font-style: italic;
        }

         /* 兄~弟选择器的演示 */
        div~span{
            color: pink;
        }

       </style>
</head>

<body>
    <div>
        1
        <p>
           2
            <span>3</span>
        </p>
        <div>4</div>
        <span>5</span>
        <span>6</span>
    </div>
    <span>7</span>
    <span>8</span>

</body>

属性选择器（5种）

语法	作用
[属性名]	选中具有指定属性名的元素
[属性名=属性值]	选中指定属性名等于某属性值的元素
[属性名^=指定值]	选中指定属性名的属性值是以指定值开头的元素
[属性名$=指定值]	选中指定属性名的属性值是以指定值结尾的元素
[属性名*=指定值]	选中指定属性名的属性值包含指定值的元素

<head>
    <title>属性选择器的学习</title>
    <style>
        [title]{        
            color:red ;
        }

        [title="a"]{
            color: orange;
        }

        [title^="a"]{
            color: pink;
        }

        [title$="c"]{
            color: blueviolet;
        }

        [title*="b"]{
            color: teal;
        }

    </style>

</head>

<body>
    <h1 title="a">《红豆》</h1>
    <h2 title="ab">唐·王维</h2>
    <p title="abc">红豆生南国，</p>
    <p title="abab">春来发几枝。</p>
    <p title="c">愿君多采撷，</p>
    <p>此物最相思。</p>


</body>

伪类选择器（11种）

1. 伪类是指不存在的类，特殊的类；

2. 伪类用来描述一个元素的特殊状态

比如：第一个子元素、被点击的元素、鼠标移入的元素……

3. 伪类一般都是使用冒号开头

元素选择伪类选择器

冒号前有空格代表从子类开始数，无空格代表从所在级数开始。

常用的伪类选择器:

:first-child 分支中最后一层的第一个子元素被选中

:last-child 分支中最后一层的最后一个子元素被选中

:nth-child(n) 第n个子元素被选中. n的值可以从1到正无穷

2n表示偶数位的元素被选中,也可以使用单词even

2n+1表示奇数位的元素被选中,也可以使用单词odd

:first-of-type 同类型中的第一个元素

:last-of-type 同类型中的最后一个元素

:nth-of-type(n) 同类型中的第一个元素可以使用2n/even表示偶数位,

使用2n+1/odd表示奇数位

否定伪类选择器

:not(其他选择器)

注意,括号里不能传入复合选择器.

作用: 将其他选择器选中的元素排除

<head>
    <title>Document</title>
    <style>
        /* 将所有p里的文字都变红,除了第一个和最后一个 */
        p:not(p:first-child):not(p:last-child){
            color: red;
        }
       
    </style>
</head>

<body>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
    </div>
</body>

a链接的伪类选择器

选择器	作用
: link	超链接独有的选择器,表示未访问前的状态
: visited	超链接独有的选择器,表示访问过的状态
: hover	所有元素都可以使用的选择器,表示鼠标进入该元素时的状态
: active	所以元素都可以使用的选择器,表示鼠标左键点中该元素时的状态

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 超链接访问前的颜色设置 */
        a:link{
            color: orangered;
        }
        /* 超链接访问后的颜色设置,注意:网址必须真实存在,访问后才算真正的访问过 */
        a:visited{
            color: green;
        }
        /* 鼠标进入后的状态设置 */
        p:hover{
            background-color: aqua;
        }
        /* 鼠标左键点击的状态设置 */
        p:active{
            font-size: 40px;
            color: violet;
        }
    </style>

</head>

<body>
    <div>
        <a href="https://www.taobao.com">网站1</a>
        <a href="www.yc.com">网站2</a>
        <p>段落1</p>
    </div> 
</body>

伪元素选择器（5种）

伪元素: 就是虚假的元素,并不存在,只是css为了对段落标记进行设置,提供的内置的选择器

选择器	作用
p::first-letter	对段落的首字符设置样式
p::first-line	对段落的首行设置样式
p::selection	对段落中被鼠标选中的文字设置样式
p::before	对段落中的第一个字符的前面设置样式,可以理解为向段落的第一个字符之前插入内容
p::after	对段落中的最后一个字符的后面设置样式,可以理解为向段落的最后一个字符之后插入内容

<head>
    <title>伪元素选择器</title>
    <style>
        p::first-letter{
            font-size: 30px;
            color: blue;
        }
        p+p::first-line{
            background-color: pink;
        }

        p::selection{
            color: red;
            background-color: teal;
        }

        p::before{
            content: "你好";
            color: red;
        }

        p::after{
            content: "$";
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <p>hello</p>
    <p> hello,world!</p>

</body>