css的选择器

优先级等级

行内样式 > ID选择器 > 类选择器 > 标签选择器

标签选择器优先级为1

类选择器优先级为10

ID选择器优先级为100

行内样式优先级为1000

基本选择器包含：

1.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*属性选择器必须放在style内*/
        p{
            /*对下面body中的所有的p标签的属性进行操作*/
            font-size: 170px;
            color: aqua;
        }
    </style>
</head>
<body>
<p> 这是一个段落</p>
</body>

ID选择器：

#选中ID

同一页面中的ID不能重复

任何标签都可设置id

ID选择器

语法格式：

CSS ， #id名称 { 属性名N:属性值; }

HTML， <标签名 id=”id名称”>内容</标签名>

描述：选择含有指定ID名称标签，添加属性

注意：

1、属性值id名称首字母不能是数字（注：可以为中文，但是强烈不推荐，区分大小写）

2、 ID名称在一页页面中，只能出现一次

id命名规范，要以字母可以又数字下划线大小写样额区分，aa和AA是两个不一样的属性值

   <style>
        #in{
            /*对你下面的id对应的值来进行设置*/
            color: aqua;
            font-size: 55px;
        }
        #ino{
            /*对ino对应的id进行设置*/
            color: red;
            font-size: 33px;
        }
        #info{
            /*对info对应的id进行设置*/
            color: yellow;
            font-size: 99px;
        }
    </style>
</head>
<body>
<p id="in"> 这是一个段落</p>
<u id="ino">说的是什么</u><br/>
<i id="info">我可以设置的</i>
</body>

id的设置也是必须在head中的style标签中的内容，也是必须要用#来进行开头设置的

id选择器是有一些不足的你可以id都一样你想要好几个设置一样的就不能很多的一起进行设置因为id的值不能一样的

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet" type="text/css">
        #p{
            color: blue;
        }
        #b{
            size: A5;
        }

        #u,#i{  /* 多个id的设置可以放在一起用逗号隔开*/
            color: aqua;
            font-size: 300px;
        }
    </style>
</head>
<body>


<p id="p">This is a 段落</p>
<b id="b">这是一个加粗标签</b>
<u id="u"> 这是一个u</u>
<i id="i">这是一个斜体</i>



</body>

类选择器：

所谓的类就是class ，class 与id非常的相识的任何的属性都可以加类但是类是可以重复的属于归类的概念

同一个标签中可以携带多个类用空格隔开

类的使用，能够决定前端工程师CSS的水平

一定要有公共类的概念

Class/类选择器

语法格式：

CSS ， .class名称 { 属性名N:属性值; }

HTML， <标签名 class=”class名称”>内容</标签名>

描述：选择含有指定class名称标签，添加属性

注意：

1、属性值class名称首字母不能是数字（注：可以为中文，但是强烈不推荐，区分大小写）

2、 Class在页面可以出现多次，并且class名称可以写多个（注：多个名称之间用空格隔开）

可以设置一样的一起改变：

<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .American{
            font-size: 66px;
        }
    </style>
</head>
<body>
<p class="American">特朗普</p><br/>
<u class=" American">奥巴马</u><br/>
<i class="American">小布什</i><br/>

</body>

也可以根据不同的class对应的名字来设置不同的操作，也可以根据class的值的进行的不同的设置

<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .American{
            font-size: 66px;
        }
        .merchant{
            color: yellow;
        }
        .politician{
            color: aqua;
        }
        .executioner{
            color: bisque;
        }
        .man{
            font-family: 宋体;
        }
        .woman{
            font-family: 楷体;
        }
    </style>
</head>
<body>
<p class="American  merchant man">特朗普</p><br/>
<u class=" American politician man">奥巴马</u><br/>
<i class="American executioner  woman">小布什</i><br/>

</body>

相同的class的设置

通配选择器选择器

语法格式： * { 属性名N:属性值; }

描述：选择页面所有标签添加属性

可以对你页面的所有的选择器都进行设置把body中内容进行设置可以把页面的所有的内容都进行修改

<head>
    <meta charset="UTF-8">
    <title>通配选择器</title>
    <style>
        *{
            /*运用统配选择器把所有的都进行换颜色操作*/
            color: red;
        }
    </style>
</head>
<body>
<p class="American">特朗普</p>
<del class="American">老布什</del>
<i class="American">爸爸我</i>
<u id="rr">还是我</u>
<pre>
    呃呃呃
</pre>

</body>

Summary

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用

到底使用id还是用class？

答案：尽可能的用class。除非一些特殊情况可以用id

原因：id一般是用在js的。也就是说 js是通过id来获取到标签

posted @ 2018-05-22 21:41 可爱的红领巾阅读(197) 评论(0) 编辑收藏举报

刷新页面返回顶部

可爱的红领巾