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

css各类选择器

2017-07-24 12:04 190 查看
1.id选择器

给某一个标签一个id,之后可以通过id来更改样式。

<p id = "hello">hello css</p>


#hello{
color:red;
}


那么hello css的文本会是红色的。

2.id选择器与派生选择器一起用

<p id = "hello">hello css<a href="http://www.zhihu.com">打开知乎</a></p>


#hello a{
color:red;
}


发现只有a标签变为红色。

3. 类选择器

<p class = "pid">this is p标签</p>


.pid{
color:royalblue;
}


p标签颜色变化。

4. 类选择器与派生选择器一起用

<p class = "pid">this is p标签<br><a>this is a标签</a></p>


.pid a{
color:royalblue;
}


a标签被改变。

5. 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
[title]{
color:blue;
}
[title = te]
{
color:red;
}
</style>
</head>
<body>
<p title = "te">this is p标签<br><a>this is a标签</a></p>
<h1 title = "k">this is h1 标签</h1>
</body>
</html>


选择器如果不指定其值,那么标签中的值怎么样都可以,如果选了指定的值,那么只能一样才会有效果。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css