css3高級挑选器应用方式

2020-10-22 09:45 jianzhan

css3特性挑选器

css3之特性挑选器,在其中包含:


拷贝编码
编码以下:

1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]

下面我将用案例演试它们的用法

css编码:

拷贝编码
编码以下:

<style type="text/css">
p[id=p_name] {color:red;}
p[id*=p] {border:1px solid #DDD;}
p[id^=start] {font-weight:700}
p[id$=end] {background:yellow}
</style>

实际效果如图1:

构造性伪类挑选器

1.伪类挑选器

在讲伪类挑选器以前,我先说下类挑选器,类挑选器的应用以下所示:


拷贝编码
编码以下:

<style type="text/css">
p.p_test {color:#F60;}
</style>

伪类挑选器,大伙儿看到这个术语并不是很懂,楼主跟你们1样,可是看到下面的示例,立马了解:


拷贝编码
编码以下:

<style type="text/css">
a:link {color:#F00; text-decoration:none;}
a:visited {color:#0F0; text-decoration:none;}
a:hover {color:#F0F; text-decoration:underline;}
a:active {color:#00F; text-decoration:none;}
</style>

看到这大伙儿猛然了解了吧,在css中大家最常见的伪类挑选器是应用在a元素上。那末伪类挑选器与类挑选器额差别是,类挑选器能够随意起姓名如“p.right”,
“p.left”;可是伪类挑选器是css中早已界定好的挑选器,不可以随意起名。

2.伪元素挑选器

伪元素挑选器是指其实不是对真实的元素应用的挑选器,而是对于css中早已界定好的伪元素应用的挑选器。

在css中有下面4个伪元素挑选器:

2.1.first-line伪元素挑选器(它用于某个元素中的第1写作字应用款式,只能与块级元素关系)

示比如下:


拷贝编码
编码以下:

<html>
<head>
<style type="text/css">
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head></p> <p><body>
<p>
This is a text.<br/>
That is a text.
</p>
</body>
</html>


2.2.first-letter伪元素挑选器(向文字的第1个字母加上独特款式,在 CSS2.1 以前,:first-letter 只能与块级元素关系。CSS2.1 扩张了这个范畴,能够与任
何元素关系)

示比如下:


拷贝编码
编码以下:

<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head></p> <p><body>
<p>This is a text.</p>
</body>
</html>

2.3.before伪元素挑选器(在元素以前加上內容)

这个伪元素容许创作人员在元素內容的最前面插进转化成內容。默认设置地,这个伪元素是行内元素,但是可使用特性 display 更改这1点.

示比如下:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
li {list-style:none;}
li:before {content:'■'}
</style>
</head>
<body>
<ul>
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
</body>
</html>

2.4.after伪元素挑选器(在元素以后加上內容)

示比如下:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
li {list-style:none;}
li:after {content:'--检测文本';color:red}
</style>
</head>
<body>
<ul>
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
</body>
</html>

3. 4个基础构造性伪类挑选器

3.1.root挑选器(将款式关联到网页页面的根元素中)

所谓根元素,是指坐落于文本文档树的最高层构造的元素,在html网页页面上便是指包括全部网页页面的“html”一部分.

示比如下:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
:root {background:yellow;}
body {background:red;}
</style>
</head>
<body>
<ul>
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
</body>
</html>

ps:在应用款式特定root元素与body元素的情况时,依据状况不一样的特定标准,情况色的显示信息范畴会有一定的转变,如上面的编码不应用root挑选器来特定root元素
的情况色,只特定body元素的情况色,则全部网页页面就变为鲜红色的了。

3.2.not挑选器(想对某个构造应用款式,可是想清除这个构造元素下面的子构造元素,让它不应用这个款式,就应用not挑选器)

示比如下:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
body *:not(p) {color:blue;}
</style>
</head>
<body>
<p>我是清除元素</p>
<ul>
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
</body>
</html>

3.3.empty挑选器(特定当元素的內容为空时应用款式)

示比如下:

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
table td {padding:10px;}
table td:empty {background:#DDD}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</p> <p></tr>
<tr>
<td>4</td>
<td>5</td>
<td></td>
</tr>
</p> <p></table>
</body>
</html>

3.4.target挑选器(应用target挑选器来对网页页面中的某个target元素[该元素的id被作为网页页面的超连接类应用]特定款式,该款式仅有在客户点一下了网页页面中的超连接

,而且自动跳转到target元素后起功效)

示比如下:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
:target {background:yellow;}
</style>
</head>
<body>
<a href="#div1">联接1</a>
<a href="#div2">联接1</a>
<div class="test" id="div1">內容1</div>
<div id="div2">內容2</p> <p></div>
</body>
</html>

4. 下面接着说其它几个挑选器

first-child,last-child,nth-child,nth-last-child这几个挑选器可以对于1个父元素中的第1个,最终1个,特定编号的子元素,乃至第偶数个,第单数
个子元素开展款式特定。

4.1.first-child与last-child的应用,first-child在ie7刚开始被适用,其它当代访问器都适用


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
.ul1 li:first-child {background:yellow;}
.ul1 li:last-child {background:red;}
</style>
</head>
<body>
<ul class="ul1">
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
</body>
</html>

4.2.nth-child(表明第几个元素),应用以下:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
.ul1 li:nth-child(2) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
</body>
</html>

4.3.nth-last-child(表明倒数第几个元素),应用以下:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
.ul1 li:nth-last-child(1) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
</body>
</html>

ps:nth-child与nth-last-child的编号是从1刚开始,自然还可以是重要词或公式。;除对特定编号的子元素应用款式之外,还能够对某个父元素中的全部第奇
数个子元素或第偶数个子元素应用款式。

4.3.1 nth-child 对某个父元素中的全部第单数个子元素的款式设定


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
.ul1 li:nth-child(odd) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
<li>新项目4</li>
</p> <p><li>新项目5</li>
<li>新项目6</li>
<li>新项目7</li>
</ul>
</body>
</html>

4.3.2 nth-last-child 对某个父元素中的全部倒数上去的第偶数个子元素的款式设定


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
.ul1 li:nth-last-child(even) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
<li>新项目4</li>
</p> <p><li>新项目5</li>
<li>新项目6</li>
<li>新项目7</li>
</ul>
</body>
</html>

4.4.nth-of-type(配对属于父元素的特殊种类的第 N 个子元素的每一个元素)

4.5.nth-last-of-type(配属于父元素的特殊种类的第 N 个子元素的每一个元素,从最终1个子元素刚开始计数)

好,既然了解她们的用途,那大家立即看个列子:


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
h2:nth-of-type(odd) {background:red;}
h2:nth-last-of-type(even) {background:green;}
</style>
</head>
<body>
<h2>题目1</h2>
<p>內容1</p>
<h2>题目2</h2>
<p>內容2</p>
<h2>题目3</h2>
<p>內容3</p>
</body>
</html>

5.only-child(配对属于其父元素的唯1子元素的每一个元素)

实际上“:nth-child(1):nth-last-child(1)”的融合用法


拷贝编码
编码以下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF⑻">
<title> 挑选器 </title>
<style type="text/css">
div p:only-child {background:red;}
</style>
</head>
<body>
<div>
<p>孩子1</p>
</div>
<div>
<p>孩子1</p>
<p>孩子2</p>
</div>
<div>
<p>孩子1</p>
<p>孩子2</p>
</p> <p><p>孩子3</p>
</div>
</body>
</html>

上面说了那末多的css挑选器的示例应用,有这些挑选器能够大力度的提升开发设计撰写或改动款式表是的工作中高效率,我实际上1直希望应用这些css挑选器,可是有IE
在基本上在pc上是不可以应用这些高級的挑选器,还好挪动端访问器适用的非常好。好啦,这些也只是css3的1一部分挑选器,下一次我可能列出其余的一部分,大伙儿想知
道还可以免费下载css3手册先1睹为快!