CSS选择器

作者: 落花的季节 | 来源:发表于2016-12-06 21:20 被阅读33次

CSS的语法规则由两个主要的部分构成：CSS选择器（selector），以及一条或多条声明（declaration）。比如：

selector {declaration1; declaration2; ... declarationN }

选择器标明了我们要操作的HTML元素。每个声明用分号隔开，最后一个声明不用。
而每一个声明由一个属性名和一个值组成。属性名和值被冒号分开。如下：

selector {property: value}

property是您希望设置的样式属性的名字，也就是前文所说属性名。每个属性有一个值。这种匹配的方式又被成为键值对(key-value)的方式，

在软件开发的代码风格方面，一般来说，我们让选择器单独占一行，在{}内一行只写一个声明，冒号前紧跟属性名，冒号后面空一格写属性值。形如：

button{    
            background-color: aqua;    
            height: 30px;    
            width: 100px;    
            font-size: 14px
}

元素选择器（Element Selector）
- 元素选择器就是以HTML标签（又叫HTML元素）作为目标的选择器。这种选择器的目的，是改变某类元素的默认样式。比如：

h4{    
  background-color: gainsboro;    
  line-height: 48px;    
  margin: 0px auto
}

如果写了上面的css，那么所有的h4标签的background-color属性都会设置为 gainsboro。
但是CSS属性的影响有的不是只面对这个元素，比如color，当我们设置一个元素的color为一个值的时候，他所有子元素的color都会变成这个值。当这种情况下，比如：

div{
  color:blue
}

.style{    
            background-color: aqua;    
            height: 30px;    
            width: 100px;    
            font-size: 14px
}

我们通过class属性，将这个类与HTML元素关联在一起。比如：

<button type="submit" class="style">提交</button>
<h1 class="style">我是标题</h1>

类选择器可以与其他选择器搭配使用，比如还是上面的HTML代码，但是css我们写成：

button .style{    
            background-color: aqua;    
            height: 30px;    
            width: 100px;    
            font-size: 14px
}

当我们期望类选择器是适用于所有元素的时候除了最开始的我们不加任何前缀的方式，还是可以加一个 * 的前缀，如

*.style{    
            background-color: aqua;    
            height: 30px;    
            width: 100px;    
            font-size: 14px
}

这跟不加 * 表达的含义是一样的，* 在软件开发的各种表达式里都有通配（通用适配，即适用于所有）的意思。在CSS里又称通配选择器。

注意：
css中，类选择器是大小写敏感的，也就是如果css里class的名字是Warning, 那么html里标签的class属性值也必须是Warning。但是强烈不建议使用大写。在CSS传统中几乎所有单词大都使用小写。

#warning-title {
 font-weight: bold
}

这个ID对应着HTML标签的ID属性

<h1 id="warning-title">这是一个警告标题</h1>

注意：
- ID选择器也是大小写敏感的，而且也不支持空格，相关原则与类选择器一样，在此不再赘述。
- 虽然ID选择器也可以与其他选择器配合使用，但是ID是用来标记html元素的唯一记号，所以请不要这样使用，同时请不要在一个页面使用超过一个同名ID。

CSS的样式覆盖，在选择器不同的情况下，我们给每种选择器制定一个权值，计算命中一个元素的所有选择器的总权值，值高者获胜

无论在任何一种情况下，只要你在样式上加了important，那么他最大，前面所有的规则都忽略加了important的代码样子如下：

p {
 color: red !important;
}

网友评论

本文标题：CSS选择器

本文链接：https://www.haomeiwen.com/subject/itnrmttx.html

CSS选择器