Web网页设计之css_4. css 其他选择器

我们在说 css 的核心基础的时候，介绍了三种选择器类型，分别是：class 选择器，id 选择器，标签选择器，但是啊，我们日常用到的肯定不止这些，我们这篇主要来说说一些除此之外的其他选择器，这个我们日后工作会常常用到~

一、分组选择器

先来说说分组选择器的由来，再说这个东西具体怎么用

1. 由来

我们知道啊，css 层叠样式由很多，但是在一个网页中，肯定有相同、或者说就是一模一样的样式，但是我们总不能一个一个去复制粘贴一遍，所以，为了我们更好的去定义css，我们需要一个选择器可以支持到我们做到这个事情，而这个选择器就是分组选择器

2. 用法

分组选择器怎么写呢？直接上图

标签选择器, id选择器, class选择器, class选择器... {
    声明1: 值;
    声明2: 值;
    声明3: 值;
    ...
}

嗯，大概就这样，我们来举个具体的例子，大家来感受一下

我们可以看到啊，这个都变红色了。

这个分组选择器大家要注意这个标签选择器、id选择器、class选择器的定义方法，别弄错了就行~

二、嵌套选择器

1. 由来

还是刚的问题，一个 HTML 页面中有很多的层叠样式，如果我们都是使用的 class 样式选择器，那么我们需要起很多名字，所以为了能够省略一些，我们让这个选择器可以进行简写，并且达到一种继承的效果

2. 用法

我们怎么使用呢，看图说话

p
{
    color:blue;
    text-align:center;
}

.marked
{
    background-color:red;
}

.marked p
{
    color:white;
}

p .marked{
    text-decoration:underline;
}

这个是我从菜鸟弄过来的，当然啊，我们自己也来弄一个实例，去感受一下这个嵌套选择器

可以看到啊，我们让 p 标签中的 id 是 a1 的标签都是字体 50px，而且啊，还继承了 p 标签的属性，当然，你也可以不写 p 标签选择器，没有关系的。但是外面的这个 id 是 a1 的标签缺没有变，还是这个普通的样子

这也就是说，这个 HTML 中的标签相互嵌套，我们就可以使用这样的方式给他们里面的标签进行填充样式了，这样省的我们给每一个标签定义 class 或者 id 了

三、属性选择器

属性选择器我是很少用，在说句实话，实际项目中根本没用过，但是还是要说一下

1. 由来

我不知道由来，想知道自己去百度查吧~~~，我只能说说这个用法

2. 用法

这个属性选择器是给 HTML 中标签中属性准备的，只要我们的这个标签使用了某一个属性，那么使用的这个标签就可以有这个属性的样式

用法很简单，直接上图

[属性] {
    声明1: 值
    ...
}

标签[属性][属性]{
    声明1: 值
    ...
}

当然啊，这个里面内容比较多，我就说几种常见的~

可以看到啊，这个有 id 的 p 标签颜色被改变了，而且是被变成了红色，而同样有这个 id 的 a 标签也改变了，可以说，只要有 id 都可以被改成红色，接着我们在这个 属性选择器前面再加一个 p 

可以看到啊，这个作用域相当于被改变了，只有作用到这个 p 标签身上，有 id 属性值的才能被改变

除去上面之外，再说个特殊的，见见就好

我们还可以给这个属性选择器加这个具体的值，上图就是让 p 标签，并且还得 id 属性有值，还得是 1 的才能有颜色

 

先这样，大家下去好好练习一下，有不懂的可以问我，加我 QQ：2100363119