vue中修改css屬性無效

vue中修改css屬性無效,img設定的寬度無效，p設定的顏色有效

>

>
>
carousel
>
>
555555p
>
div>
template
>
>
import carousel from
'./carousel.vue'
;export
default
}script
>
rel=
"stylesheet/scss"
lang
="scss"
scoped
>
imgp
style
>

elements頁面，發現img的寬度屬性沒有覆蓋，甚至沒有出現，不是權重的問題。

檢視sources，發現css檔案裡面有我編寫的img寬度屬性，不是scss編譯的問題。

嘗試使用其他標籤選擇器修改屬性，發現修改p標籤的屬性有效，觀察他們兩個的區別，發現template中沒有img標籤，猜測可能時該css只能修改當前元件的屬性。

沒有仔細檢視官方文件,scoped表示當前style只對當前元件有效，避免元件間樣式相互影響

scoped

>
style
>

>

arrows
>
slot
="prevarrow"
slot-scope
="props"
class
="custom-slick-arrow"
style
="left
: 10px;
zindex
: 1"
>
type
="left-circle"
/>
div>
slot
="nextarrow"
slot-scope
="props"
class
="custom-slick-arrow"
style
="right
: 10px
">
type
="right-circle"
/>
div>
>
src=
"">
img>
div>
>
src=
"">
img>
div>
>
src=
"">
img>
div>
>
src=
"">
img>
div>
a-carousel
>
template
>
>
export
default
;script
>
scoped
>
/*樣式覆蓋*/
img/* for demo */
.ant-carousel >>> .slick-slide
.ant-carousel >>> .custom-slick-arrow
.ant-carousel >>> .custom-slick-arrow:before
.ant-carousel >>> .custom-slick-arrow:hover
.ant-carousel >>> .slick-slide h3
style
>

確認bug是否在本地可以重現。

確認bug在哪一段**中。

去除掉所有無關**，只去除錯和bug相關的**。

和之前正常執行的版本對比，嘗試恢復到之前可以正常執行的**。

重新寫乙個小demo，確認是否可以正常執行，可以的話，移動**到原有的**中。

如果本地無法重現，打日誌，觀察線上行為。

重啟服務，重啟ide，重啟筆記本，重啟伺服器。

跟產品經理說這個bug解決不了，花費的代價很大，不值得。

難點四！！！Vue中繫結屬性無效

vue中繫結屬性一般寫法,如果屬性值是字串則不需要用v bind繫結，直接在元素上加就行了，如果裡面涉及到變數或者其他不是字串的值，一定要用v bind繫結，否則無效。正確寫法 1 v bind pageindex 2 v bind page index 如何給class設多個值 錯誤寫法 for ...

修改 css定義 中的屬性

zc 這裡修改的是 css定義 例如?css檔案中的定義 中的屬性，並不是修改某個物件的css屬性。1 12.2 樣式 12.2.2 操作樣式表 htmllinkelement 可讀寫 htmlstyleelement 可讀寫 cccstylesheet 唯讀介面 有乙個屬性例外 可代表上面兩個，更...

解決css中z index無效問題

在使用z index這個屬性之前，我們必須先了解使用z index的必要條件 1 要想給元素設定z index樣式，必須先讓它變成定位元素，說的明白一點，就是要給元素設定乙個postion relative 定位元素 position屬性值設定除預設值static以外的元素，包括relative，a...