css_选择器

老师的博客:https://www.cnblogs.com/liwenzhou/p/7999532.html

参考w3 school:http://www.w3school.com.cn/css/css_selector_grouping.asp

先来个总结：

css 样式大总结
行内样式 直接写
内部样式  在head中<style>
外部样式  在head中<link href='地址' rel ='stylesheet' type='text/css'>
    在外部样式中又分为以下几类：
    基本选择器：
        元素选择器
            P{}
        id 选择器
            #i1{} 一般第一位不要用数字
        类选择器
            p.c1{} and .c1 {}  class=''
        通用选择器
         * {}
    组合选择器：
        后代选择器 p li {}
        儿子选择器 div>p{} 儿子不选孙子
        毗邻选择器 div +p{} 在div后面同级的p
        弟弟选择 div~p{} div后面同级的p
    属性选择器：
        p[s9='af']{}
        p[s9]{} 优先级要大
    其他：
        [title^='asdf']{}以asdf 开头的title属性
        [title$='asdf']{}以asdf 结尾的title属性
        [title*='asdf']{}含有asdf 的title属性
        [title~='asdf']{}title的多个属性中含有asdf 的
    分组和嵌套：
        分组：div，p{}
                div，
                p{}
        嵌套：.c1 p{}    .c1中的p     
    伪类选择器：
        a link{} 未访问
        a visited{} 已访问
        a active{} 选定的
        a hover {} 放在上面的的连接
        input ：focus{} 输入框输入时
    伪元素选择器：
        P:first-letter{}首字母
        p:before{} 在p元素之前
        p:afer{} 在p元素之后
      before和after多用于清除浮动。
css的继承
    body{}很低的
选择器的优先级：
    行内 内部 外部
    内联 id 类 元素

css一共三种引入的样式:分别为行内样式，内部样式，外部样式

先来看下面的两种样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css实例</title>
    <style>
        /*这是行内注释*/
        p{
            color: red;
            font-size: 28px
        ;}
    </style>
</head>
<body>
<p style="color:red;font-size:18px">直接行内注释</p>
<p>海燕啊</p>
</body>

外部样式

基本的选择器

<body>
<p style="color:red;font-size:18px">直接行内注释</p>
<p>默认元素选择器</p>
<p>默认元素选择器</p>
<p id="i1">id选择器 但是只能引用一下，因为id只有一个</p>
<p class="c1">类选择器</p>
<p class="c1">类选择器</p>
<p class="c1">类选择器</p>
<p class="c1">类选择器</p>
<p class="c1">类选择器</p>
<h1>h1通用选择器</h1>
</body>
</html>

css文件

/*先来段注释*/


/*元素选择器*/
p {
    color: rgba(136,52,140,0.94)
    ;font-size: 28px;
}

/*id选择器*/

#i1 {
    color: rgba(119,213,73,0.64);)
    ;font-size: 39px;}


/*类选择器*/
/*两种写法  第一种  .c1*/
p.c1 {
    color: yellow;
    font-size: 1px;
}
/*样式类名不要用数字开头（有的浏览器不认）。*/
/*标签中的class属性如果有多个，要用空格分隔。*/


/*通用选择器*/

* {
    color: white;
    font-size: 50px;
}

组合选择器

先来看html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <link href="index2.css"rel="stylesheet"type="text/css">
</head>
<body>
<ol>
    <li>后代选择器</li>
</ol>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

<div>it is  <span>儿子 </span></div><!--span是儿子-->
<div>it is <em>1 <span>孙子 </span></em></div>
<div>i am div</div>
<p>i am p</p>
<ul>
    <li> i am li</li>
    <p>i am p bu li brother1</p>
    <p>i am p bu li brother1</p>
    <p>i am p bu li brother1</p>
    <li> i am li</li>
</ul>
</body>
</html>

然后css

/*后代选择器*/
/*只针对某个类中的小类*/
ol li{color: aqua }
p em {
    color: blue;
}

/*儿子选择器 只选择儿子，孙子就不会选择*/

div > span{
    color:magenta;
    font-size: 50px;}


/*毗邻选择器 紧挨着的选着*/
/*选择后者 及p*/
div+p{
    color:blanchedalmond;
font-size: 2ch}

/*弟弟选择器*/
/*选择li后面的所有的同级p标签*/
li~p {
  border: 2px solid royalblue;
    color: firebrick;
    font-size: 58px;

属性选择器

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link href="属性.css" rel="stylesheet"type="text/css">
</head>
<body>
<p s9="asdf">wo shi yi p 标签</p>
<p s9="f">wo shi yi p 标签</p>

</body>
</html>

css

/*属性标签*/
/*第一种 s9属性是asdf*/
p[s9="asdf"]{
    color: aqua;
font-size: 53px
}
/*第二种 含有s9属性的*/
p[s9]{
    color: aqua;
font-size: 5px
}
/*很明显第二种的级别更加的高级*/

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

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

分组与嵌套

下面是老师博客

分组

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

div, p {
  color: red;
}

但是一般的写法是

div,
p {
  color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

。