python css选择器语法

css选择器写法

在CSS中，选择器用于指定需要样式化的元素。以下是一些常见的CSS选择器写法：

1. 元素选择器（Element Selector）：以元素的标签名作为选择器，例如：div、p、h1等。

2. 类选择器（Class Selector）：以“.”开头，后面跟类名，例如：.container、.red等。

3. ID选择器（ID Selector）：以“#”开头，后面跟ID名，例如：#header、#nav等。

4. 后代选择器（Descendant Selector）：用空格分隔选择器，选择元素的后代，例如：div p、ul li等。

5. 子元素选择器（Child Selector）：用“>”选择元素的直接子元素，例如：ul > li。

6. 伪类选择器（Pseudo-class Selector）：以“:”开头，用于选择元素的特殊状态或行为，例如：hover、first-child等。

7. 伪元素选择器（Pseudo-element Selector）：以“::”开头，用于选择元素的特殊部分，例如：::before、::after等。

8. 属性选择器（Attribute Selector）：用方括号括起来，用于选择具有特定属性值的元素，例如：[href]、[type='text']等。

9. 通配选择器（Universal Selector）：用“*”选择所有元素。

以上是一些常见的CSS选择器写法，可以根据需求选择合适的选择器来选择样式化的元素。

Python学习总结【第⼗⼋篇】：CSS

CSS简介

CSS(Cascading Style Sheets),称为层叠样式表，⽤于对页⾯进⾏美化，CSS可以使页⾯变的更加美观。基本上所有的html页⾯都会使⽤⼀些

CSS。

使⽤⽅法：元素内联、页⾯嵌⼊及外部引⼊（三种⽅法定义了相同的样式，优先级：标签>页⾯嵌⼊>外部引⽤）

语法：style = 'key1:value1;key2:value2;'

在标签中使⽤ style='xx:xxx;'

在页⾯中嵌⼊ < style type="text/css"> #在头部指定CSS样式

引⼊外部css⽂件

CSS应⽤案例

元素内联：

前端之CSS学习

效果：

页⾯嵌⼊：

在头部定义好css样式，需要时直接应⽤：

前端CSS

前端之CSS学习

效果：

外部引⼊

写⼀个独⽴的⽂件存储css样式代码如下：建议（在样式⽂件⾥加上标注防⽌出现遗忘）

# css定义，⽂件名称color.css

.page_color{

/*设置背景颜⾊及宽带*/

background-color: darkorchid;

width: 300px;

}

# html页⾯

前端CSS

前端之CSS学习

效果：

CSS常⽤属性

background[背景]background-color 背景颜⾊

background-image 背景图⽚

background-position 设置背景图像的起始位置

background-repeat 设置背景图像是否及如何重复

代码：

前端CSS

Hello,html

效果：

div是块级别的标签，我们的图⽚仅仅是⼀个⼩的图⽚，但是现在是平铺，所以看下⾯的代码：

效果：

border[边框]

# 边框可以单独的设置⼀边的边框、上、下、左、右

效果：

display

前端HTML

效果：

cursor[⿏标停放时显⽰的效果]

效果：需要⼿动验证效果

float 浮动[⽤的⽐较多，⽤于布局]

CSS选择器总结

CSS中的选择器规则⾮常重要，种类也⽐较多，⽽jquery中的元素选择器与之也⾮常类似，所以很有必要进⾏学习总结⼀番。

1.元素选择器：

例：选择所有p元素

p {background-color:gray}

以上p可以是任意的html元素名字，如body,h1,h2,div,span等。

2.选择器分组

例：选择所有p元素和h2元素

p,h2 {background-color:red}

3.类选择器

例：选择所有class='demo'的元素

.demo {background-color:gray}

4.类结合元素选择器

例：选择所有class='demo'的h1元素

h1.demo {background-color:red}

5.多类选择器

例：选择同时class标记为demo1,demo2的元素

.demo1.demo2{background-color:red}

6.ID选择器

例：选择ID=demo的元素

#demo {background-color:red}

这⾥需要注意的是：（1）ID在整个html⽂档中是唯⼀的，⽽class不唯⼀（2）类选择器和 ID 选择器可能是区分⼤⼩写的。这取决于⽂档

的语⾔。HTML 和 XHTML 将类和 ID 值定义为区分⼤⼩写，所以类和 ID 值的⼤⼩写必须与⽂档中的相应值匹配。

7.属性选择器

（a)简单属性选择器

例：选择含有demo的属性的所有元素

*[demo] {color:red}

例：只选择有 href 属性的锚（a 元素）

a[href] {color:red}

例：选择同时有 href 和 title 属性的 HTML 超链接

a[href][title] {color:red}

(b)根据具体属性值选择

例：选出title是'demo1'，href是'#'的超链接

a[title='demo'][href='#'] {color:red}

需要注意的是title必须是'demo',不能多也不能少。

css中类选择器的写法

在CSS中，类选择器使用.符号来表示。类选择器允许您为HTML元素定义一组样式，并将这些样式应用于具有相同类名的多个元素。

以下是一个简单的类选择器的示例：

css

.my-class {

color: red;

font-size: 16px;

}

在上面的示例中，.my-class是一个类选择器，它选择了所有具有class="my-class"的HTML元素，并将颜色设置为红色，字体大小设置为16像素。

您可以将类选择器应用于任何HTML元素，例如：

html

这个段落也将是红色和16像素大小。

在上面的示例中，