CSS基础选择器<标签、id、类选择器>(二)

html-css049

CSS基础选择器<标签、id、类选择器>(二),第1张

属性:通过属性的复杂叠加才能做出漂亮的网页。

选择器:通过选择器找到对应的标签设置样式

标签选择器:就是用标签名来当选择器

1>所有的标签都能做选择器，例如:div、p、 ul、 li、 a、 span、body等等

2>不管这个标签藏的多深，都能够被选择上。

3>选择的整个界面所有的标签，而不是某个，是共性而不是特性

比如说火狐浏览器中的 li 里面所有的 a 标签去掉下划线

# 表示选择 id 选择器

1>任何标签都可以有 id ,命名方式要以字母开头，区分大小写

2>同一页面内 id 不可重复，即使是不一样的标签，也不允许相同的 id

. 表示类选择器 与 id 选择器类似，但是类选择器可以重复，比如说很多标签都有 aa 这个类

css里面用 . 来表示类

同一标签，可能同时属于多个类，用空格隔开.说明 div 同时属于 bb 和 cc 类

<div class = @"bb cc">我是bbcc</div>

错误方式:

<div class = @"bb" class="cc">我是bbcc</div>

思路：提供公共类，再根据相应的类名，去设置相应的样式。

在根据每个标签，去选取自己想要的类。

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

1.基础选择器

a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。

HTML

CSS

执行效果：

b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。

HTML

CSS

执行效果：

c.元素选择器：通过note节点名称匹配元素。

HTML

CSS

2.属性选择器：

注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。

CSS3新增了一些属性选择器，待持续更新。

3.组合选择器

示例如下：

实现效果如下：

示例如下：

从高到低依次是：

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

参考：

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器