web前端——css选择器

我们要给一个元素设置样式，可以通过css设置样式，但是css要怎么找到这个元素呢？这就需要为css设置选择器，就是为css选一个html标签元素。

标签选择器：就是把标签名写上。写法是：元素名{ }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        div{
            color:red;
            font: italic bold 20px "黑体";
        }
    </style>
</head>
    <body>
        <div>卡特琳娜</div>
    </body>
</html>

类选择器：为元素加上一个类名。用 . 代表类。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        .div1{
            color:red;
            font: italic bold 20px "黑体";
        }
    </style>
</head>
    <body>
        <div class="div1">卡特琳娜</div>
    </body>
</html>

id选择器：为元素添加一个id名（最好不要用这个，因为到js的时候会用到id）。用#代表id。#id名{ }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        #div1{
            color:red;
            font: italic bold 20px "黑体";
        }
    </style>
</head>
    <body>
        <div id="div1">卡特琳娜</div>
    </body>
</html>

通配符* 就是只要用了* 所有的标签都会有这个样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        *{
            color:red;
        }
    </style>
</head>
    <body>
        <div>卡特琳娜</div>
        <p>卡特琳娜</p>
        <span>卡特琳娜</span>
    </body>
</html>

后代选择器：所谓的后代，就是一个标签里面所包含的所有标签都叫它的后代（儿子、孙子）。写法：父标签后代标签{}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        div p{
            color:red;
        }
    </style>
</head>
    <body>
        <div>
            <div>你好</div>
            <p>你也好</p>
            <span>大家好才是真的好</span>
        </div>
    </body>
</html>

这就是只有p标签有样式，其它的标签没有样式。

子标签选择器：就是只有儿子才会有样子，孙子就不给样式。写法：元素名>子元素名{ }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        div>p{
            color:red;
        }
    </style>
</head>
    <body>
        <div>
            <span>
                <p>我是孙子标签内的文字</p>
            </span>
            <p>我是儿子标签里的文字</p>
        </div>
    </body>
</html>

并集选择器：就是一个样式作用于两个元素上面，两个元素名之间用逗号隔开。写法：元素名，元素名{ }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
       .div1,.div2{
            color:red;
        }
    </style>
</head>
    <body>
        <div class="div1">我是男人</div>
        <p class="div2">我不是男人</p>
    </body>
</html>

交集选择器：查找固定名字的固定标签元素。写法：元素名.类名或id名{ }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
       div.div1{
            color:red;
        }
    </style>
</head>
    <body>
        <div>
            <div class="div1">空虚</div>
            <p class="div1">寂寞</p>
            <div class="div3">冷</div>
        </div>
    </body>
</html>

web前端——css选择器

猜你喜欢