欢迎光临
我们一直在努力

CSS | CSS选择器

CSS包括选择器和声明,选择器用于控制寻找被设置的元素。CSS主要的选择器有以下几种。

  • 标签选择器
  • 类选择器
  • ID选择器
  • 全局选择器
  • 群组选择器
  • 后代选择器

标签选择器为直接通过寻找标签设置样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            p{font_size:30px;color:red;}
        </style>
    </head>
    <body>
        <p class="css1">这是文字</p>
    </body>
</html>

类选择器为,先为元素设置class属性,然后通过class值设置样式

另外,类选择器可对不同类型元素的同一个名称的类选择器设置不同的样式

当我们想为一个标签设置多个class属性,只需要在class值中用空号隔开,如:<p class="a b c d"

h1.css1{font-size:50px;}
h2.css{font-size:30px;}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            .css1{font-size:30px;color:red;}
            h1.css2{font-size:50px;}
            h2.css2{font-size:30px;}
        </style>
    </head>
    <body>
        <p class="css1">这是文字</p>
        <h1 class="css2">这是文字</h1>
        <h2 class="css2">这是文字</h2>
    </body>
</html>

ID选择器为,先为元素设置ID值,然后通过ID值设置样式(通常我们只会为一个标签最多设置一个ID值,否则在JS中寻找ID会报错)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            #id{font_size:30px;color:red;}
        </style>
    </head>
    <body>
        <p id="css1">这是文字</p>
    </body>
</html>

群组选择器为,同时为多个选择器写相同声明,中间用逗号隔开

p,p.class,.class,#id{font-size:30px;color:red;}

全局选择器为,对所有的元素进行样式设置,我们用*{}设置

*{font-size:30px;color:red;}

后代选择器为,为某个元素的相应后代元素进行选择设置样式,可以搭配类选择器或ID选择器使用。下面是一个简单的例子。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css样式基础</title>
        <style type="text/css">
            p em{font-size:30px;color: red;}
            p.red em{color: red;}
            #yellow em{color:yellow;}
        </style>
    </head>
    <body>
        <p><em>后代</em>选择器</p>
        <p><em>后代</em>选择器</p>
        <p>非后代选择器</p>
        <hr>
        <p class="red"><em>你好啊!</em>我很好!</p>
        <p id="yellow"><em>你好吗?</em>我不太好!</p>
    </body>
</html>
赞(0) 打赏
未经允许不得转载:散人研 » CSS | CSS选择器
分享到: 更多 (0)

评论 抢沙发

9 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏