css选择器

CSS选择器

CSS元素选择器

根据元素名称来选择HTML元素

p{
  color: red;
}

css选择器分组

h1,h2,h3,h4{
  color: blue;
}

CSS类选择器

选择特定class属性的HTML元素

//选择器前面有个点号（.）
.center{
    text-align: center;
}

还可以引用多个类：class=“center” 和 class="large"

<p class="center large">这个段落引用两个类。</p>

类名不能以数字开头！

CSS ID选择器

使用HTML元素的id属性来特定选择元素

//选择器前面有个井号（#）
#pare{
    text-align：cenetr；
}

id 名称不能以数字开头

CSS通用选择器(*)

*选择页面上的所有HTML元素

//会影响页面上每一个HTML元素
* {
  margin:0;
  padding:0;
}

css属性选择器

属性与属性值必须完全匹配

//简单属性选择
a[href]{
  color: red;
}

//根据部分属性值选择:使用 ~
div[class~="test"]{
  color: red;
}

css后代选择器

规则左边的选择器包括两个或多个用空格分隔

//html
<div>
    <p>这是一个段落！！！！</p>
</div>

//css,用空格间隔
div p{
    color: red;
}

css子元素选择器

当你不希望选择任意的后代元素，希望缩小范围，只选择某个元素的子元素

//css,使用大于号（>）
h1 > strong {
    color:red;
}

//html
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

//第一个h1中的两个strong中的字会变红，但是第二个h2中的strong不受影响

css相邻兄弟选择器

可选择紧接在另一个元素后的元素，且二者有相同的元素

//html
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

//css,使用加号（+）
li + li{
    font-wight:bold;
}
//这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

css伪类

1. 锚伪类

a:link{...} //未访问
a:visited{...}  //已访问
a:hover{...}  //鼠标移动到链接上
a:active{...}  //选定的链接

2. 与css类搭配

<a class="red"></a>

a.red:visted{
    coloe:red;
}

3. :first-child伪类：选择元素的第一个元素
4. ：lang伪类

css伪元素

:first-letter   向文本第一个字母添加特殊样式
:first-line     向文本的首行添加首行样式
以上两个只能适用于块级元素

:before         在元素之前添加内容
:after          在元素之后添加内容

练习

table.company td > p

解释：上面的选择器会选择作为td元素子元素的所有p元素，这个td元素本身从table元素中继承，table元素包含一个company的class属性

html > body table + ul {
    margin-top:20px;
}

解释：选择紧接在table元素后出现的所有兄弟ul元素，该table元素包含在body元素中，该body元素本身是html元素的子元素