【HTML5学习笔记】16：CSS选择器上

来源：互联网发布：java排队叫号系统设计编辑：程序博客网时间：2024/05/30 04:29

CSS选择器即是定位到想要选择的元素，然后对其配置样式。目前已经有CSS3选择器了，不过使用较多的还是CSS1和CSS2，而CSS3用于扩展。

选择器分类：基本选择器、复合选择器、伪选择器(还分为伪元素和伪类)。

基本选择器

即使用简单且频率高的一些选择器。

1.通用选择器

匹配所有HTML元素，包括<html>和<body>元素。

}

2.元素选择器

只匹配某个元素标签。

元素名{

}

3.ID选择器

通过对元素设置全局属性id，然后用#id值匹配页面唯一元素。不应用一个id表示两个元素。

#具体id{

}

4.类选择器

通过对元素设置全局属性class，然后用.class值选择页面一个或多个元素。此外，如果要指定某个元素如p的bb属性，则在属性前打上元素名即可(p.bb)。另外，如果要对一个元素使用多个class，则class属性的值们用空格隔开即可。

.具体class{

}

5.属性选择器

直接通过两个中括号里面包括属性名即可，则有该属性的元素都被匹配。

[属性]{

}

注意几个不常用的，还有*=匹配属性中含有这部分串的，`~=当属性值有多个值且以空格分割时匹配其中的一个值，|=当属性值有多个值且以减号分割时匹配其中的一个值。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head><!-- 作为页面不可见内容，就算匹配到也没变化 --><title>CSS选择器 上</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"></head><body><p class="bb">这是一个段落(区块)</p><!-- 能换行的叫区块，不换行的叫内联 --><b id="abc">这是一个加粗(内联)</b><span>这里没有特殊格式(内联)</span><a href="http://www.baidu.com">百度</a><a href="javascript:void(0)">好搜</a><a href="http://www.360.cn">360</a><input type="text"><input type="password"><br><i lang="en-us">HTML5</i></body></html>

@charset "utf-8";/*通用选择器*/*{border: 0px solid red;}/*元素选择器*/p{color: blue;}/*id选择器*/#abc{color: green;}/*类选择器*/.bb{border: 2px solid black;}/*属性选择器*/[type]{border: solid black;}[type="password"]{background: blue;}[href^="http"]{/*匹配开头有http的*/color: red;}[href$=".cn"]{/*匹配以cn结尾的*/color: green;}[lang|="en"]{color: orange;}

运行结果：

复合选择器

将不同的选择器进行组合形成新的特定匹配。

1.分组选择器

多个通用选择器用逗号分隔。

元素1,元素2,...,元素n{

}

2.后代选择器(派生选择器)

选择前一个元素的以全部后元素为子元素的元素，且不在乎多层嵌套。

外元素内元素{

}

3.子选择器

类似于后代选择器，但是只能选择儿子标签，即在乎多层嵌套。

父元素>子元素{

}

4.相邻兄弟选择器

匹配和第一个元素相邻的第二个元素。

兄弟+相邻目标兄弟{

}

5.普通兄弟选择器

匹配和第一个元素相邻的所有第二个元素。

兄弟~普通目标兄弟{

}

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head><!-- 作为页面不可见内容，就算匹配到也没变化 --><title>CSS选择器 上</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"></head><body><p class="bb">这<span>是<b>一个</b></span>段落(区块)</p><!-- 能换行的叫区块，不换行的叫内联 --><b id="abc">这是一个加粗(内联)</b><span>这里没有特殊格式(内联)</span><a href="http://www.baidu.com">百度</a><a href="javascript:void(0)">好搜</a><a href="http://www.360.cn">360</a><input type="text"><input type="password"><br><i lang="en-us">HTML5</i></body></html>

@charset "utf-8";/*复合选择器*/[href^="http"],i{color: red;}/*后代选择器*/p b{color: green;}/*子选择器*/p>span{border: 1px solid black;}/*相邻兄弟选择器*/span+a{border: 1px solid blue;}/*普通兄弟选择器*/span~a{background: pink;}

运行结果：

伪选择器

分为伪元素选择器(前置两个冒号)和伪类选择器(前置一个冒号)，本节只学习伪元素选择器。

1.块级首行选择器

区块的首行都会被匹配，而对内联没有效果(注意有时内联直接在body里也被视为body标签作区块用)。可以前写一个区块元素表示只对该元素的首行有效果。

::first-line{

}

2.块级首字母选择器

区块的首字会被匹配，而对内联没有效果(注意有时内联直接在body里也被视为body标签作区块用)。可以前写一个区块元素表示只对该元素的首字母有效果。

::first-letter{

}

3.文本前插入选择器

在文本前插入一段文本，配合content使用。可以前写一个区块元素表示只对该元素有效果。

::before{

content: “要头插的文本”;

}

4.文本后插入选择器

在文本后插入一段文本，配合content使用。可以前写一个区块元素表示只对该元素有效果。

::after{

content: “要尾接的文本”;

}

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head><!-- 作为页面不可见内容，就算匹配到也没变化 --><title>CSS选择器 上</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"></head><body><p>等我回到恒为分化为奇偶及复合物咖啡壶看和别的可分开开你还看绝大部分课可不会看到风味咖啡的纨绔访问好的我快递费未必能你打开华北电力可我都不玩我可能都不能懒得玩往年的的呢问问看盯了我问了访问积大河无可厚非带我飞但和我回复热乎饭狂热空间看哈佛法和放假诶见范围和和队列未被访问绯红女巫绝复合物我理发剪我活了绯红女巫防护网烦不烦问客服那我就范例位访问呢分的慰问费为奇偶就蝶舞飞花王福华但和我而返回那我发进我就</p><span>等我回到恒为分化为奇偶及复合物咖啡壶看和别的可分开开你还看绝大部分课可不会看到风味咖啡的纨绔访问好的我快递费未必能你打开华北电力可我都不玩我可能都不能懒得玩往年的的呢问问看盯了我问了访问积大河无可厚非带我飞但和我回复热乎饭狂热空间看哈佛法和放假诶见范围和和队列未被访问绯红女巫绝复合物我理发剪我活了绯红女巫防护网烦不烦问客服那我就范例位访问呢分的慰问费为奇偶就蝶舞飞花王福华但和我而返回那我发进我就</span><dir>this is...</dir><a href="http://www.baidu.com">百度</a></body></html>

@charset "utf-8";/*块级首行选择器*/p::first-line{color: red;}/*块级首字母选择器*/::first-letter{color: blue;}/*文本前插入选择器*/a::before{content: "点击";}/*文本后插入选择器*/a::after{content: "链接";}

运行结果：

阅读全文

0 0

【HTML5学习笔记】16：CSS选择器 上

【HTML5学习笔记】16：CSS选择器上