您的位置：首页 > Web前端 > CSS

神奇的CSS3选择器

2015-07-16 17:12 746 查看

话说园子里也混迹多年了，但是基本没写过blog，写点基础的，那就从css3选择器开始吧。

　Css3选择器

先说下，为什么提倡使用选择器。

使用选择器可以将样式与元素直接绑定起来，在样式表中什么样式与什么元素匹配一目了然，修改起来也很方便。

减少样式表的代码量。

属性选择器

　　1.[att*=val]属性选择器

　　意义：表示元素用att表示的属性的属性值包含用val表示的字符，则该元素使用这个样式

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
[id*=demo]
{
width:100px;
height:100px;
background-color:#000099;
}

</style>
</head>
<body>
<divid="demo"></div>
</body>
</html>

　　2.[att^=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串开头，则该元素使用这个样式。

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
[id^=demo]
{
width:100px;
height:100px;
background-color:#000099;
margin:10px;
}

</style>
</head>
<body>
<divid="demo"></div>
<divid="demo1"></div>
</body>
</html>

　　3.[att$=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串结尾，则该元素使用这个样式

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

[id$=o]

{

width:100px;

height:100px;

background-color:#000099;

margin:10px;

}

</style>

</head>

<body>

<divid="demo"></div>

<divid="demooo"></div>

</body>

</html>

　　结构性伪类选择器

　　伪类选择器是指已经定义好的选择器，不能随便起名。

　　例如：a:link,a:visited,a:hover,a:active.

　　伪元素选择器是指已经定义好的为元素使用的选择器。

first-line伪元素选择器

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

p:first-line

{

color:red;

}

</style>

</head>

<body>

<p>

helloworld

<br/>

你好

</p>

</body>

</html>

2.first-letter伪元素选择器

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

p:first-letter

{

color:red;

}

</style>

</head>

<body>

<p>

helloworld

</p>

<p>你好</p>

</body>

</html>

befor伪元素选择器

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

li:before

{

content:'*';

}

</style>

</head>

<body>

<ul>

<li>demo1</li>

<li>demo1</li>

<li>demo1</li>

<li>demo1</li>

<li>demo1</li>

</ul>

</body>

</html>

after伪元素选择器

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

li:after

{

content:'*';

}

</style>

</head>

<body>

<ul>

<li>demo1</li>

<li>demo1</li>

<li>demo1</li>

<li>demo1</li>

<li>demo1</li>

</ul>

</body>

</html>

　　root选择器

　　root选择器将样式绑定到页面的根元素。在使用：root与body元素的背景时，根据不同的条件，显示效果不同

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

:root

{

background-color:#003300;

}

body

{

background-color:yellow;

}

</style>

</head>

<body>

<p>你好</p>

</body>

</html>

　　not选择器

　　排除结构元素下面子结构元素，使他不使用该元素

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

body*:not(h1)

{

background-color:yellow;

}

</style>

</head>

<body>

<h1>大家好</h1>

<p>你好</p>

</body>

</html>

　　empty选择器

　　当元素内容为空时使用的样式。

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

td:empty

{

background-color:yellow;

}

</style>

</head>

<body>

<tableborder="1">

<tr>

<tdwidth="100px">1</td>

<tdwidth="100px">2</td>

<tdwidth="100px"></td>

</tr>

</table>

</body>

</html>

　　target选择器

　　使用target选择器给页面中的target元素使用样式

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

:target

{

background-color:yellow;

}

</style>

</head>

<body>

<tableborder="1">

<ahref="#text3">示例1</a>

<divid="text1">

<h1>你好</h1>

<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

</div>

<divid="text2">

<h1>你好</h1>

<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

</div>

<divid="text3">

<h1>你好</h1>

<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

</div>

</table>

</body>

</html>

　　first-child、last-child选择器

　　指定第一个子元素和最后一个子元素的样式

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

li:first-child

{

background-color:yellow;

}

li:last-child

{

background-color:#009999;

}

</style>

</head>

<body>

<tableborder="1">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>1</li>

</ul>

</table>

</body>

</html>

　　nth-child、nth-last-child选择器

　　针对父元素中某个指定序号的子元素来指定样式。

　　也可以使用Nth-child(even)对偶数子元素指定样式，Nth-child(odd)对奇数元素指定样式

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

li:nth-child(2)

{

background-color:yellow;

}

li:nth-last-child(2)

{

background-color:#009999;

}

</style>

</head>

<body>

<tableborder="1">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>1</li>

</ul>

</table>

</body>

</html>

　　nth-of-typenth-last-of-type选择器

　　这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷，这两个选择器只针对同类元素指定样式。

　　UI元素状态选择器

　　E:horver,E:active,E:focus选择器

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

input[type="text"]:hover

{

background-color:yellow;

}

input[type="text"]:focus

{

background-color:green;

}

input[type="text"]:active

{

background-color:red;

}

</style>

</head>

<body>

<inputtype="text"name="name">

</body>

</html>

　　E:enabled,E:disabled,E:read-only,E:read-write选择器

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

input[type="text"]:disabled

{

background-color:green;

}

input[type="text"]:read-only

{

background-color:darkgrey;

}

</style>

</head>

<body>

<inputtype="text"disabled>

<br>

<inputtype="text">

<br>

<br>

<inputtype="text"readonly="readonly">

</body>

</html>

　　E:checked、E:default选择器

　　E:checked指定复选框选取时的样式

　　E:default指定默认选取框的样式

　　

E::selection选择器

　　指定元素处于选中状态时的样式

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

p::selection

{

background-color:goldenrod;

}

</style>

</head>

<body>

<p>测试测试</p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航