03. CSS 选择器

时间  2019-12-01
标签 css 选择器 栏目 CSS 繁體版
原文   原文链接

元素选择器

类选择器 ==> 最经常使用

id选择器 ==> 不多使用，通常用于顶级框架的名称

通配符选择器

交集选择器

并集选择器

后代选择器

子元素选择器

相邻兄弟选择器

属性选择器

伪类选择器

伪元素选择器

CSS 选择器权值

若是要给 HTML 元素设置 CSS 样式，则须要在元素中设置 "id" 和 "class" 属性，该属性用做选择器。

1、元素选择器

标签{ 
    属性:值;
}

2、类选择器

class 选择器用于描述一组元素的样式，也叫作类选择器，class 选择器有别于 id 选择器，class 能够在多个元素中使用，而且一个元素也能够指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。能够设置全部带有指定 class 的 HTML 元素，也能够指定特定的 HTML 元素使用 class。

注意：类名的第一个字符也不能使用数字。php

  • 单类名调用：class="类名"；css

  • 多类名调用：class="类名1 类名2 ..."；html

实例：

<!DOCTYPE html>
<html>
<head>
<style>
.center{
    text-align:center;
}
.col{
    color:red;
}
.font{
    font-size:18px;
    font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center font">我是另外一个段落。</p>
</body>
</html>

实例：全部的 p 元素使用 class="center"，让该元素的文本居中

<!DOCTYPE html>
<html>
<head>
<style>
.center{
    color:blue;
}
p.center{
    text-align:center;
}
p.col{
    color:red;
}
.font{
    font-size:18px;
    font-weight:bold;
    font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center col">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另外一个段落。</p>
<h2 class="center">h2 标题</h2>
</body>
</html>

3、id选择器

id 选择器能够为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证同样具备惟一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。

注意： id 属性不能以数字开头。css3

#id{
    属性:值;
}

4、通配符选择器

*{                
    属性:值;
}
  • 做用域：整个HTML页面

5、交集选择器

选择器1选择器2{
    属性:值;
}

6、并集选择器

  • 多个选择器具备相一样式
选择器1,选择器2{
        属性:值;
    }
    
    // h1, h2, h3, h4, h5, h6, p{color:red;}

7、后代选择器

先代选择器 后代选择器{
    属性:值;
}
  • 做用于先代元素内的[全部的后代元素]；

8、子元素选择器

父选择器 > 子选择器{
    属性:值;
}

  • 只做用于父元素内的[直接子元素]；浏览器

  • 若是不但愿选择任意的后代元素，而是只选择某个元素的子元素，那么就使用子元素选择器框架

实例：把 div 元素中全部直接子元素 a 的字体设置为红色

<head>
<style>
div>a{
    color:red;
}
</style>
</head>
<body>
<div>
    <a href="">div 中第一个子元素 a，显示为红色</a>
    <p>div 中第二个子元素 p<br/>
        <a>p 元素的子元素 a，该元素是 div 元素的孙元素</a>
    </p>
    <a href="">div 中第三个子元素 a，显示为红色</a>
</div>
</body>

总结：> 做用于元素的第一代后代，空格 做用于元素的全部后代

9、相邻兄弟选择器

伯选择器 + 仲选择器{
    属性:值;
}

  • 做用于紧接在伯元素后的[仲元素]；字体

  • 若是须要选择紧接在另外一个元素后的元素，并且两者有相同的父元素，就可使用相邻兄弟选择器网站

实例：选取了全部位于 div 元素后的第一个 p 元素：div+p

<head>
<style>
div+p{
    background-color:red;
}
</style>
</head>
<body>
<p>body 的第一个子元素 p</p>
<div>body 的第二个子元素 div
    <p>div 中第一个子元素 p</p>
    <div>
        <p>div 中第二个子元素 div 的子元素 p</p>
    </div>
    <p>div 中第三个子元素 p，是 div 的相邻兄弟元素，相同父级 div</p>    //红
</div>
<p>body 的第三个子元素 p，是 div 的相邻兄弟元素，相同父级 body</p>  // 红
<p>body 的第四个子元素 p，是 div 的普通兄弟元素</p>
</div>
</body>

实例：选取了全部 div 元素的全部相邻兄弟元素 p : div~p

<head>
<style>
div~p{
    background-color:red;
}
</style>
</head>
<body>
<p>body 的第一个子元素 p</p>
<div>body 的第二个子元素 div
    <div>div 元素下的第一个子元素 div</div>
    <p>div 的相邻兄弟元素</p>
    <p>div 的普通兄弟元素</p>
    <p>div 的普通兄弟元素</p>
</div>
<p>body 下 div 的相邻兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
</body>

10、属性选择器

[属性]{
    属性:值;
}

实例：把全部带有 title 属性的元素的字体设置为红色：

<head>
<style>
[title]{
    color:red;
}
</style>
</head>
<body>
<h1>h1 标题不带有 title 属性</h1>
<h2 title="标题">h2 能够设置样式</h2>
<a href="#" title="连接">超连接能够设置样式</a>
</body>
标签[属性=值]{
    属性:值;
}

实例：把全部 title='Hello' 的元素的字体设置为蓝色：

<head>
<style>
[title=Hello]{
    color:blue;
}
</style>
</head>
<body>
<h1 title="Hello world">h1 标题 title="Hello world"</h1>
<h2 title="Hello">h2 能够设置样式</h2>
<a href="#" title="Hello">超连接能够设置样式</a>
</body>

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用

<head>
<style>
input[type="text"]{
    width:150px;
    display:block;
    margin-bottom:5px;
    background-color:yellow;
}
input[type="button"]{
    width:120px;
    margin-top:5px;
    background-color:green;
}
</style>
</head>
<body>
<form name="input" action="demo.php" method="get">
    用户名：<input type="text" name="user" placeholder="请输入登陆名">
    昵　称：<input type="text" name="name" placeholder="请输入角色名">
    <input type="button" value="查询">
</form>
</body>

11、伪类选择器

选择器:伪类{
    属性:值;
}

(1) <a>超连接伪类：

  • a:link：未访问的连接；url

  • a:visited：已访问的连接；spa

  • a:hover：鼠标移动到连接；

  • a:active：鼠标点击时的链接；

当为连接的不一样状态设置样式时，必须遵循如下顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited 后面。

  • a:active 必须跟在 a:hover后面。

伪类能够与 CSS 类配合使用 ：选择器.class:伪类{attr:value;}

实例：设置鼠标移动到的连接为红色

<head>
<style>
a.tint:hover{
    color:red;
}

</style>
</head>
<body>
<a href="#">超连接</a>
<a class="tint" href="#">超连接</a>
</body>

IE6不支持a之外其它任何标签的伪类；

IE6以上的浏览器支持全部标签的hover伪类；

(2) 位置结构伪类：

  • :first-child：第一个子元素；

  • :last-child：最后一个子元素；

  • :nth-child(n)：第n个元素（n=1,2,3...）；

  • :nth-last-child(n)：倒数第n个元素（n=1,2,3...）;

  • [n=odd：奇数 | n=even：偶数]

注意：

  • 不是第一个HTML标签，而是第一个HTML元素
  • html元素：文本，图像，连接；

实例：选择做为任何元素的第一个子元素 p。选择器使用 p:first-child

<head>
<style>
p:first-child{
    font-weight:bold;
    color:blue;
}
</style>
</head>
<body>
<p>第一个 p 元素</p>    // 蓝
<p>第二个 p 元素</p>
<p>第三个 p 元素</p>
</body>

(3) 【CSS3】目标伪类：

/*:target 选择器用于选取当前活动的目标元素*/
:target{
    属性:值;
}

12、伪元素选择器

标签::伪元素{
    属性:值;
}
  • 伪元素能够与 CSS 类配合使用

伪元素：

  • :first-line：向文本的首行设置特殊样式；

    • 注意：:first-line 伪元素只能用于块级元素，下面的属性可应用于 :first-line 伪元素

      ①、font

      ②、color

      ③、background

      ④、line-height

      ⑤、clear

      ⑥、vertical-align

      ⑦：text-decoration

      ⑧：text-transform

      ⑨、letter-spacing

      ⑩、word-spacing

  • :first-letter：向文本的首字母设置特殊样式；

    • 注意：:first-letter 伪元素只能用于块级元素，下面的属性可应用于 "first-letter" 伪元素

      ①、font、color、background、line-height、clear、vertical-align (only if "float" is "none")、text-decoration、text-transform

      　　　　以上8个属性和 :first-line 伪元素相同，除了 letter-spacing 和 word-spacing 以外。

      ②、float

      ③、margin

      ④、padding

      ⑤、border

  • :before：在标签以前添加 content:新内容；

标签::before{
    content:新内容;
    // constent:none 默认
    // constent:'string' 插入文本
    // constent:attr(属性) 插入标签属性值
    // constent:url(路径) 插入一个外部资源
}
  • :after：在标签以后添加 content:新内容；
标签::after{
        content:新内容;
    }
  • :selection：选中区域；

注意：多重伪元素便可以结合多个伪元素来使用

实例：段落的第一个字母将显示为红色，其字体大小为 20px。第一行中的其他文本将为蓝色，并带有下划线装饰效果。段落中的其他文本将以默认字体大小和颜色显示

<head>
<style>
p:first-letter{
    color:red;
    font-size:20px;
}
p:first-line{
    color:blue;
    text-decoration:underline;
}
</style>
</head>
<body>
<h1>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</h1>
<p>The moon belongs to everyone，best things in life they're free，stars belong to everyone，they cling there for you and for me.Love can come to everyone，best things in life they're free，all of the good things，every one of the better things.</p>
<p>The best things in life are free, and the second best things are very, very expensive.</p>
</body>

十3、CSS 选择器权值

有时候咱们为同一个元素设置了不一样的 CSS 样式代码，浏览器会根据权值来判断使用哪一种 CSS 样式，哪一种样式权值高就使用该样式，因此理解选择器的特殊性很重要。

权值就是所用选择器的特殊性，浏览器会根据这种特殊性来决定所定义的样式规则的次序，具备更特殊选择器的规则优先于具备通常选择器的规则，若是两个规则的特殊性相同，那么后定义的规则优先，这一点和 JS 相同，即后面定义的会覆盖前边定义的。

覆盖也就是 CSS 层叠，当有相同权重的样式存在时，会根据这些 CSS 样式的先后顺序来决定，处于最后面的 CSS 样式会被应用。那么对于 CSS 样式优先级的顺序就不难理解了。

特殊性能够分为4个等级，每一个等级表明一类选择器：

①、表明内联样式，如 <p style="color:red"></p>，权值为 1000。

②、表明 ID 选择器，如 #content，权值为 100。

③、表明类，类选择器以及伪类和属性选择器，如 .main，权值为 10。

④、表明类型选择器，标签和伪元素选择器，如 div p，权值为 1。

通配符选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，因此他们的权值都为 0。

注意：继承也有权值的，可是继承的权值是最低的。

每一个等级的值为其所表明的选择器的个数乘以这一等级的权值（好比 ④ 中例子的权值为 2），最后把全部等级的值相加得出选择器的特殊值。比较同一级别的个数，数量多的优先级高，若是相同即比较下一级别的个数 。

权值的规则：选择器的权值相加，大的优先；若是权值相同，后定义的优先 。

权值的大小跟选择器的类型和数量有关，样式的优先级跟样式的定义顺序有关。

p{ /* 权值为 1 */
    color:red;
}
p span{ /* 权值为 1+1=2 */
    color:green;
}
.main{ /* 权值为 10*/
    font-size:14px;
}
div p .main{ /* 权值为 1+1+10=12 */
    color:purple;
}
#footer{ /* 权值为 100 */
    color:gray;
}
#footer .note p{ /* 权值为 100+10+1=111 */
    color:white;
}

最高权值

在实际的网站开发中，有些特殊的状况须要为某些样式设置具备最高权值，这时候咱们可使用 !important 来解决

<head>
<style>
p{
    color:red!important;    // 权值最高，p 元素显示红色
}
.demo{
    color:green;
}
</style>
</head>
<body>
<p class="demo">在实际的网站开发中，有些特殊的状况须要为某些样式设置具备最高权值，这时候咱们可使用 !important 来解决。</p>
</body>

上面的代码，使用标签选择器设置了段落字体为红色，再使用类选择定义了段落字体为绿色，标签选择器的权值为 1，类选择器的权值为 10，由于类选择器的权值更高，最终段落显示为绿色，可是咱们使用了 important，这时段落中的文字就显示为红色。

当网页不设置 CSS 样式时，浏览器会按照本身的一套样式来显示网页。而且用户也能够在浏览器中设置本身习惯的样式，好比有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时样式优先级为：浏览器默认的样式 < 网页的样式 < 用户本身设置的样式，但 !important 优先级样式是个例外，权值高于用户本身设置的样式。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程