css 选择器

时间 2019-11-30

标签 css 选择器栏目 CSS 繁體版

原文原文链接

一基本选择器

#一、做用：
根据指定的id名称，在当前界面中找到对应的惟一一个的标签，而后设置属性

#二、格式
id名称 {
    属性：值;
}

#三、注意点：
1、在企业开发中若是仅仅只是为了设置样式，一般不会使用id，在前端开发中id一般是留给js使用的
二、每一个标签均可以设置惟一一个id，id就至关于人/标签的身份证，所以在同一界面内id毫不能重复
三、引用id必定要加#
四、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            color: aqua;
        }
        #p2 {color: blueviolet}

        #p3 {color: blue}
        #p4 {color:salmon}
    </style>
</head>
<body>

<h1>天净沙·秋思</h1>
<p id="p1">锦瑟无故五十弦，一弦一柱思华年。</p>
<p id="p2">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>
<p id="p3">沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p id="p4">此情可待成追忆，只是当时已惘然。</p>
</body>
</html>

实例

二、类选择器css

#一、做用：根据指定的类名称，在当前界面中找到对应的标签，而后设置属性

#二、格式：
.类名称 {
    属性：值;
}
#3 class 能够选择多个样式一块儿使用。 id只能选择一个样式。

#4、注意点：
1、类名就是专门用来给某个特定的标签设置样式的
二、每一个标签均可以设置一个或多个class（空格分隔），class就至关于人/标签的名称，所以同一界面内class能够重复
3、引用class必定要加点.
四、类名的命名规则与id的命名规则相同

第一行与第三行的颜色都是红色
第一行与第二行的字体大小都是50px
第二行与第三行内容有个下划线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }

    </style>
</head>

<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>

</html>

实例

三、标签选择器html

#一、做用：根据指定的标签名称，在当前界面中找到全部该名称的标签，而后设置属性

#二、格式：
标签名称 {
    属性：值;
}

#三、注意点：
1、只要是HTML的标签都能当作标签选择器
2、标签选择器选中的是当前界面中的全部标签,而不能单独选中某一标签
三、标签选择器，不管嵌套多少层都能选中
4.head里面写的是P标签那body里面全部的p标签都是须要使用这种的，你若是本身指定了，那就按照本身指定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>EGON美丽的外表下其实隐藏着一颗骚动的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>这颗心叫作七巧玲珑心，男人吃了会流泪，女人吃了会怀孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>

View Code

四、通配符选择器前端

#一、做用：选择全部标签

#二、格式：
* {
    属性：值；
}

#三、注意点：
1、在企业开发中通常不会使用通配符选择器
    理由是：
    因为通配符选择器是设置界面上全部的标签的属性，
    因此在设置以前会遍历全部的标签
    若是当前界面上的标签比较多，那么性能就会比较差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是标题</h1>
    <p >我是段落</p>
    <a href="#">我是超连接</a>
</body>
</html>

View Code

二后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

儿子选择器

/*选择全部父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

/*选择全部紧接着<div>元素以后的<p>元素*/
div+p {
  margin: 5px;
}

弟弟选择器

/*i1后面全部的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

分组和嵌套

分组

当多个元素的样式相同的时候，咱们没有必要重复地为每一个元素都设置样式，咱们能够经过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。浏览器

例如：

div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。ide

一般，咱们会分两行来写，更清晰:

div,
p {
  color: red;
}

嵌套

多种选择器能够混合起来使用，好比：.c1类内部全部p标签设置字体颜色为红色。性能

.c1 p {
  color: red;
}

伪类选择器

/* 未访问的连接 */
a:link {
  color: #FF0000
}

/* 已访问的连接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到连接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的连接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

first-letter

经常使用的给首字母设置特殊样式：字体

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一个<p>元素以前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一个<p>元素以后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

选择器的优先级

CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它容许样式不只能够应用于某个特定的元素，还能够应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。spa

body {
  color: red;
}

此时页面上全部标签都会继承body的字体颜色。然而CSS继承性的权重是很是低的，是比普通元素的权重还要低的0。code

咱们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。htm

p {
  color: green;
}

此外，继承是CSS重要的一部分，咱们甚至不用去考虑它为何可以这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

选择器的优先级

咱们上面学了不少的选择器，也就是说在一个HTML页面中有不少种方式找到一个元素而且为其设置样式，那浏览器根据什么来决定应该应用哪一个样式呢？

实际上是按照不一样选择器的权重来决定的，具体的选择器权重计算方式以下图：

除此以外还能够经过添加 !import方式来强制让样式生效，但并不推荐使用。由于若是过多的使用!import会使样式文件混乱不易维护。

css 选择器

一 基本选择器

二 后代选择器

儿子选择器

毗邻选择器

弟弟选择器

属性选择器

分组和嵌套

分组

嵌套

伪类选择器

伪元素选择器

first-letter

before

after

选择器的优先级

CSS继承

选择器的优先级

一基本选择器

二后代选择器