简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS入门之选择器
Blogger Information
Blog 6
fans 0
comment 0
visits 4136
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS入门之选择器
若水的博客
Original
614 people have browsed it

一、元素选择器

例： h1{}. a{}等

h1{  color: cadetblue;  }

二、选择器分组

1、相同元素的可以向下面的写法进行写

例:

h1,h2,h3,h4{
  color: cadetblue;
}

2、通配符    *

*{  color: cadetblue;}

没有特定元素的设置,都会发生颜色的转换

如果想单独一些不一样可以直接在后面进行单独选择进行覆盖就好了。

一般使用通配符的时候就是设置整个页面的那边据和外边距。用于初始化样式。

三、类选择器

1、类选择器允许以一种独立与文档元素的方式来制定样式

例如: .class{}(注意是点开头的哦,这是类选择器的标志,点后面是属性名,大括号里面就是具体的设置)

HTML代码：

<div class="div">
    php中文网
</div>

CSS代码：

.div{color: cadetblue;}

2、类选择器结合元素选择器来使用

例：

HTML代码：

<h1 class="div">php中文网</h1>

CSS代码：

h1.div{color: cadetblue;}

这样在类选择器前面加了元素描述以后,这个.div 就只会对 h1 起作用.

3、多类选择器

例：

HTML代码：、

<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p1 p2">php中文网</p>

CSS代码：

.p1{color:#006;}
.p2{font-size:30px;}
.p1.p2{font-style:italic;}

最下面的.p1.p2会继承前面.P1.P2的属性，并且加入新的.p1.p2属性

四、ID选择器

id 选择器的引入是用"#",就和类选择器的"."是一样的效果.示例:#div{} 

跟类选择器的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

3、ID选择器的名字只能是唯一值，而类选择器可以重复名字。

五、属性选择器

格式:[]{;}

对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

例：[title]{color:red;}

<html>
<head>
<style type="text/css">
[title]   <!--注意这里的title的属性，如果改变将改变下面的显示>
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="php" href="http://php.cn">php中文网</a>
</body>
</html>

上面的title值可以进行指定样式输出，比如title="php"那么title="Hello world"的样式将不会被改变。

如果title~=Hello   可以检测有空格的属性值，可以选择多个值

如果title|=Hello  选择只有Hello的值

六、包含（后代）选择器和子选择器

1、包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}

选择所有span

2、子选择器用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}

只选择food下的第一代元素，下面的二代元素不会进行选择

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择

七、派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

CSS代码：

li strong{ color: red;}

HTML代码：

   <body>
        <p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
        <u1>
            <li><strong>我是红色，这是因为 strong 元素位于 li 元素内。</strong></li>
        </u1>

在 css 中定义的 li strong 的样式，只会影响上面 html 文件中的<li><strong>,而不会影响<p><strong>中的内容

注意：成对标签<li><strong></strong></li>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！