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

CSS选择器要点笔记

2017-11-23 22:33 197 查看
一、CSS元素选择器

h1 {color:black;}
p {color:green;}


二、选择器分组

有时候多个元素都需要达成一种样式，就可以通过分组的形式设置，多个元素间通过“,”分隔：

h3, p{text-align:center; color: #fff; }


通配符选择器,可以使文档中每个元素都具备该样式：

*{
margin:0px;
text-align:center;
}


三、CSS类选择器：

在使用类选择器前，需要修改文档标记，然后通过“.类名”设置：

<html>
<head>
<style>
.setred {color:red;}
</style>
</head>
<body>
<h2 class="setred">这是一个红色字体的标题</h2>
<p class="setred">这是一段红色字体的段落。</p>
</body>
</html>


也可以结合元素选择器使用，这样只表示样式仅对该元素该类名的有效：

p.setred {color:red;}


*CSS多类选择器：

有时候文档的某个元素可能具备多个类值（即包含一个词列表，通过空格分隔）：

<p class="important warning">
This paragraph is a very important warning.
</p>
<p class="important">
This paragraph is very important.
</p>
<p class="warning">
This paragraph is a warning.
</p>


如果类名important的元素都需要是粗体,类名是warning的需要是斜体。而两者都是的需要是红色字体，则CSS设置如下：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning{color:red;}


四、ID选择器

<html>
<head>
<style>
#header {
font-weight:bold;
text-align:center;
color:red;
border:1px solid blue;
}
</style>
<body>
<div id="header">
我是头部区域.
</div>
</body>
</html>


与类不同，在一个文档中，ID只能唯一。而且对于ID选择器，不能使用词列表的方式。

五、属性选择器

属性选择器可以根据元素的属性名或属性值来选择元素。

1、根据属性名

如果希望选择带有某个属性的元素（而不管其属性值是什么），就可以如下使用属性选择器：

[title] {                  /*所有带有title属性的元素有效*/
color:red;
}
a[href] {
color:blue;　　　　 /*带有href属性的a标签元素有效*/
}


还可以根据多个属性进行选择，如下为把同时带有href和title属性的a标签元素文本设置为红色：

a[href][title] {
color:red;
}


2、根据属性值

a[href="http://www.sina.cn"] {
color:red;
}


同样也可以指定多个带有具体属性值的属性：

a[href="http://www.sina.cn"[title="新浪"] {
color:red;
}


根据部分属性值选择：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p[class~="important"]
{
color: red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>

<hr />

<h1>无法应用样式：</h1>
<p class="warning">This is a paragraph.</a>
</body>
</html>


六、后代选择器

后代选择器也称为包含选择器，可以选择作为某元素后代的元素来进行指定。

h1 p {             /*选择h1内部的p元素*/
color:red;
}


后代选择器也可以搭配类选择器、ID选择器等一起使用：

<html>
<head>
<style>
div p {border:1px solid pink;}
#div1 p{color:red;}
div #p3 {color:blue;}
#div3 .p3 {color:green;}
</style>
</head>
<body>
<div id="div1">
<p>第一个div内的段落。</p>
</div>
<div>
<p id="p3">第二个div内的段落。</p>
</div>
<div id="div3">
<p class="p3">第三个div内的段落。</p>
</div>
</body>
</html>


七、CSS子元素选择器

与后代选择器的区别是，子元素选择器只能选择某元素的子元素；而后代选择器可以选择不管隔了多少层的子孙元素。

子元素选择器通过">"来指定子元素。（中间可以使用空格）

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>


八、相邻兄弟选择器

兄弟选择器的使用条件是选择紧接在某一个元素之后的元素，且这两个元素必须有相同的父元素。

p + a{color:red;}


需要注意下例，说明“紧接”的正确理解，ul与ol元素是平行关系的（拥有同一个父元素），虽然ul中还包含了li元素(体现在html代码中为ul后面还有li元素)，但li元素是在ul内部的，还是属于ul元素的。因此这里ol是紧邻着ul的。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul + ol {border:1px solid red;}
li + li {font-weight:bold;}
</style>
</head>

<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>


结合其他选择器的应用：

div#container > div p + a {color:red;}


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#container > div p + a[title="Baidu"] {color:red;font-family:Verdana;}
</style>
</head>

<body>
<div id="container">
<div>
<p>紧接该段落的百度链接A的样式有效,B无效.</p>
<a href="http://www.baidu.com" title="Baidu">Baidu Link_A</a>
<a href="http://www.baidu.com" title="Baidu1">Baidu Link_B</a>
</div>
<div>
<p>紧接该段落的百度链接C、D的样式都无效.</p>
<a href="http://www.baidu.com" title="Baidu1">Baidu Link_C</a>
<a href="http://www.baidu.com" title="Baidu1">Baidu Link_D</a>
</div>

</div>
</body>
</html>


九、CSS伪类

1、锚伪类

<html>
<head>

<style type="text/css">
a:link {color: black}
a:visited {color: red}
a:hover {color: pink}
a:active {color: green}
</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>

</body>
</html>


2、:first-child伪类

该伪类可以用来指定作为第一个子元素的元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child {color:red;}
li:first-child {color:green;}
</style>
</head>

<body>
<div>
<p>这里的段落样式有效.</p>
<ul>
<li>Intert Key,其实第一个li总会生效</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>这里的段落样式无效。</p>
</div>

<p><b>注释：</b>必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。</p>
</body>

</html>


十、CSS伪元素

1、:first-line伪元素

为文本中的首行设置样式。该伪元素只能应用于块级元素。

p:first-line {
color: green;
}


2、:first-letter伪元素

为文本的首字母设置样式。

<html>
<head>
<style>
p {font-weight:normal;font-family:Verdana;font-size:18px;}
p:first-line{color:pink;font-weight:bold;}
p:first-letter{color:red;font-size:28px;}

</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!You can use the :first-line pseudo-element to add a special effect to the first line of a text!You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航