CSS之选择器

作者: 追逐_chase | 来源:发表于2018-02-13 09:45 被阅读0次

CSS选择器
CSS选择器
CSS笔记（二）
css选择器
CSS选择器
CSS 选择器
Sublime 学习web的css
CSS选择器
JQuery CSS选择器
HTML学习CSS选择器06-简单选择器

CSS是cascading style sheet 层叠式样式表的简写.
CSS是从审美的角度复测页面的样式

标签选择器

标签选择器就是标签的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">
        h1{
            color: red;
            font-size: 30px;
            text-decoration: underline;
            background: aquamarine;
            font-style: italic;
        }
    </style>

</head>
<body>
    
  <!--标签选择器-->
    <h1>这是标签选择器</h1>

</body>
</html>

标签选择器.jpeg

类选择器

以class开头
在样式中 . + 类名表示 ( 比如下面的例子：.lei{
}
)
同一个标签可以有不同的class类，用空格隔开
知道抽取公共的类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">
        h1{
            color: red;
            font-size: 30px;
            text-decoration: underline;
            background: aquamarine;
            font-style: italic;

        }
        .lei {
            color: yellow;
            background: aquamarine;
            text-decoration: underline;
            font-style: italic;
            font-size: 50px;
        }



    </style>

</head>
<body>

    <h1>这是标签选择器</h1>

        <p class="lei  teshu"> 这是类选择器</p>
       <p class="teshu">这是teshu的类</p>

</body>
</html>

    <style type="text/css">
        .lv{
            color:green;
        }
        .da{
            font-size: 60px;
        }
        .xian{
            text-decoration: underline;
        }
    </style>


       <p class="lv da">段落1</p>
    <p class="lv xian">段落2</p>
    <p class="da xian">段落3</p>

公共的类.jpg

Id选择器

在一个html页面中不可以有相同的Id名
id名的取名规范
- 只能以字母，数字，下划线
- 必须以字母开头
- 不能和标签同名


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">
        #hezi{
            background: aqua;
            width: 100px;
            height: 100px;
            
        }


    </style>

</head>
<body>
        <div id="hezi"></div>
</body>
</htm

id选择器.jpg

后代选择器

后代选择和在其他的选择之间用空格隔开
比如 .houdai p 表示类选择器houdai所有的p


 .houdai p{


            background-color: bisque;
            font-size: 50px;
            color: red;
            

        }

 <div class="houdai">
        <ul>
            <li>
                <p>后台选择器的测试</p>
            </li>
        </ul>
    </div>

后代.png

交集选择器

交集.png

交集选择器满足2个条件（如上图所示）
- 必须是h3标签
- 必须是 special标签
交集选择器没有空格

 h3.special {
            background-color: bisque;
            color: red;
        }


    <div>
        <h3 class="special">交集选择器</h3>
        <h3 class="special">交集选择器</h3>
        <h3>交集选择器</h3>
        <h3>交集选择器</h3>
        <h3>交集选择器</h3>
    </div>

并集选择器

不相关的标签用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">

        h3,li{
            color: red;
        }

    </style>
 
   
</head>
<body>

    <div>
        <h3>这是一个标题</h3>
        <p>是一个段落</p>
        <ul>
            <li>这是个列表</li>
        </ul>
    </div>
</body>
</html>

通配符选择器

用 * 表示所有的元素
缺点：效率不高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之选择器</title>
    <!-- 样式-->
    <style type="text/css">

       *{
           color: red;
       }

    </style>
 
   
</head>
<body>

    <div>
        <h3>这是一个标题</h3>
        <p>是一个段落</p>
        <ul>
            <li>这是个列表</li>
        </ul>
    </div>



</body>
</ht