css选择器学习

来源：互联网发布：大煌软件编辑：程序博客网时间：2024/05/23 16:55

css选择器学习

本片文章主要讲解html5中css选择器，通过选择器定位到想要进行样式设置的元素。当前css选择已经发布到第三代，也就是css3选择器。css3选择器分为：基本选择器，复合选择器，伪元素选择器。

一：css选择器总汇

1.1：*代表通用选择器，选择所有元素
1.2：type选择器（元素选择器），选择指定的元素
1.3：id选择器，选择指定id属性的元素
1.4：class选择器，选择指定class属性的元素
1.5：[attr]属性选择器，选择指定attr属性的元素
1.6：s1,s2,s3分组选择器，选择多个选择器的元素
1.7：s1 s2-后代选择器，选择指定选择器的后代元素
1.8：s1>s2子选择器，选择指定选择器的子元素
1.9：s1+s2相邻兄弟选择器,选择指定选择器相邻的元素
1.10：s1~s2普通兄弟选择器,选择指定选择器后面的元素
1.11：::first-line 伪元素选择器，选择块级元素文本的首行
1.12：::first-letter 伪元素选择器，选择块级元素文本的首字母
1.13：::before 伪元素选择器选择元素之前插入内容
1.14：::after 伪元素选择器选择元素之后插入内容

二：基本选择器

在实际编写css样式中使用简单而且频率高的选择器归于基本选择器。

2.1 通用选择器

*{    border:1px solid blud;}

“*”号选择器便是通用选择器，该选择器匹配html元素的所有选择器，包括html和body标签。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        *{            border:1px solid blue;        }    </style></head><body>    <p>我是p</p>    <b>我是b</b> <br/><br/>    <span>我是span</span></body></html>

运行上面代码你会发现页面有5个边框，通用选择器给所有的html元素的选择器添加边框。声明一点，在实际项目中通用选择器的使用非常少，一般不用。

2.2：元素选择器

直接使用元素名称作为选择器就是元素选择器。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        p{            color:red;            font-size:20px;        }    </style></head><body>    <p>我是p</p>    <b>我是b</b> <br/><br/>    <span>我是span</span></body></html>

上面的代码就是使用元素选择器给p元素添加字体颜色样式。凡是p标签其内容字体都是红色并且字体大小为20像素。

2.3：id选择器

id选择器是在html页面中给某一个元素的唯一标识。使用#id值来锁定我们想要的进行css样式的元素。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        #mySpan{            color:blue;            font-size: 30px;        }    </style></head><body>    <p>我是p</p>    <b>我是b</b> <br/><br/>    <span id="mySpan" >我是span</span></body></html>

在实际项目中id选择器的使用频率很高，因为它可以高效准确地锁定某一个元素。

2.4：类选择器

html页面的元素都可以有一属性class,比如下面的

<p class="pClass"></p>

解释：给p标签一个class属性，属性值为：pClass.

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        .spanClass{            border:1px solid orange;        }    </style></head><body>    <p>我是p</p>    <b>我是b</b> <br/><br/>    <span class="spanClass" >我是span</span>    <p>我是p</p>    <b class="spanClass">我是b</b> <br/><br/>    <span>我是span</span></body></html>

解释：.class属性值代表类选择器，可以选择多个元素的选择器。
代码中只要元素的class的值为spanClass，都会有一个橘黄色的边框。

2.5：属性选择器

匹配属性的选择器：直接使用中括号包含属性名即可。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        [href]{            border:1px solid red;        }    </style></head><body>    <a href="http://www.baidu.com">百度</a>    <a href="http://www.aiqiyi.com">爱奇艺</a></body></html>

上面两个链接都会有边框。
匹配属性值的选择器：[href=”http://www.baidu.com”]{}

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        [href="http://www.baidu.com"]{            border:1px solid red;        }    </style></head><body>    <a href="http://www.baidu.com">百度</a>    <a href="http://www.aiqiyi.com">爱奇艺</a></body></html>

两个超链接一个有边框一个没有边框。
属性选择器还有很多扩展和css3新添加的其他属性选择器，在这里只介绍以上几种属性选择器。

三：复合选择器

3.1：分组选择器

将多个选择器用逗号隔开，同时设置一组样式。代码如下：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        a,p,span,.myClass{            color:red;        }    </style></head><body>    <a href="http://www.baidu.com">超链接</a>    <p>p标签</p>    <span>span标签</span>    <div class="myClass">div标签</div></body></html>

style样式代码中的就是复合选择器。

3.2：后代选择器

后代选择器涉及到html标签中元素的嵌套。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>css选择器</title>    <style type="text/css">        div b{            color:blue;        }    </style></head><body>    <a href="http://www.baidu.com">超链接</a>    <p>p标签</p>    <span>span标签</span>    <div class="myClass"><br>        <b>div子元素标签b</b>    </div></body></html>

解释：选择div元素内部所有b元素。不在乎b的层次深度.后代选择器可以混合使用 ID 选择器、类选择器、属性选择器。

css选择器远不止这些。还有很多其他选择器。本片文章只是选择了平常用到的比较多的一些选择器，想要了解更多其他css选择器可以观看本人后续博客。

阅读全文

1 0