CSS3 标签选择器于类选择器

CSS3 选择器

Holle！最近很多人再问CSS选择器重要吗？有什么作用？阅本篇文章君知晓 ?

文章目录名称
选择器概念
类选择器
ID 选择器
包含选择器
子选择器

优点	缺点
详情如下	详情如下

1.选择器概念

作用： 减少对 HTML类 和 ID 的依赖，使编写网页更加轻松简单。

通俗来讲选择器就是很明确地告诉浏览器要去渲染 HTML 节点中某个位置的样式，相当于路标、指示牌。
每种选择器都存在不同的指示作用，但最终是能够指向到具体的位置。

拿路标指示牌来说吧，道路上看到那么多的路标，作用不同，但你最终可以到达目的地。

不同的选择器有不同的作用，使用什么选择器只会让你感受到不同的实现路径。

具体没有什么最有用，只有什么比较合适去使用。

2.常见选择器及应用

2.1标签选择器
优点：使用简单，直接引用不需要添加属性
缺点：影响范围大，容易干扰不同的结构，精度不够

p{
  font-size:14px;                 /*字体大小为14px*/
  color:#444;                     /*字体颜色为深灰色*/
  }

效果如下

小结：css3 定义了一个特殊类型的选择器：通配器，他使用（*）表示，用来匹配所有标签。一般使用通配器使用通配器选择器统一标签的样式。

2.2类选择器(又名class选择器)

/*颜色类*/.red { color: #f00; }
/*下滑线*/.underline {text-decoration: underline; }

代码如上
效果如下

使用方法手动添加 class 属性

优点：最常用设计方法，使用灵活，可以为不同对象
缺点：需要手动添加 class 属性 操作较麻烦也不利于文档结构的简洁

2.3 ID 选择器

ID 选择器 以井号 （#）为前缀 后面 ID 为 名称。
应用方法：在标签中定义 id 属性 然后设置属性值 为 ID

实例设计：

#tangshi {/*ID样式*/}
	width：300px；					//固定宽度
	border：solid 2px red；				//红色实线边框
	margin：auto；					//网页居中显示

代码如上
效果如下

优点：精确匹配使用
缺点：与类选择器相同需要手动添加id属性，缺乏灵活性

小结：类选择器和ID选择器可以同时作为一个标签 ，但ID选择器优先级高于类选择器

2.4包含选择器

简单选择器包括 ，标签选择器， 类选择器 和通配选择器。如果把两个选择器组合在一起，就形成了一个
复杂的关系选择器。在html5文档结构中，通过关系选择器可以精确匹配结构中特定的关系元素。

实例设计
1.第一步 新建HTML 5文档，在< body >内输入下图代码，设计一个简单的网页模板结构。

2.第二步 ，在< head > 添加< style type=“text/css” > 标签，定义一个内部样式表，然后定义样式，实现如下设计目标：

*1.定义网页标题字体大小为 ：18px；
*2.定义页脚标题字体大小为：12px；*

3.第三步 输入如下代码，利用包含选择器限定 h1选择器的应用范围。

<style type="text/css">
header h1{font-size:18px;}
footer h1{font-size:12px;}
</style>

效果如下：

优点：可以匹配特定结构内指定对象，用于缩小范围。
缺点：匹配范围较大，影响的层级不受限制

2.5 子 选择器

子选择器使用尖角号(>)连接两个选择器，前面选择器表示要表示的 父元素 后面选择器表示被包含的匹配子对象

实例设计
第一步 在< BODY >内输入如下代码，设计一个简单的文档结构

第二步 在< head >标签内添加 < style type=“text/css”>标签在内部定义< article >包含内容文本为大小px的灰色字体
第三步 使用子选择器定义 < article >包含的内容文字大小为18px 颜色为黑色。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

article > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

< artcle>This is < artcle >very</ artcle> < artcle>very< /artcle> important.</ artcle>
< artcle>This is < em >really < artcle >very</ artcle>< /em> important.</ artcle>

优点： 比包含选择器匹配的范围更小，匹配目标明确
缺点： 比包含选择器相比，匹配范围比较有限，用户需知熟悉文档结构

语法解释

您应该已经注意到了，子选择器使用了大于号（子结合符）。

子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong
h1> strong
h1 >strong
h1>strong

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

2.6相邻选择器

相邻选择器使用加号（+）连接两个选择器，前面选择器匹配特定元素，后面选择器根据关系结构关系
指定同级、相邻的匹配元素

实例设计

<style type=“text/css”>
<article> p{ font-size： 14px； color：#666； }
h1 + p { font-size： 20px； color：#000 }
</style>

效果如下

各位客官到这里就结束了！！

猜你想看的：更多复杂选择器

出处：在校生有森记录博客
网址：https://mp.csdn.net/mdeditor/102772505

严禁转载！用于学习交流！