[JavaScript知识库] CSS选择器总结~

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> CSS选择器总结~ -> 正文阅读

[JavaScript知识库]CSS选择器总结~

??在前端页面中，CSS起到了对html骨架的装饰作用。通过使用 CSS 我们可以大大提升网页开发的工作效率，同时能够控制多重网页的样式和布局。CSS的基本语法为：

选择器 {属性：属性值；属性：属性值}
<style>
	p
	{
	color:red;
	text-align:center;
	} 
</style>
一般将style标签放置在head标签中

CSS的创建方法有以下三种：

外部样式表
档样式需要用到很多页面上时，可以通过link或@import引入外部样式文件。一般多使用link而不是import。

   <!-- css外部样式1 -->
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <!-- css外部样式2 -->
    <style>
        @import url(./css/index.css);       
    </style>

此时将CSS文件单独放置。文件中的描述遵循CSS的基本语法。

内部样式表
当单个文档需要特殊的样式时，使用内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head

行内样式表
当某一个样式需要在一个元素上应用一次时，需要用到行内样式表。将style作为属性直接写在标签后。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

样式表的引用也有优先级，比如对于某一类选择器，既用到了外部样式又用到了行内样式，那么到底该遵循哪一种呢？一般这种情况遵循就近原则。即优先级顺序为：
！important＞行内＞内部＞外部
对于前面加了！important修饰的，则优先级最大。

p {
  background-color: red !important;
}

注意：尽量不使用important

前面大致介绍了CSS的创建规范，接下来重点介绍CSS的各类选择器。这里总结了七种CSS选择器用法~

1.标签选择器

对选择的标签元素设置CSS样式。如div，p，a，h1等

<style>
p {
  text-align: center;
  color: red;
} 
</style>

2.类选择器

对某一类有特定class属性的元素设置CSS样式
用.class表示

.center {
  text-align: center;
  color: red;
}
</style>

则在html书写中，需要对元素加上设置的类名。如：

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>

3.id选择器

元素id一般是唯一的。使用#id设置CSS样式。如

<style>
#para1 {
  text-align: center;
  color: red;
}
</style>

同样，在元素前应该指出id=“paral”

4.通用选择器

通用选择器使用*选择页面上的所有元素。可以用来设置元素标签的内外边距

*{margin：0；padding：0} 
/*代表清除所有元素的默认边距值和填充值*/

5.群组选择器

当有多个元素需要设置为同一种样式时。多个选择器用逗号分隔。

 <style>
        h1,h2,p {color:yellow}
 </style>

6.后代选择器

如果在群组选择器中忘了写逗号，则又会产生一种新的选择器，叫后代/包含选择器
后代选择器。此时必须是div下的p标签内容发生样式改变。如果是直接单独一个p标签则不会产生变化。匹配时，从右向左匹配。

  <style>
        div p {color:yellow}
    </style>

7.伪类选择器

伪类选择器主要应用于a链接身上。包含以下四种，这四种伪类选择器必须按照顺序写，否则可能导致样式失效。

    <style>
        /* 初识状态 */
        a:link{color: red;}
        /* 访问过的状态 */
        a:visited{color: yellow;}
        /* 鼠标悬停 */
        a:hover{color:yellowgreen;}
        /* 点击激活 */
        a:active{color: springgreen;}
    </style>