CSS选择器

时间 2019-11-20

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

原文原文链接

基础选择器

1. 标签选择器

标签选择器能够选中全部的标签元素，好比div,ul,li等等，无论标签隐藏的多深，都能选中，选中的都是全部的，而不是某一个，全部是"共性"而不是"特性"css

<head>
    <style type="text/css">
        /*标签选择器*/
        body{
            background: red;
        }
    </style>
</head>

2. id选择器

选中id的值
同一个页面中的id不能重复
任何标签均可以设置id
id的命名规范：要以字母，能够有数字，下划线，字母大小写严格区分html

<head>
    <style type="text/css">
        /*id选择器 已 # 号为开头*/
        #box{
            background-color: red;
        }
    </style>
</head>

3. 类选择器

类：就是class，class与id很是类似，任何标签均可添加类，类是能够重复的，属于归类的概念布局

同一个标签中能够携带多个类，用空格分开字体

<head>
    <style type="text/css">
        /*类选择器 已 . 号为开头*/
        .lv{
            color: red;
        }
        
        .big{
            font-size: 40px;
        }
        
        .line{
            text-decoration: underline;
        }
    </style>
</head>

/* 公共类，共有属性 */
<div>
    <p class="lv big">段落1</p>
    <p class="lv line">段落2</p>
    <p class="line big">段落3</p>
</div>

注意：code

不要用一个类将咱们的页面写完，这个标签要携带多个类，共同设置样式
每一个类要尽量的小，有公共类的概念，可以让更多的标签使用
尽量的用class，除非一些特殊状况能够用id

4. 通用选择器

使用 * 选择全部元素orm

*{
    color:red;
}

高级选择器

1. 后代选择器

使用空格表示后代选择器。父元素的后代(包括儿子，孙子，重孙子等)htm

div p{
    color: red;
}
/* 从div全部后代中找 p 标签，设置字体颜色为红色 */

2. 子元素选择器

使用 > 表示子代选择器。好比div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。blog

div>p {
  color: red;
}
/* 从div的直接子元素中找到p标签，设置字体颜色为红色 */

3. 毗邻选择器

使用 + 号表示毗邻选择input

div+p {
  color: red;
}
/*找到全部紧挨在div后面的第一个p标签，设置字体颜色为红色。*/

4. 弟弟选择器

div~p {
  color: red;
}
/* 到全部div标签后面同级的p标签，设置字体颜色为红色。 */

5. 并集选择器

多个选择器之间使用逗号隔开，表示选中页面中的多个标签，一些共性的元素，可使用并集选择器页面布局

/*并集选择器*/
h3,a{
    color: #008000;
    text-decoration: none;
}

如百度页面使用并集选择器

/*使用此并集选择器选中页面中全部的标签，页面布局的时候会使用*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
    margin: 0;
    padding: 0
}

6. 交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器。
语法：div.active
若有一个<h4 class='active'></h4>这样的标签

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}

/* 交集选择器 它表示二者选中以后元素共有的特性。*/
h4.active{
    background: #00BFFF;
}

7. 属性选择器

属性选择器一般用在表单控件中

/*根据属性查找，查找全部title属性，用中括号括起来*/
[title]{
    color: red;
}

/*找到全部title属性值为 hello 的元素*/
[title="hell"]{
    color: red;
}

/*属性值以...开头，title属性值已hello开头的元素*/
[title^="hello"]{
    color: red;
}

/*属性值以...结尾*/
[title$="hello"]{
    color: red;
}

/*属性值包含某元素*/
[title*="hello"]{
    color: red;
}

/*找到全部title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"]{
    color: red;
}

/*表单经常使用*/
input[type="text"]{
    backgroundcolor: red;
}

伪类选择器

伪类选择器通常用在超连接a标签中，使用a标签的伪类选择器，必定要遵循"爱恨原则" LoVe HAte

伪类名称	含义
a:link	未单击访问时超连接样式
a:visited	单击访问后超连接样式
a:hover	鼠标悬浮其上的超连接样式
a:active	鼠标单击未释放的超连接样式
input:focus	input输入框获取焦点时样式

/*没有访问的超连接a标签样式：*/
a:link {
  color: blue;
}

/*访问过的超连接a标签样式：*/
a:visited {
  color: gray;
}

/*鼠标悬浮在元素上应用样式*/
a:hover {
  background-color: #eee; 
}

/*鼠标点击瞬间的样式：*/
a:active {
  color: green;
}

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

伪元素选择器

<style type="text/css">
    
    /*设置第一个首字母的样式*/
    p:first-letter{
        color: red;
        font-size: 30px;
    }
    
    /* 在....以前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器必定要结合content属性*/
    p:before{
        content:'alex';
    }
    
    /*在....以后 使用很是频繁（清除浮动）*/
    p:after{
        content:'&';
        color: red;
        font-size: 40px;
    }
</style>

选择器的优先级

CSS选择器优先级时哦经过权重规则来决定的

注意：
还有一种不讲道理的!import方式来强制让样式生效，可是不推荐使用。由于大量使用!import的代码是没法维护的