CSS选择器总结

最新推荐文章于 2022-05-01 14:22:49 发布

Tina、

最新推荐文章于 2022-05-01 14:22:49 发布

阅读量176

点赞数

文章标签： css选择器

本文链接：https://blog.csdn.net/jojo1218/article/details/100674238

版权

1. 关于引用:
引用css样式：

1）行内样式，直接在标签中的style中，形如 ,选择器和大括号省略。

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">Leaping Above The Water</h1>
     <p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

2）页内样式：style标签中写css代码。形如
实例:

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

3）外部使用:xxx.css文件写css语句，html中link标签引入。link标签习惯放在head标签。
link标签href属性引用css文件、type属性（可选）。rel relation关联。

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

2. 选择器的特点:
选择器 selector

标签选择器
优点书写方便，缺点作用所有标签控制不精细，
场景，网页中一个标签各个位置样式一致：css开头标签样式默认样式初始化。


<style type="text/css">
p{
    font-size:14px;
}</style>
<body>
<p>css</p>
</body>

后代/派生选择器
空格表示标签嵌套的层级。
如果标签层级过多，可以在不跟其他选择器冲突的情况下省略中间的层级。
举个例子，github首页左侧ul标签和中部的ul标签样式完全不同，所以需要更细致的选择器。

li strong {
    font-style: italic;
    font-weight: normal;
  }

ID选择器
id选择器直接作用定义id值的标签，目的性非常明确
场景：需要部分使用，不要大量使用，其他选择器书写不正确时先用id选择器尝试
```
*#intro {font-weight:bold;}
<p id="intro">This is a paragraph of introduction.</p>
```
class类选择器
类：很多编程语言中都有类的概念，例如“人类”，小明、小红都是人类的个体、实例。
一组东西
场景：一组样式一样的相同结构的标签；
一个组件在网页中多次使用，不要写多次，只需把html中相同组件赋值同样的class值。
一般情况下，都建议使用class，这是专门为css搭配使用的。
class\id\name：之前已经比较过id和name，class专门配合css

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

属性选择器
标签都有name style required，这些属性值也可以选择一个或一组标签。不建议过多使用

如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}

子代选择器
跟后代选择器非常相似，但只选择父元素的低一层元素，而后代选择器会查找所有层子元素。子代选择器更加精确。

选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

伪类选择器
场景，在某处html标签前后添加一些信息。信息比较小，js动态，HTML、直接写影响本身效果。
:before :after
添加上的content内容不可选择。
静态伪类和动态伪类两种:
（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
PS：以上三种样式，只能用于超链接。

孩子选择器
场景，表格的最后一行加粗，最后一行，隔行变色
:first-child 相对于当前标签元素的父元素的第一个子元素

li{
    color:blue;
}
li:first-child {
    color:red;
}
p:nth-last-child(1) {
    color:green;
}

Tina、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器总结

1. 关于引用:引用css样式：1）行内样式，直接在标签中的style中，形如 ,选择器和大括号省略。<!DOCTYPE><html><head> <meta charset="utf-8" /> <title>行内样式</title></head><body> &lt...
复制链接

扫一扫