CSS选择器

CSS选择器

通配符

语法：*{属性：属性值；}

*{margin: 0; padding: 0;}

页面所有元素都会应用该样式。

元素选择器/标签选择器

语法：元素名称{属性：属性值；}

p{color:red;}

元素选择器就是以结构中元素名称作为选择器。所有的页面元素都可以作为选择器。

Class选择器

语法：.class名{属性：属性值；}

<style type="text/css">
       .p1{属性: 属性值;}
</style>
        <p>段落一</p>
        <p class="p1">段落二</p>
        <p>段落三</p>

命名规则：其中不得包含汉字、空格和特殊字符；必须以英文字母开头，可以是字母、数字、下划线的组合。必须语义化（见名知意）。

id选择器

语法：#id名{属性：属性值；}

<style type="text/css">
       #p1{属性: 属性值;}
</style>
        <p>段落一</p>
        <p id="p1">段落二</p>
        <p>段落三</p>

当我们使用id选择器时，应该为每个元素定义一个id属性，一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象

属性选择器

语法：元素[属性] {属性：属性值；}

<style>
      <!--找到所有有href属性的元素-->
      [href] {
              color:red;
      }
       <!--找到所有href属性值等于某个值的元素-->
      [href=""] {
              color:red;
      }
</style>
<a href="http://www.usian.cn/">积云教育</a>

可以通过一个元素的属性及属性值找到元素

伪类选择器

选中某些元素的某种状态，常用于a元素上
：link{属性：属性值；}超链接的初始状态；谷歌浏览器下href="#"link伪类才能有正确的颜色值；
：hover{属性: 属性值;}鼠标悬停，即鼠标滑过超链接时的状态，也可以添加到其他元素上；
：active{属性：属性值；}超链接被激活时的状态，即鼠标按下超链接的状态；
顺序：a；link，a：visited，a：hover，a：active

伪元素选择器

用于向某些选择器设置特殊效果
：before通过设置content属性向某些元素前面添加某些内容。

<style type="text/css">
        span:before {
            content:"《"
        }
    </style>
    <p>
        我最喜欢看的书籍是<span>金瓶梅</span>!
    </p>

：after通过设置content属性向某些元素后面添加某些内容。

<style type="text/css">
        span:after {
            content:"》"
        }
    </style>
    <p>
        我最喜欢看的书籍是<span>金瓶梅</span>!
    </p>

群组选择器

语法：选择器1，选择器2，选择器3{属性：属性值；}
同时为多个选择器添加一条样式
当有多个选择器应用相同的样式时，可以将选择器用“，”分隔得方式，合并为一组

h1,h2,h3,h4,h5,h6{color:red; font-size: 30px;}

包含选择器/后代选择器

语法：选择器1 选择器2{属性：属性值；}
选择器间用空格隔开

ul li{}

子级选择器/子元素选择器

语法：选择器>选择器{属性：属性值；}
通过父元素选择子级元素

交集选择器/并且选择器

语法：元素/标签选择器.选择器{属性：属性值；}
由两个选择器直接连接构成的，其中第一个必须是元素/标签选择器，第二个必须是前面元素上的类选择器或者ID选择器，这两个选择器之间不能有空格，必须连续书写

<style>
        div.main{color:red}
    </style>
    <div class='main'>123</div>
    <div class='main1'>456</div>

兄弟选择器

1.+
语法：选择器+选择器{属性：属性值；}
用来选择后面相邻得一个兄弟元素

<style type="text/css">
    h1 + p {color:red;}
</style>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

2.~
语法：选择器~选择器{属性：属性值；}
用来选择后面所有得兄弟元素

<style type="text/css">
    h1 ~ p {color:red;}
</style>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>