CSS3基础语法与盒模型（二）CSS3选择器（1）-选择器与伪类

最新推荐文章于 2022-04-02 21:22:50 发布

i_donot_care

最新推荐文章于 2022-04-02 21:22:50 发布

阅读量99

点赞数

分类专栏：自学文章标签： css3 html

本文链接：https://blog.csdn.net/i_donot_care/article/details/118557553

版权

自学专栏收录该内容

16 篇文章 0 订阅

订阅专栏

传统css2.1选择器：1、标签选择器&id选择器 2、class选择器 3、复合选择器 4、伪类
css3新增选择器：1、元素关系选择器 2、序号选择器 3、属性选择器 4、css3新增伪类 5、伪元素

同一个ID选择器在CSS样式设置时，可以被多次使用。

示例：在css样式中，可以多次使用同一个ID选择器。

//img.mukewang.com/climg/5f584a1b2977866e05001000.jpg

同一个网页文档中ID是唯一。

示例：元素的ID值是唯一的，不可以多次使用同一个ID。

//img.mukewang.com/climg/5f584a4d294f981a05001000.jpg

//img.mukewang.com/climg/5f584a6429fc566b05001000.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #para1{
            color: red;
        }
    </style>
</head>
<body>
    <p id="para1">我是段落</p>
    <p id="para2">我是段落</p>
    <p id="para3">我是段落</p>
    <p id="para4">我是段落</p>
</body>
</html>

class选择器

1.class类名

class属性表示“类名”，类名的规范属性与id的命名规范相同（字母、数字、下划线、短横，且不能以数字开头，严格区分大小写，习惯上用小写字母）

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

2.class选择器

使用点（.）前缀选择指定class的标签{选择class为warning的标签}

.warning{
            color: red;
        }

3.class类名非常灵活

<p class="warning">我是一个p标签</p>    
    <p class="warning">我是一个p标签</p>
    <ul>
        <li>我是列表项</li>
        <li class="warning">我是列表项</li>
        <li class="warning">我是列表项</li>
        <li>我是列表项</li>
    </ul>

同一个标签可以同时属于多个类，类名用空格隔开

 <p class="warning spec">我是段落</p> 
 .warning{
            color: red;
        }
        .spec{
            /* 文字倾斜 */
            font-style: italic;
        }

4.原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距都设置为单独的类（font字体 size尺寸 px像素）

 .fs14{
            font-size: 14px;
        }
        .fs18{
            font-size: 18px;
 .color-blue{
            color: blue;
        }
        .color-pink{
            color: pink

HTML就可以“按需选择”它的类名了，可以快速的添加一些常用样式

<p class="fs14 color-green ">我是文字</p>

复合选择器

CSS后代选择器中，选择器与选择器之间要使用空格隔开。

1.后代选择器：.box .spec(中间用空格隔开) 意为:选择类名为box的标签内部的类名为spec的标签。（选择有.spec类的h3标签，此时应该用交集选择器）

    <style>
        /* .box与p之间的空格表示后代 */
        .box p em{
            color: blue;
        }
    </style>
<body>
    <div class="box">
        <ul>
            <li>
                <p>我是段落</p>
            </li>
            <li>
                <p>我是段落 <em>强调文字</em></p>   
            </li>
        </ul>
        <p>我是段落</p>
    </div>
</body>

2.交集选择器：li.spec(两个选择器相连，没有东西隔开）意为：选择既属于li标签，也属于spec类的标签。(p和h3都有spec，但此时我们只要h3标签倾斜)

  <style>
        h3.spec{
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <p class="spec">我是段落<em>强调文字</em></p>   
            </li>
        </ul>
        <p>我是段落</p>
    </div>
    <h3 class="spec">我是一个三级标题</h3>
</body>

3.并集选择器：ul,ol(中间用逗号分隔开) 意为：选择所有的ul和ol标签。也叫分组选择器，逗号表示分组。（此时无序和有序列表前的圆点和阿拉伯数字被取消了）

<style>
        ul,ol{
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>无序列表的列表项</li>
    </ul>
    <ol>
        <li>有序列表的列表项</li>
    </ol>
</body>

4.css中用空格表示“后代" , 后代不一定是”儿子“，也可以是孙子等等，后代选择器也可以有多个空格，隔开好几代。

伪类

1.伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态。link：未点击的链接 visited：已被点击过的链接

hover：鼠标悬停的链接 active：鼠标点击了但还没松开的链接

2.love hate准则，一定要按这个准则书写，否则会有不生效的。link和visited的顺序无所谓，hover和active一定要按顺序

：link -> :visited -> :hover ->:active

<style>
        a:link{
            color: pink;
        }
        a:visited{
            color: red;
        }
        a:hover{
            /* 背景颜色 */
            background-color: skyblue;
        }
        a:active{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>
        <a href="http://www.123.com">前往123</a>
    </p>        
    <p>
        <a href="http://www.jd.com">前往京东商城</a>
    </p>

3.伪类：hover不仅可以用在a标签上，还可以用在其他标签上，比如div，p，列表标签，标题标签等

i_donot_care

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础语法与盒模型（二）CSS3选择器（1）-选择器与伪类

传统css2.1选择器：1、标签选择器&id选择器 2、class选择器 3、复合选择器 4、伪类css3新增选择器：1、元素关系选择器 2、序号选择器 3、属性选择器 4、css3新增伪类 5、伪元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=..
复制链接

扫一扫